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

[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?

[David]

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;
}

[Scott]

Perfect. Thank you!

[David]

Glad to be of help!

[Author]

Posts