[Resolved] Sub-menu opens down in sidebar

[Juan Carlos]

Hi!

Im trying to make a submenu thats opens down in my sidebar.

Im trying with this code:

.sidebar .main-navigation .main-nav .current-menu-item .sub-menu, 
.sidebar .main-navigation .main-nav .current-menu-ancestor .sub-menu {
	opacity: 1; 
	left: auto;
	position: relative;
	width: 100%;
  height: auto;
}

The menu its ok, but when I load another page, the menu returns to enfold to the right.

How can I fix it?

[Leo]

Hi there,

Not quite sure what you mean?

Which page is working correctly?

That CSS should target the entire site.

Let me know 🙂

[Juan Carlos]

Hi Leo.

Thanks for the response.

If you go to http://www.hairconceptprofessional.com/categoria-producto/acabados/, the menu works ok.

But, if you go to another page, for example: http://www.hairconceptprofessional.com/empresa/, the menu opens to the right…

[Leo]

How are you adding the CSS?

Are you using any caching plugins?

[Juan Carlos]

Im adding the CSS in Appearance > Customize.

I dont have any caching plugin…

[David]

Hi Juan,

it’s working on the shop pages as they are menu ancestors and that code overwrites the normal sub menu CSS. Try this code instead:

.sidebar .main-navigation ul ul, 
.sidebar .main-navigation .main-nav .current-menu-ancestor .sub-menu {
	opacity: 1; 
	left: auto !important;
	position: relative;
	width: 100% !important;
  height: auto;
}

[Juan Carlos]

Hi David.

Now the submenu appears fine but I cant click on its elements.

Also, when you put the mouse over the word “Products”, the menu opens to the right…

[David]

I edited the code above, can you try this.

[Juan Carlos]

Now its ok, but its possible that the submenu only appears when you click in the upper page?

[David]

Sorry, lets try this instead:

#left-sidebar .main-navigation ul ul {
	position: relative;
	top: auto;
	left: 0;
	width: 100%;
	opacity: 1;
}

[Juan Carlos]

Wow! Now its ok!

A lot of thanks! 🙂

[David]

Phew…. glad to hear its’ working – sometimes better to start from scratch with this type of code 🙂

[Author]

Posts