Archived topic
Sub-menu opens down in sidebar
11 replies · Started by Juan Carlos on July 5, 2018
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?
Hi there,
Not quite sure what you mean?
Which page is working correctly?
That CSS should target the entire site.
Let me know :)
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...
How are you adding the CSS?
Are you using any caching plugins?
Im adding the CSS in Appearance > Customize.
I dont have any caching plugin...
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;
}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...
I edited the code above, can you try this.
Now its ok, but its possible that the submenu only appears when you click in the upper page?
Sorry, lets try this instead:
#left-sidebar .main-navigation ul ul {
position: relative;
top: auto;
left: 0;
width: 100%;
opacity: 1;
}Wow! Now its ok!
A lot of thanks! :)
Phew.... glad to hear its' working - sometimes better to start from scratch with this type of code :)
