[Resolved] Header/Main Nav Side Spacing

[Brent Wilson]

Can I get some help figuring out how to fix the side spacing on a navigation as header? I want the left and right padding to be at 30 px on all devices and on both sticky and normal.

The site I’m dealing with is: https://wordpress-483838-2431328.cloudwaysapps.com/

Please watch this Loom video for a walkthrough of what I am dealing with: https://www.loom.com/share/505f0d10202b4245832bba08afa05379

[Fernando]

Hi Brent,

With your current structure, here is a CSS you may try adding to Appearance > Customize > Additional CSS:

ul.menu li.menu-item a {
    padding: 0 20px;
}

@media (max-width: 1024px) {
    /* CSS in here for tablet only */
    .main-navigation .inside-navigation.grid-container>* {
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
}

.main-navigation > .inside-navigation.grid-container {
    padding-left:30px !important;
    padding-right:30px !important; 
}

.navigation-branding p.main-title {
    margin-left:0;
}
}

Hope this helps! Kindly let us know how it goes. 🙂

[Brent Wilson]

Okay, great! That seemed to resolve those issues. A couple more things:

Please watch this Loom video: https://www.loom.com/share/a05fc5f45009456ba2d15f82efce8fdd

URL to page with weird flicker issue (see video): https://wordpress-483838-2431328.cloudwaysapps.com/camp-meetings/

[Fernando]

Hi Brent,

Try this CSS instead:

ul.menu li.menu-item a {
    padding: 0 20px;
}

@media (max-width: 1024px) {
    .main-navigation .inside-navigation.grid-container>* {
        margin-left:0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .main-navigation > .inside-navigation.grid-container {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    .navigation-branding p.main-title {
        margin-left: 0;
    }

    ul.menu li.menu-item a {
        padding: 0;
    }

    ul.menu li.menu-item {
        padding: 0 30px;
    }
    .both-sticky-menu .main-navigation:not(#mobile-header).toggled .main-nav > ul {
    z-index: 10000;
}

}

I added a z-index value in the new code. The flickering issue was occurring because you have link elements in your body with a z-index of 999, similar to the z-index of the main-menu. Basically, they are on the same plane, causing the issue. I increased the z-index of your main-menu to avoid this issue.

Hope this clarifies. 🙂

[Brent Wilson]

That seems to work well.

Just a bit more to get this menu stuff all perfected!

On this page, I have an element applying CSS to change the color of the menu and such: https://wordpress-483838-2431328.cloudwaysapps.com/camp-meetings/2021-camp-meeting/

The following CSS is there to make the hover color change on the hamburger menu icon. But I have added the word “MENU” as a mobile menu label, and it is not changing to the hover color on hover. How do I include that?

.menu-toggle:hover .gp-icon svg {
    fill: #e7e7e7;
}

[Fernando]

Try this:

button.menu-toggle:hover .icon-menu-bars > * {
    fill: rgb(255,0,0);
}

Kindly let us know how it goes. 🙂

[Brent Wilson]

That seems to be targeting the hamburger menu icon. But the CSS I sent you in my previous comment was already doing that. But it is still not targeting the mobile menu label.

[Fernando]

Sorry, I misunderstood.

Try this if you want to modify the color of “MENU”:

button.menu-toggle span.mobile-menu {
    color:rgb(255,0,0);
}

Kindly let us know how it goes. 🙂

[Brent Wilson]

Okay, I was able to add hover to that, change the color, and achieve what I was trying to achieve. Thanks!

[Fernando]

Oh yeah, sorry, I forgot about the hover. Glad you sorted it out though! Feel free to reach out anytime you’ll need assistance with anything else. 🙂

[Author]

Posts