2

How do I center the nav bar (3 magenta items) in area (white w- gray border) though the logo is on the left? I am Ok with not using flexbox or making other structural changes to make it work.

The post for which this one is considered a duplicate does not resolve the issue satisfactorily. It adds content to the right to get centering. This content creates undesired results on narrower screens.

As far as duplicate posts are concerned, this post provides an image. The post this one "duplicates" requires readers to imagine what the author desires. This one specifically asks for a result. The "original" specifies a generic desire.

Wireframe of navbar with logo and navigation elements

header {
  position: sticky;
  top: 0;
  width: 100%;
  display: flex;
  height: 50px;
  padding-top: 0 0 0 0;
  background: #B6C1CC;
  align-items: baseline;
}

.name {
  font-family: 'Oswald', 'Roboto', sans-serif;
  font-size: 32pt;
  color: rgb(44, 62, 77);
  line-height: 38px;
  padding-left: 10;
  padding-top: 5;
  flex: 1;
}

.nav-bar {
  display: flex;
  flex: 2;
}

nav {
    display: flex;
    flex-direction: row;
    line-height: 38px;
}

nav a {
    font-family: 'Oswald', 'Roboto', sans-serif;
    font-size: 24pt;
      color:rgb(44, 62, 77);
    line-height: 38px;
    text-decoration: none;
    padding: 12px 20px 0px 0px;
}
<header>
  <div class="name">
    Logo
  </div>
  <div class="nav-bar">
    <nav>
      <a href="">Nav 1</a>
      <a href="">Nav 2</a>
      <a href="">Nav 3</a>
    </nav>
  </div>
</header>
BSMP
  • 4,596
  • 8
  • 33
  • 44
kalmdown
  • 601
  • 1
  • 9
  • 13
  • Use `flex: 1` on name and `flex: n` and `justify-content: center` on nav-bar. n is up to your wish. – m4n0 Nov 24 '22 at 02:02
  • When I use `flex: 5`: https://nimb.ws/8Yz9iO – m4n0 Nov 24 '22 at 02:04
  • Check this example https://codepen.io/Maniraj_Murugan/pen/abKYRwd . – Maniraj Murugan Nov 24 '22 at 02:12
  • for explanation before I wanna tell the solution, if u want still make a flexbox imagine your element must be divided by 3 element so that your nav-bar will be placed on center, so the first thing is you must make an element after the header (to trick so as not to use 1 element block in html), then you can through using `justify-content: space-between` to make your element as you want, here my result, I hope you will be understand sir, good luck, https://jsfiddle.net/tb26wpr8/30/ – ProLuck Nov 24 '22 at 02:27
  • @ProLuck I added the after::header to my Code snippet above. It centers the nav in the leftover space. Not in the overall span. The idea of 3 elements seems the right direction but does the right-hand side element have to be the same width as the left (Logo) and when the space is smaller what happens to the right side element, so it doesn't create odd vertical spacing? – kalmdown Nov 24 '22 at 02:48
  • @kalmdown, did u mean overall span is nav link? the width is not must be the same with each other, well when the space is getting smaller you must think how to solve it, is it about responsive space did u mean? if yes u must have a change with your code again sir – ProLuck Nov 24 '22 at 03:21
  • @ProLuck The overall span is the white space with grey border. nav-bar is what should be centered in that span irrespective of the logo. – kalmdown Nov 24 '22 at 03:40
  • This is the subject of [a meta question](https://meta.stackoverflow.com/questions/421649/does-stack-overflow-respect-images-i-asked-a-question-and-added-an-image-but-t). – Peter Mortensen Nov 24 '22 at 15:28

0 Answers0