Need help on my Navigation menu

[mpor005]

Hi,
I am building a website (www.mpmandco.com) and I am struggling to solve a problem I have on the navigation menu.
The main navigation menu has a submenu with a green background. I want that to be always visible wherever I am within the site. If a sub menu item is active, for example 'About us > Our Goal', that sub menu should remain visible on the green background. When I hover on another menu item, for example Products, the About us submenu must be replaced with the Products submenu.
Hope I explained myself and look forward for your help
Mike

[Paul O'B]

Hi, Welcome to Sitepoint

It looks as though you already have a current-menu-item defined so you could turn on the current item quite easily.

e.g.

.navigation-headings ul li.current-menu-item ul{
display:block;
visibility:visible;
top:90px;
}
.navigation-headings ul li.current-menu-item  {
display:block; 
border-left:20px; 
background:#90bf4f; 
height: 30px;
}
.navigation-headings ul li.current-menu-item ul li a {
display:block; 
font-size: 14px; 
height:30px;
Text-decoration: none;
line-height:30px; 
/*width:center; */
float:left; 
color:white; 
margin-right: 5px;
padding:0 10px;}

The above styles duplicate the hover styles for the current-menu-item only.

However, there will be a problem because your home menu item and the shop menu item have no submenus so when you hover over home or shop then the current menu item will still stay visible because it isn't being hidden by a sub menu.

I'm not sure what the easy solution to that is in that set up. You could set up a blank sub menu for the home and shop menus so that the current menu item gets hidden. Or just live with the current item being visible when the home and shop links are hovered.

[mpor005]

Hello Paul O'B , I thank you for your reply and I sincerely apologise for the late reply to thank you for the code. Took me some time to implement but at the end the sub-menu appeared correctly as you suggested.

However, the remaining issue I have is that when I click on one of the submenu items the menu disappears again. So what I need is that when I'm on one of the submenu items (e.g. http://www.mpmandco.com/about-us/our-goal/) the submenu is visible and 'Our Goal' is highlighted in white.

Again, I hope if I can get some help and I thank you in advance

Kind Regards

Michael

[Paul O'B]

Hi,

You'd need to be able to add an identifying class to the sub menu item so that you can target it. Then you would follow the previous example but just follow on with a rule for that submenu.

e.g.

.navigation-headings ul li.current-menu-item ul li.subcurrent a {background:#fff}

As to why the submenu disappears when you click another sub menu item then that would seem to be a script question rather than CSS as it seems you are removing the current-menu-item class from the parent when clicking the submenu.

You really need to get the script to apply the current-menu-item class to the parent and then the subcurrent class to the selected submenu item.

That would seen to be more of a js or wordpress question rather than css though.

[mpor005]

Thank you for your previous reply, I am still trying to figure this out.

On this page for example
http://www.mpmandco.com/about-us/tell-a-friend/

In the code all the sub menus are visible, however they are styled as visibility: hidden. Now I need a way to target just the sub menu I want in order to make that visible. This is where I am getting stuck.

Is there a way maybe to select a sub menu based on the class of the list items inside it? In this Tell a friend page the sub menu contains a list item entry for tell a friend which has the class current-menu-item, so I would need to target its parent submenu ul. Is this possible?

[Paul O'B]

You can't work backwards with css you have to start at the top and move down.

It seems you do have some classes being added to the parent dynamically anyway so I think something like this may work.

This should make the submenu visible by default for the current menu.

ul.menu .current-page-parent ul{visibility:visible}
ul.menu:hover li.current-page-parent ul{visibility:hidden}
ul.menu:hover li.current-page-parent:hover ul{visibility:visible}