Jump to content
Sign in to follow this  
danielfinn

NavBar customization: Children menu

Recommended Posts

danielfinn

Hello,

I am using the responsive NavBar. At present, if I am visiting a child menu item, that specific item in the NavBar remains high lighted blue. Therefore when I go to select another child menu item there is one static blue highlighther on the current page and my dynamic one which I am moving around to select a new page. Could someone help me with the CSS to remove this static blue highlighter to show the currently viewed childpage? I would like the background of this new highlighter to be transparent.

Dan

Share this post


Link to post
Share on other sites
danielfinn

Yes I do. I would like to be able to be viewing a childpage, but not have it stuck on highlight in the dropdown menu. Like you have in the screenshot - on the SERVICE childpage but not having the childpage stuck on highlight in the drop down menu.

Sorry if I have not expliained myself properly - I am not sure what this action is called. I would like to know the CSS to do this.

Share this post


Link to post
Share on other sites
Rob

Daniel, try this in Dashboard > PageLines > Site Options > Custom Code > CSS Rules

.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li.current-menu-item > a {



	background-color: #FFFFFF;

	background-image: -moz-linear-gradient(center top , #FFFFFF, #FFFFFF);

	background-repeat: repeat-x;

	color: #0081C2;

	text-decoration: none;

}


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
fordtheword

I've just tested this on navbar and it works nicely and I can change the colour on the gradient. What's odd is that I only have it working on Firefox, Chrome doesn't change the standard blue highlight hover background colour. Any idea how come?

Thanks

Share this post


Link to post
Share on other sites
Danny

The code above for the gradient is for mozilla browsers, if you wish to have the gradient appear on all browsers you will need to use the CSS that is compatible with that browser.

I recommend you view this site to generate your gradient code for all browsers - http://www.colorzilla.com/gradient-editor/


Please search our forums, before posting!

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

Sign in to follow this  

×