[Support request] How to reduce the whitespace in the SecondaryHeadermenu

[Jenny]

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.

https://bilderupload.org/image/6c9862758-img-0687.jpg

[Fernando]

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.

[Jenny]

Shure 🙂 it’s deactivated

[Fernando]

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!

[Author]

Posts