🎉 Happy 4th of July! Get 15% off GP Premium with the discount code: 4THOFJULY2020

[Resolved] How to move the menu down without adding additional padding?

Home Forums Support How to move the menu down without adding additional padding?

  • This topic has 8 replies, 3 voices, and was last updated 1 week ago by David.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1344666
    Scott

    Layout > Primary Navigation > Menu Item Height moves the menu down but also adds extra padding.

    I’m trying to line up the menu with the bottom of the logo. Menu is float right.

    CSS can do it with:

    .primary-menu{
    margin-top: 55px;
    }

    But that also starts to introduce some additional padding.

    Any help appreciated !

    #1344751
    Scott

    I’ve found a way to implement this but was wondering if there was a better way.

    Before

    After

    Which I accomplished by selecting “Use Navigation as Header” and the the following CSS:

     #menu-main-menu-1 { 
    margin-top: 60px;
    }
    .navigation-branding img{ 
    	 height:95px;
    }

    Is there a better way to accomplish this ?

    Thanks!

    #1344805
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Instead of that, try this:

    .main-navigation.has-branding .inside-navigation {
        align-items: flex-end;
    }
    #1345910
    Scott

    Tom:

    That didn’t move anything, both with Use Navigation as Header selected and deselected.

    #1346216
    David
    Staff
    Customer Support

    Hi there,

    that Code Tom provided should work fine – i edited the CSS using the browser dev tools, removed the top margin CSS and removed the comments from Tom’s CSS and it aligned the element to the bottom of the site header.

    Can you make those changes, clear any caches and check the front end… let us know.

    #1346287
    Scott

    David:

    I still have to specify

     .navigation-branding img{ 
    	 height:95px;}

    But it does indeed work that way.

    Should I not need to specify .navigation-branding img height ?

    You guys have the most incredible support 🙂

    #1346590
    David
    Staff
    Customer Support

    aah yes, you do need to specify the height in CSS or otherwise the logo will take on the height of the navigation.

    You’re welcome

    #1346900
    Scott

    GeneratePress is 10 out of 10 as usual 🙂

    Thanks so much Tom and David!

    #1347177
    David
    Staff
    Customer Support

    Glad we could be of help

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