The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Navigation bar design

View previous topic View next topic Go down

Solved Navigation bar design

Post by DeathDunk98* on October 5th 2013, 8:23 pm

how do I make something similar to this? with hover effect and all that stuff ? help !!


Last edited by andiikadriu on October 5th 2013, 10:09 pm; edited 1 time in total

DeathDunk98*
Forumember

Posts : 479
Reputation : 3
Language : Shqip

Back to top Go down

Solved Re: Navigation bar design

Post by levy on October 5th 2013, 8:34 pm

Hello , where you saw that , can you provide us the link and hat's your forum version ?

levy
Hyperactive

Male Posts : 2566
Reputation : 344
Language : Romanian, English
Location : Romania | Feel free to tag me into your topic if you have a problem

http://help.forumotion.com/

Back to top Go down

Solved Re: Navigation bar design

Post by DeathDunk98* on October 5th 2013, 9:16 pm

here is where I saw it! http://www.esportskosova.com
heres my forum http://www.islamishendrit.halofight.com
its not that important to be the exact thing , the same , but at least to look like that a bit ? :/

DeathDunk98*
Forumember

Posts : 479
Reputation : 3
Language : Shqip

Back to top Go down

Solved Re: Navigation bar design

Post by levy on October 5th 2013, 9:52 pm

Administration Panel -> Display -> Headers & Navigation -> Display only images in the navbar : No

Now , Administration Panel -> Display -> Colors -> CSS Stylesheet

Code:
.menu_mbajtesi {
background: #171717 url("http://esportskosova.com/forum/styles/vm-page/theme/images/bg_menu.png") repeat-x 3px -5px;
height: 35px;
width: 95%;
min-width: 1024px;
margin: 0px auto 10px;
-moz-border-radius: 8px 8px 0px 0px;
border-radius: 8px 8px 0px 0px;
-khtml-border-radius: 8px 8px 0px 0px;
}

a.mainmenu{
position: relative;
color: #FFF;
padding-bottom:6px;
text-align: center;
text-decoration: none;
z-index: 99;
margin-right: 2px;
border-bottom: #C40202 4px solid;
  text-transform:uppercase
}

a.mainmenu img{
  display:none;
}

a.mainmenu:hover{
  text-decoration:none!important;
  border-bottom:#F00 4px solid;
   text-decoration:none;
   background: url("http://esportskosova.com/forum/styles/vm-page/theme/images/bg_buton-shigjeta.png") no-repeat bottom center;
}
After that , go in Administration Panel -> Display -> Templates -> General -> Overall_header ,find that:

Code:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>
and replace with this :

Code:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}" class="menu_mbajtesi">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>
Press Save -> Validate Add and that's all

levy
Hyperactive

Male Posts : 2566
Reputation : 344
Language : Romanian, English
Location : Romania | Feel free to tag me into your topic if you have a problem

http://help.forumotion.com/

Back to top Go down

Solved Re: Navigation bar design

Post by DeathDunk98* on October 5th 2013, 10:01 pm

yeah but how do I get rif of this seperation ? all over the menu ?

DeathDunk98*
Forumember

Posts : 479
Reputation : 3
Language : Shqip

Back to top Go down

Solved Re: Navigation bar design

Post by levy on October 5th 2013, 10:04 pm

find that : margin-right: 2px; on the a.mainmenu , change that , and make bigger ( for exampele , 3 , 4, 5 )

levy
Hyperactive

Male Posts : 2566
Reputation : 344
Language : Romanian, English
Location : Romania | Feel free to tag me into your topic if you have a problem

http://help.forumotion.com/

Back to top Go down

Solved Re: Navigation bar design

Post by DeathDunk98* on October 5th 2013, 10:05 pm

sorry where do I find that ?

DeathDunk98*
Forumember

Posts : 479
Reputation : 3
Language : Shqip

Back to top Go down

Solved Re: Navigation bar design

Post by levy on October 5th 2013, 10:06 pm

Code:
a.mainmenu {
position: relative;
color: #FFF;
padding-bottom: 6px;
text-align: center;
text-decoration: none;
z-index: 99;
margin-right: -12px;
border-bottom: #0091ff 4px solid;
text-transform: uppercase;
padding-left: 15px;
padding-right: 15px;
}
Sorry , change with that your old code , that is the preview :

levy
Hyperactive

Male Posts : 2566
Reputation : 344
Language : Romanian, English
Location : Romania | Feel free to tag me into your topic if you have a problem

http://help.forumotion.com/

Back to top Go down

Solved Re: Navigation bar design

Post by DeathDunk98* on October 5th 2013, 10:08 pm

SOLVED :Dthanks Smile

DeathDunk98*
Forumember

Posts : 479
Reputation : 3
Language : Shqip

Back to top Go down

Solved Re: Navigation bar design

Post by levy on October 5th 2013, 10:14 pm

Glad to help you cheers

levy
Hyperactive

Male Posts : 2566
Reputation : 344
Language : Romanian, English
Location : Romania | Feel free to tag me into your topic if you have a problem

http://help.forumotion.com/

Back to top Go down

Solved Re: Navigation bar design

Post by SLGray on October 6th 2013, 5:15 pm

Topic Solved & Locked


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35670
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum