1

There is 6 items in navbar:

  1. first 3 items should be aligned as flex-start - on beginning of navbar.

  2. Then Logo should be in center of navbar

  3. And on the end -> flex-end should come 2 icons

Here is screenshot of navbar current condition:

enter image description here

Problem: is position of Logo - am using margin-left: '27%'. And on different screen size logo is not aligned well.

I would like to align some how that logo trough flex, is there a way to do that with flex?

Check the code:

HTML/jsx: 

 <div className="container">
  <header className="header">
    <nav className="user-nav">
      <div className="user-nav-item">
        <Link href="/">
          <a className="user-nav-item-link">Overview</a>
        </Link>
      </div>
      <div className="user-nav-item">
        <Link href="/search">
          <a className="user-nav-item-link">Search</a>
        </Link>
      </div>
      <div className="user-nav-item">
        <Link href="/feed">
          <a className="user-nav-item-link">Feed</a>
        </Link>
      </div>
      <h3 className="logo">Logo</h3>
    </nav>

    <div className="user-nav-icon">
      <div className="user-nav-icon-box">
        <img src={bellIcon} alt="notify icon" />
      </div>
      <div className="user-nav-icon-box">
        <img src={settingsIcon} alt="settings icon" />
      </div>
    </div>
  </header>
</div>

CSS:

.container {
  max-width: 100vw;
  display: flex;
  flex-direction: column;


.header {
  display: flex;
  align-items: center;
  height: 5rem;
  color: #fff;
  background-color: black;

  .user-nav {
    width: 100%;
    display: flex;
    align-items: center;

    &-item {
      width: 5.5rem;
      padding: 1.5rem;
      cursor: pointer;
    }

    &-item-link {
      text-decoration: none;
      color: white;
    }

    .logo {
      margin-left: 27%;
    }

    &-icon {
      display: flex;
      align-items: center;
      background-color: white;
      color: red;
      margin-right: 3rem;

      & > * {
        padding: 0 0.8rem;
        cursor: pointer;
      }

      &-icon-notification {
        color: red;
      }
    }
  }
}

}
Mosia Thabo
  • 4,009
  • 1
  • 14
  • 24
Mark James
  • 338
  • 4
  • 15
  • 43
  • 2
    You must note that Your Logo is no longer a direct child of your flex container. It's more like a grandChild... lol! So try putting the logo as a direct child node within the flex container. Don't put it within another element in the flex container. – Mosia Thabo May 27 '19 at 09:44
  • Ok when I will put logo as child of container, I need to give him some property to move him in middle of nabvar – Mark James May 27 '19 at 09:46
  • 1
    Try my answer below. The problem with Flex Box is that within a container, you can only align all items at once using your flex-start, flex-end etc. So Rather use a different approach. See my code below, I have tested it and it should work for you. – Mosia Thabo May 27 '19 at 10:05

3 Answers3

2

Using Flex Box. It will be harder to achieve that, I have an alternative. Please test this code on codepen:

* {
  box-sizing: border-box;
}

.parent{
  width: 100%;
  min-height: 80px;
  background-color: yellow;
  display: relative;
}
.nav-menu,
.icons{
  display: inline-block;
}
.icons{
  float: right;
  margin-left: 75px; /*This will help your icons to never go below the logo element*/
}
.nav-menu{
  margin-right: 75px; /*This will help your nav-menu items to never go below the logo element*/
}
.logo{
  width: 150px;
  height: 40px;
  position: absolute;
  left: 50%;
   background-color: green;
  transform: translateX(-50%);
}
<div class="parent">
  <div class="nav-menu"> Your Menu</div>
  <div class="logo"></div>
  <div class="icons">Your Icons</div>
</div>
Mosia Thabo
  • 4,009
  • 1
  • 14
  • 24
  • This pull the icon out of the flow of the document. Not great for responsiveness. – Chuck Le Butt Apr 08 '21 at 12:26
  • You are right in saying "It pulls the icon out of the document flow", but relative to what? because you're positioning it relative to the header... and it will always be in the middle because you used `%` not fixed `px` value. I use this method everytime because flexbox positions items based on their with, in this case the logo won't always be centered... If all the three sections that make up the header were the same in width then it would always be centered. Responsiveness all depends on your use of @media... and you can change anything you want in it. – Mosia Thabo Apr 08 '21 at 19:44
  • When the screen gets narrow, it's very possible that text will disappear under the logo instead of at least wrapping around – Chuck Le Butt Apr 08 '21 at 19:49
  • No that's not true... When the screen gets narrow you need to take care of the what happens then inside @media, even if you didn't use `absolute` position, the elements will deform at some point when the text inside the left-most element goes beyond the elemtn width – Mosia Thabo Apr 08 '21 at 19:51
  • You as the coder, control what should happen when the screen narrows :)... By the time the text hides under the logo... long before then you'd want to hide the menu and turn it into a mobile view by just putting the menu toggle button only... – Mosia Thabo Apr 08 '21 at 19:53
  • This is very bad practice for the real world. This could be connected to a CMS where someone else in the company adds or rewords the navigation items. You need to build for all situations, not just the ones you have control over. – Chuck Le Butt Apr 08 '21 at 19:55
  • I'd be very happy to do so so that it help you understand this correctly. – Mosia Thabo Apr 08 '21 at 20:00
  • I concede that if you have want it truly centered, you have few options open to you. I've undone my -1. The best solution is to avoid a centred logo nav (as all modern websites do). https://www.nngroup.com/articles/centered-logos/ – Chuck Le Butt Apr 08 '21 at 20:23
  • https://jsfiddle.net/9mzfk1dL/ – Chuck Le Butt Apr 22 '21 at 20:06
1

You can simply get the logo out you nav so that all three, logo, nav and icons become flex items and justify header's content with space-between. Below is the simplified code.

P.S. - Share the rendered code as your implementation in future and not JSX/SASS

.container {
  max-width: 100vw;
  display: flex;
  flex-direction: column;
}
.container .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5rem;
  color: #fff;
  background-color: black;
}
.container .header .user-nav {
  display: flex;
  align-items: center;
}
.container .header .user-nav-item {
  padding: 1.5rem;
  cursor: pointer;
}
.container .header .user-nav-item-link {
  text-decoration: none;
  color: white;
}
.container .header .user-nav-icon {
  display: flex;
  align-items: center;
  background-color: white;
  color: red;
  margin-right: 3rem;
}
.container .header .user-nav-icon > * {
  padding: 0 0.8rem;
  cursor: pointer;
}
.container .header .user-nav-icon-icon-notification {
  color: red;
}
<div class="container">
  <header class="header">
    <nav class="user-nav">
      <div class="user-nav-item">
        <a class="user-nav-item-link">Overview</a>
      </div>
      <div class="user-nav-item">
        <a class="user-nav-item-link">Search</a>
      </div>
      <div class="user-nav-item">
        <a class="user-nav-item-link">Feed</a>
      </div>
    </nav>
    <h3 class="logo">Logo</h3>
    <div class="user-nav-icon">
      <div class="user-nav-icon-box">
        Bell
      </div>
      <div class="user-nav-icon-box">
        Settings
      </div>
    </div>
  </header>
</div>
nimsrules
  • 2,026
  • 20
  • 22
1

Here is an answer using display: flex; Flexbox is best & elegant to align items to mid of the page without cheesy computations by Margin, Transform,...

<html>
  <head>
    <style>
      *, .container {
        width: 100%;
        top: 0;
        left: 0;
        padding: 0;
        margin: 0;
        color: ivory;
        font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
        font-size: 13px;
      }

      .header {
        display: flex;
        align-items: center;
        padding: 10px;
        background-color: gray;
      }

      .user-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30%;
      }

      .user-nav-item {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .logo {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40%;
      }

      .user-nav-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <header class="header">
        <nav class="user-nav">
          <div class="user-nav-item">
            <Link href="/">
              <a class="user-nav-item-link">Overview</a>
            </Link>
          </div>
          <div class="user-nav-item">
            <Link href="/search">
              <a class="user-nav-item-link">Search</a>
            </Link>
          </div>
          <div class="user-nav-item">
            <Link href="/feed">
              <a class="user-nav-item-link">Feed</a>
            </Link>
          </div>
        </nav>
        <h3 class="logo">Logoooooooooooooooooooooo</h3>
        <div class="user-nav-icon">
          <div class="user-nav-icon-box">
            <img src={bellIcon} alt="notify icon" />
          </div>
          <div class="user-nav-icon-box">
            <img src={settingsIcon} alt="settings icon" />
          </div>
        </div>
      </header>
    </div>
  </body>
</html>
Ashokan Sivapragasam
  • 2,033
  • 2
  • 18
  • 39