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.

Changing the navbar

View previous topic View next topic Go down

Solved Changing the navbar

Post by Miss-March on February 11th 2016, 10:10 pm

Hello.

I would like to learn how to change my site's navbar to look like the one on this site (forumotion help).

Here's a picture, just in case.

click

I want the style to look like it, but in different colors as my website has a lighter color palette.

Edit: Solved!



Last edited by Miss-March on February 13th 2016, 11:44 am; edited 3 times in total

Miss-March
New Member

Posts : 9
Reputation : 1
Language : English

http://fairytailzero.forumotion.com/

Back to top Go down

Solved Re: Changing the navbar

Post by Genesis on February 11th 2016, 10:30 pm

Here:
Ange Tuteur wrote:phpbb3 is purfect.

Here add these rules to your stylesheet :
Code:
#page-header .navbar { background:none }
#page-header .navbar .linklist li { font-size:0 }
#page-header .navbar .linklist {
  background:#EEE;
  border:none;
  margin:-9px -10px 0px -10px;
}

#page-header a.mainmenu {
  color:#666;
  font-size:13px;
  font-weight:bold;
  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/nav10.png') repeat-x 0px 45px;
  display:inline-block;
  height:45px;
  line-height:45px;
  padding:0px 12px;
  transition:250ms;
}

#page-header a.mainmenu:hover { background-position:0 40px }

FYI the border is made using a small background image. To change the color you need to to edit the image.

Genesis
Helper
Helper

Male Posts : 2331
Reputation : 322
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Solved Re: Changing the navbar

Post by Miss-March on February 11th 2016, 10:53 pm

It didn't seem to have worked. But perhaps I'm doing it wrong.



Last edited by Miss-March on February 12th 2016, 6:59 pm; edited 1 time in total

Miss-March
New Member

Posts : 9
Reputation : 1
Language : English

http://fairytailzero.forumotion.com/

Back to top Go down

Solved Re: Changing the navbar

Post by Genesis on February 12th 2016, 1:28 am

Try:
Code:
#page-header .navbar .linklist {
  background:#EEE;
  border:none;
  margin:-9px -10px 0px -10px;
}
 
#page-header a.mainmenu {
  color:#666;
  font-size:13px;
  font-weight:bold;
  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/nav10.png') repeat-x 0px 45px;
  display:inline-block;
  height:45px;
  line-height:45px;
  padding:0px 12px;
  transition:250ms;
}

Genesis
Helper
Helper

Male Posts : 2331
Reputation : 322
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Solved Re: Changing the navbar

Post by Miss-March on February 12th 2016, 8:46 am

Still no change.

Edit:

I've changed my mind on the sort of navbar I want. Its the one from this tutorial. I've followed the steps in it, but like before, there's no change.

As my problem is still relevant to the topic title and my intention is the same, I'm keeping it in this topic instead of making a new one.

Miss-March
New Member

Posts : 9
Reputation : 1
Language : English

http://fairytailzero.forumotion.com/

Back to top Go down

Solved Re: Changing the navbar

Post by Ange Tuteur on February 12th 2016, 3:53 pm

Hey,

Did you make sure to follow the instructions here :
targetNode : targetNode is the target element that will be turned into a sticky item. ( the navbar in this case ) Depending on your version, you should replace #page-header .navlinks by :

phpbb2 : .bodyline > table + table
phpbb3 : Leave it as is. 
punbb : #pun-navlinks
invision : #submenu

It's under 3. Modifications

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Changing the navbar

Post by Royal Bengal on February 12th 2016, 5:22 pm

This code provided by @Forumedic is working in my forum Very Happy

Royal Bengal
Forumember

Male Posts : 492
Reputation : 4
Language : English
Location : Bangladesh

http://Avacs.sforum.biz

Back to top Go down

Solved Re: Changing the navbar

Post by Ange Tuteur on February 12th 2016, 5:43 pm

Royal Bengal wrote:This code provided by Forumedic is working in my forum Very Happy
Note that the code provided is for version phpbb3, not all members use this forum version. I believe this member uses PunBB, hence why it doesn't work for them.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Changing the navbar

Post by Miss-March on February 12th 2016, 6:58 pm

I must have pasted the code wrong in the CSS. Just tried it again, and now the sticky navbar works. Thank you so much!

Edit: The one posted by forumedic still doesn't, sadly. I would like that one as well, please.

Miss-March
New Member

Posts : 9
Reputation : 1
Language : English

http://fairytailzero.forumotion.com/

Back to top Go down

Solved Re: Changing the navbar

Post by Genesis on February 12th 2016, 9:52 pm

Here:
Code:
#pun-navlinks li { font-size:0; }
#pun-navlinks { background:#333; }
 
#pun-navlinks a.mainmenu {
  color:#FFF;
  font-size:13px;
  font-weight:bold;
  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
  background:url('http://i18.servimg.com/u/f18/18/45/41/65/nav10.png') repeat-x 0px 45px;
  display:inline-block;
  height:45px;
  line-height:45px !important;
  padding:0px 12px;
  transition:250ms;
}
 
#pun-navlinks a.mainmenu:hover {
  background-position:0 40px;
}


Last edited by Forumedic on February 12th 2016, 10:56 pm; edited 2 times in total

Genesis
Helper
Helper

Male Posts : 2331
Reputation : 322
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Solved Re: Changing the navbar

Post by Ange Tuteur on February 12th 2016, 10:14 pm

Forumedic wrote:Here:
Code:
#page-header .navbar { background:none }
#page-header .navbar .linklist li { font-size:0 }
#pun-navlinks {
  background:#EEE;
  border:none;
  margin:-9px -10px 0px -10px;
}
 
#page-header a.mainmenu {
  color:#666;
  font-size:13px;
  font-weight:bold;
  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/nav10.png') repeat-x 0px 45px;
  display:inline-block;
  height:45px;
  line-height:45px;
  padding:0px 12px;
  transition:250ms;
}
 
#page-header a.mainmenu:hover { background-position:0 40px }

Change that to this and it should be near perfect :
Code:
#pun-navlinks li { font-size:0; }
#pun-navlinks { background:#333; }
 
#pun-navlinks a.mainmenu {
  color:#FFF;
  font-size:13px;
  font-weight:bold;
  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
  background:url('http://i18.servimg.com/u/f18/18/45/41/65/nav10.png') repeat-x 0px 45px;
  display:inline-block;
  height:45px;
  line-height:45px !important;
  padding:0px 12px;
  transition:250ms;
}
 
#pun-navlinks a.mainmenu:hover {
  background-position:0 40px;
}

Most of the selectors need to be changed as well as a few properties for punbb. blackeye

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Changing the navbar

Post by Miss-March on February 13th 2016, 11:43 am

It works wonderfully, thank you both so much. I really appreciate you taking the time to help me.

Miss-March
New Member

Posts : 9
Reputation : 1
Language : English

http://fairytailzero.forumotion.com/

Back to top Go down

Solved Re: Changing the navbar

Post by Ange Tuteur on February 13th 2016, 1:49 pm

No problem. Wink

Topic archived

Have a good weekend. Smile

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.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