Archived topic
2nd level dropdown menu issue
7 replies · Started by C on May 6, 2021
Hello,
I'm creating a site with the following navigation structure:
Products > Wood Flooring > Solid Wood Flooring
The > icon appears broken and on the next line of the navigation link.
I think this is related to me using the additional CSS as seen here to auto adjust the width (preferred method visually):
https://docs.generatepress.com/article/menu-item-height-width/#sub-menu-item-width
I can fix the issue setting a fixed width of the menus but it's not ideal.
Is there any work around to have the menus auto adjust AND have the menu icon display correctly?
Thanks in advance GP team!
Hi there,
can you share a link to the site so i can see what the options are
Sure. Details added in private area.
Note: currently the custom css is set to a specific width but you can change it as required.
Thanks in advance, your time appreciated.
Try this CSS instead:
.main-navigation ul ul {
width: auto;
white-space: nowrap;
}
.main-navigation .main-nav ul ul li a {
display: flex;
justify-content: space-between;
}That works well, thanks David.
The only minor issue is that the container height for "Wood Flooring" is 37px whereas all the others are 33px. On quickly glancing I'm not sure why but if this can be solved the solution then looks perfect!
Try adding this to remove the padding on dropdown toggle which is causing the height issue:
.menu-item-has-children ul .dropdown-menu-toggle {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
}That works perfect!
Thanks again for your help today David. Will mark this as resolved.
Glad to be of help
