Top Menu Navigation

• 

  noleskie · Member · Aug 29, 2013 at 1:04 am

  • Copy link
  • Add topic to favorites

  Hi there.

  I am in the middle of updating my website,
  but I seem to have two teething problems remaining.

  The second teething issue (which I am focusing on in this topic) is a minor one; however, I am a perfectionist, so I want to see if it is possible to fix it.

  I have a top menu bar on my website, and, when I hover to a parent link that has one child link, and then hover to that child link, I want the parent link (which is still visible) to keep the hover colour and not revert to either the non-hover colour (i.e., transparent), or an alternative colour (i.e., #222222). I’ve tried to fix this, but can’t seem to find the right code for it…

  Here is the current code for this one:

  #top ul.menu > li a {
  	color: #ffffff;
  }
  
  #top ul.menu > li a:hover {
  	background: #13579a;
  }
  
  #top ul.menu > li.parent > a:after {
  	content: "";
  	display: block;
  	border: .4em solid #ffffff;
  	border-top-color: rgb(255,255,255);
  	border-top-style: solid;
  	border-top-width: .4em;
  	border-right-color: transparent;
  	border-right-style: solid;
  	border-right-width: .4em;
  	border-bottom-color: transparent;
  	border-bottom-style: solid;
  	border-bottom-width: .4em;
  	border-left-color: transparent;
  	border-left-style: solid;
  	border-left-width: .4em;
  	border-color: #ffffff transparent transparent;
  	position: absolute;
  	top: 40%;
  	right: .9em;
  }
  
  #top ul.menu ul li a {
  	background-color: transparent;
  }
  
  #top ul.menu > li ul a {
  	background-color: transparent;
  }
  
  #top ul.menu > li ul:hover a {
  	background-color: #13579a;
  }
  
  #top ul.menu > li ul a {
  	background-color: transparent;
  }
  
  #top ul.menu > li.current_page_item a, #top ul.menu > li.current_page_parent a, #top ul.menu > li.current-menu-ancestor a, #top ul.menu > li.current-cat a, #top ul.menu > li.li.current-menu-item a {
  	background: #112358;
  }
  
  #top ul.menu > li.current_page_item a:hover, #top ul.menu > li.current_page_parent a:hover, #top ul.menu > li.current-menu-ancestor a:hover, #top ul.menu > li.current-cat a:hover, #top ul.menu > li.li.current-menu-item a:hover {
  	background: #13579a;
  }

  Your assistance is greatly appreciated; thanking you in anticipation.

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Aug 29, 2013 at 3:49 am

  • Copy link

  I think I understand what you want. Give this a try and see if it gets you want you are looking for.

  .main-navigation .menu li.current_page_parent a {
  background: #13579A;
  }

• 

  noleskie · Member · Aug 29, 2013 at 4:37 am

  • Copy link

  Thanks for your input.

  I already (inadvertently) factored that into this string of code:

  .main-navigation .menu li.current_page_item a, .main-navigation .menu li.current_page_parent a, .main-navigation .menu li.current-menu-ancestor a, .main-navigation .menu li.current-cat a, .main-navigation .menu li.li.current-menu-item a {
  	background-color: #112358;
  }

  That being said, I apologise for not being clear enough.
  Here is a link to the area in question. As previously stated, it is in the top navigation bar, and not the masthead.

  All I want is ‘Say Hi’ to have the hover colour, when a person is pointing at the ‘Photography’ link, but I couldn’t figure out how to do it by inspecting the elements…

  Thanks again for your assistance.

• 

  noleskie · Member · Aug 29, 2013 at 4:39 am

  • Copy link

  My apologies for the dead link in the above comment; here it is.

• 

  thesacredpath · Member · Aug 29, 2013 at 3:23 pm

  • Copy link

  Neither link is working for me. I get a can’t find.

  When you say pointing, do you mean when someone is hovering over the “photography” submenu item, but are not yet on that page? If so, this will do it.

  #top ul.menu > li:hover > a {
      background: #112358;
  }

• 

  noleskie · Member · Aug 29, 2013 at 10:13 pm

  • Copy link

  Apologies for that; I thought that links were live.
  For your interest, if you want to have a look, the direct link is here.

  Nonetheless, that string of code that you provided was what I needed; thank you.

  Here’s why I couldn’t get it right the first time; I used this string of code, instead:

  #top ul.menu > li a:hover {
  	background: #13579a;
  }

  It worked for all parent links, but left the ‘Say Hi’ link dark grey when the mouse hovered on the ‘Photography’ link. That being said, thanks again for your assistance and patience.

• 

  thesacredpath · Member · Aug 30, 2013 at 2:56 am

  • Copy link

  You are very welcome.