[Resolved] Header/Main Nav Side Spacing

Home Forums Support [Resolved] Header/Main Nav Side Spacing

Home Forums Support Header/Main Nav Side Spacing

  • This topic has 9 replies, 2 voices, and was last updated 4 months ago by Fernando.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2186915
    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

    #2186925
    Fernando
    Customer Support

    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. ๐Ÿ™‚

    #2186995
    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/

    #2187005
    Fernando
    Customer Support

    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. ๐Ÿ™‚

    #2187019
    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;
    }
    #2187042
    Fernando
    Customer Support

    Try this:

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

    Kindly let us know how it goes. ๐Ÿ™‚

    #2187047
    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.

    #2187055
    Fernando
    Customer Support

    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. ๐Ÿ™‚

    #2187059
    Brent Wilson

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

    #2187070
    Fernando
    Customer Support

    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. ๐Ÿ™‚

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.