Jump to content

Archived

This topic is now archived and is closed to further replies.

margeau

standard navbar highlight color

Recommended Posts

margeau    0
margeau

Hi,

 

I am using the standard navbar - base color theme in the current DMS / WP versions. I am trying to change or eliminate the color of the highlight under the menu items on hover and while viewing the pages linked a menu item. It is a cool effect, but I don't want to use it in this instance. I have been trying to change the color to the background color of my nav section all afternoon using every idea I found on this forum, but I was unsuccessful and thought that perhaps since the base color theme looks different, it may controlled by different CSS.

 

I also used Firefox's and Google's development tools to try identify the code, but no success there either.

 

The site is not live to viewers, but live to be accessed if that helps: http://dev.ochocodental.com/wordpress/

 

Just to clarify, I am pleased with the site's link color being implemented for the drop down highlight color (thank you for doing that as I remember struggling with the in Pagelines Framework), I just want to mask or eliminate the color highlight under the menu items on hover and when visiting the page linked to the menu item.

 

Many thanks to anyone who can help me over this hurdle so I can get on to the next one.

 

Margeau

Share this post


Link to post
Share on other sites
margeau    0
margeau

I forgot to state that I am using the Viewer child theme. I chose it for this project primarily because of the navigation set up. I didn't realize the highlight under the nav was still there, but invisible because it is the same color as the header background color. Unfortunately, I can't do it that way in this instance as I am trying to visually bridge the old site to this new site through the color scheme.

Share this post


Link to post
Share on other sites
margeau    0
margeau

I did finally find the pertinent code. I will post it here in case anyone is looking for sees this post. The CSS is:

.navbar{
	&.pl-color-base{
		.navline{
			> li{

				&:hover > a,
				&.current-menu-item > a,
				&.dropdown.open > a{
					color: @textColor;
					background-color: @pl-base;
					box-shadow: inset 0 -4px 0 #232221;
				}

			}

		}
	}
}

I modified the box-shadow line to replace @linkColor with my background color #232221.

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Thank you for the update and this will definitely help others in future :) 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites

  • Similar Content

    • acasablanca
      By acasablanca
      Hi there,
       
      I would like to make some tweaks to the look of my Navbar:
       
      1) Adjust the navbar color to choose a custom color (I already have the RGB code)
      2) Give the Navbar the functionality of drop-down sub-menu pages that appears only when I point the mouse finger to the particular Navbar page. (this is a functionality very common in many pages nowadays).
       
      Btw, I read a couple of threads and documents here but I couldn't find how to do it. 
       
      Appreciate your help.
       
      Alex
×