Archived topic
Sub Menu Size Help
3 replies · Started by Gabriel on September 21, 2021
I am having a couple of issues with my dropdown sub-menu. The last letter of one of the words on the menu item is wrapping to the next line. I also noticed that the dropdown menu is bordered on one side with a thin line, but there isn't a line on the other side. http://harberphotography.com . The Menu item Galleries.
Hi there,
Simples fix would be this CSS to reduce the right hand padding from the submenu:
.main-navigation .main-nav ul ul li a {
padding: 12px 10px 12px 46px;
}to remove the box shadow ( the border line ) use this CSS:
.main-navigation ul ul {
box-shadow: unset;
}David
Is there any way to fix this without using CSS? It also seems like there is a lot of space on either side of the menu type for it to be wrapping to the next line. Is there anyway to reduce the space on either side of the type while keeping the entire word on a single line?
As for the box shadow, I would rather have the border line go all the way around the drop-down menu if possible.
Thanks,
Gabriel
Hi Gabriel,
You can try adjust the submenu width at customizer > layout > primary navigation to fix the wrapping issue, but then the width of submenu and the parent menu item would be different.
Is there anyway to reduce the space on either side of the type while keeping the entire word on a single line?
It will require custom CSS.
shadow can only apply to 1 side, but you can add this CSS to have a look:
.main-navigation ul ul {
border-left: 1px solid rgb(0 0 0 / 10%);
}Let me know if you need further assistance :)
