Archived topic
How to reduce the whitespace in the SecondaryHeadermenu
3 replies · Started by Jenny on July 7, 2022
Hello :)
I just want to reduce the white-space in the Headermenu, but I Can't find the setup to do that. Can you help me? :)
That would be great.
Hi Jenny,
Can you temporarily disable all caching/optimization plugins? There’s CSS which I can’t say for sure where are coming from.
I’ll try to provide an appropriate fix after they’re disabled.
Hope to hear from you soon.
Shure :) it's deactivated
Thank you!
First, you have this CSS in the style.css of you Child theme:
.pll-parent-menu-item {
margin-right: 4rem;
}
Try putting it in a query so it’s not added on mobile view:
@media (min-width: 769px) {
.pll-parent-menu-item {
margin-right: 4rem;
}
}
You also have this code which is already in a media query adding spacing on mobile in Additional CSS:
ul {
margin-left: 1.5em !important;
}
Lastly, you have 2 empty Paragraph Blocks which you’ll need to delete to achieve the layout you’re going for: https://share.getcloudapp.com/12uLzOWP
Once you’ve deleted the 2 Paragraph Blocks, you may add this CSS:
@media (max-width: 768px) {
.secondary-nav-aligned-right .secondary-navigation .inside-navigation {
justify-content: space-between;
}
}
It should look like this afterwards: https://share.getcloudapp.com/nOuXbYAE
Hope this helps!