[Support request] How can I align logo left and navbar right in site header?

Home Forums Support [Support request] How can I align logo left and navbar right in site header?

Home Forums Support How can I align logo left and navbar right in site header?

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #615037
    Scott

    Hi all. I’m trying to create a header with the logo and nav menu inside the same DIV tag, the logo to the far left and the nav menu to the far right. I have set the “Container Width” to 1200px. I have a 200×28 pixel logo. The navbar on desktop takes about 820px. Finally, I’m using this CSS:

    .site-header .inside-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    to vertically align the logo and to spread the items in the header flexbox I’ve created across the entire width. Except this last part, spreading the items left and right, isn’t working.

    When the site is displayed, the items in the header are:

    • 200px wide logo
    • 90px of empty space
    • 820px wide navbar
    • Another 90px of empty space

    So in other words, the navbar is centered in the space remaining after deducting the logo width.

    I just want to move the navbar all the way over to the right…what CSS do I need to do so?

    GeneratePress 2.1.3
    GP Premium 1.6.2
    #615042
    David
    Staff
    Customer Support

    Hi Scott,

    the navigation grabs the grid container margins which are set to auto which centers them in their container. So we just need to remove the right margin from it and the margin left auto will push it over:

    .main-navigation {
        margin-right: 0;
    }
    #615048
    Scott

    Perfect. Thank you!

    #615056
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.