Jump to content


Photo
- - - - -

How to Customize the Standard NavBar

customize nav nav customize navbar customize background color customize hover customize dropdown

Best Answer James B , 27 February 2013 - 01:00 AM

Thank you very much for sharing this, I know there will be many users who will find this extremely useful :-)

Go to the full post


  • Please log in to reply
3 replies to this topic

#1 gamarayllc

gamarayllc

    Newbie

  • Members
  • 1 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 26 February 2013 - 11:28 PM

I had a hard time finding everything in one place when I started trying to customize my navbar but after a ton of hunting with Firebug / Chrome's development tool I was successful.

 

Let me point out that you should really learn some CSS when doing this. At the bare minimum selectors and how they inherit. I've been writing CSS for 10+ years and I still learn something new about it everyday. Please please use tools like Firebug and or the browser development tool for inspecting elements. It's not only helpful for understanding the structure of the CSS but will save you tons of time. 

 

Under NavBar I opted to use the Standard NavBar - Light Grey Theme and the Standard NavBar is my Main Nav.

Please Login or Register to see this Hidden Content

 

 

Screenshot of my NavBar selection and how my customized navbar looks. 

 

Attached Files


  • James B and raezerj like this

#2 James B

James B

    Advocate

  • Moderators
  • 4985 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 27 February 2013 - 01:00 AM   Best Answer

Thank you very much for sharing this, I know there will be many users who will find this extremely useful :-)



#3 matshearer

matshearer

    Newbie

  • Members
  • 5 posts
  • LocationVista, Ca
  • Framework Version:2.4.4
  • Country: Country Flag

Posted 02 June 2013 - 05:01 PM

Strange, I tried using this, and it did nothing for my website.  I changed things up too, so I can see a difference, and nothing.  Strange.  Has the code to change the standard NavBar changed?  I've tried using Firebug to figure this out on my own, but I can't seem to find the CSS I need to fully customized this NavBar.



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 02 June 2013 - 05:05 PM

Mat,

 

Where did you paste the code? Do you have NavBar or Nav Classic implemented?







Also tagged with one or more of these keywords: customize nav, nav, customize navbar, customize background color, customize hover, customize dropdown