Question

Posted · Report post

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.

/*THIS CUSTOMIZES THE BACKGROUND COLORS, BORDER */
.navbar.pl-color-grey {
	background-color: #616432;
	background-image: -moz-linear-gradient(top,#616432,#616432);
	background-image: -ms-linear-gradient(top,#616432,#616432);
	background-image: -webkit-gradient(linear,0 0,0 100%,from(#616432),to(#616432));
	background-image: -webkit-linear-gradient(top,#616432,#616432);
	background-image: -o-linear-gradient(top,#616432,#616432);
	background-image: linear-gradient(top,#616432,#616432);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#616432', endColorstr='#616432', GradientType=0);
	border-top: 5px solid #cbe82e;
	color: #FFF;
}

/*THIS CUSTOMIZES THE LIST ITEMS - THE FONTS */
.navbar.pl-color-grey .navline > li > a {
color: #FFFFFF;
text-shadow: 0 1px 0 #000000;
}

.navbar.pl-color-grey .navline > li.current-menu-item > a {
	color: #cbe82e;
}

/*THIS CUSTOMIZES THE LIST ITEMS HOVER - THE FONTS */
.navbar.pl-color-grey .navline > li > a:hover {
color: #cbe82e;
text-shadow: 0 1px 0 #000000;
}

/*THIS CUSTOMIZES THE DROPDOWN - BACKGROUND COLOR */
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li.current-menu-item > a {
	background-color: #616432;
	background-image: none;
	background-repeat: repeat-x;

}

 

 

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

 

2 people like this

Share this post


Link to post
Share on other sites

5 answers to this question

  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Mat,

 

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Why though aren't the settings in the NavBar more more powerful to be able to do this without css and why does a user have to provide the helpful solution?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

We do not like to overload the user with options for every small detail, we did this with Platform Pro and the majority of the feedback from that was that users were confused. So we limited the options in PageLines Framework.

In DMS you have more control as the navigation options have several color schemes to choose from.

 

Also, as far as I can tell, the code the user has provided is something I wrote years ago and added to a forum post when we used Vanilla forums.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now