Dynamic NavBar in which the logo is always in the middle

Maik Lowrey 0
Viewed 73

My goal: A responsive navbar where the logo is always in the middle and an element is always on the left. Depending on the context (page dependent), buttons can be displayed in the right area or not.

My approach: I use a flexbox for the navbar. I have three divs in the flexbox. I have given all divs a fixed width. The middle box is also a flexbox. The div with a logo is located there. I position the logo on the right edge of the middle flexbox. The div with the logo has a fixed width (80px).

The problem: The approach works but I don't find this way very nice. Because the widths are dependent on each other. If you would change the logo and it would be wider or narrower then you would have to adjust the relative width of the middle and right box. The second problem is if the device smaller as 900px then this solution dont work.

Question: What other possibilities are there and what possibilities would resolve this "width" dependency?

#app {
  margin: 0 auto;
  max-width: 900px;
  width:100%;
}
header {
  height: 80px;
  display: flex;
  justify-content:space-between;
}
.header-left {
  width:20%;
  background: green;
}
.header-middle {
  width:34%;
  background: gray;
  display: flex;
  justify-content:flex-end;
}
.header-right {
  width:46%;
  background: green;      
}

.logo {
  background-color: red;
  width:80px;
  height: 80px;
  text-align:center;font-size:70px;
}
<div id="app">
  <small>width: 900px</small>
  <header>
    <div class="header-left">Burger Menu</div>
    <div class="header-middle">
      <div class="logo">
I
      </div>
    </div>
    <div class="header-right">Context Buttons</div>
  </header>
  <div>
    <div style="width:50%; background: black;color:white; text-align:center;">Controller Div 50%</div>
  </div>

</div>

flexbox css html
4 Answers

You can use flex-grow: 1 on the left and right elements, the middle element will be in center naturally. In this case, you don't need to set widths on elements.

#app {
  margin: 0 auto;
  max-width: 900px;
  width:100%;
}
header {
  height: 80px;
  display: flex;
  justify-content:space-between;
}
.header-left {
  flex-grow: 1;
  background: green;
}
.header-middle {
  background: gray;
  display: flex;
  justify-content:flex-end;
}
.header-right {
  flex-grow: 1;
  background: green;      
}

.logo {
  background-color: red;
  width:80px;
  height: 80px;
  text-align:center;font-size:70px;
}
<div id="app">
  <small>width: 900px</small>
  <header>
    <div class="header-left">Burger Menu</div>
    <div class="header-middle">
      <div class="logo">
I
      </div>
    </div>
    <div class="header-right">Context Buttons</div>
  </header>
  <div>
    <div style="width:50%; background: black;color:white; text-align:center;">Controller Div 50%</div>
  </div>

</div>

Nick Vu0
loic0

Based on your comments, I would suggest the following code as a simple solution.

I have added a max-width value to your .logo CSS class and I have also moved your inline CSS from the front-end code, and created a .controller CSS class for it.

#app {
  margin: 0 auto;
  max-width: 900px;
  width: 100%;
}

header {
  height: 80px;
  display: flex;
  justify-content: space-between;
}

.header-left {
  width: 20%;
  background: green;
}

.header-middle {
  width: 34%;
  background: gray;
  display: flex;
  justify-content: flex-end;
}

.header-right {
  width: 46%;
  background: green;      
}

.logo {
  background-color: red;
  width: 80px;
  height: 80px;
  text-align: center;
  font-size: 70px;
  max-width: 80px;
}

.controller {
  width: 50%;
  background: black;
  color: white;
  text-align: center;
}
<div id="app">
  <small>width: 900px</small>
  <header>
    <div class="header-left">Burger Menu</div>
    <div class="header-middle">
      <div class="logo">
        I
      </div>
    </div>
    <div class="header-right">Context Buttons</div>
  </header>
  <div>
    <div class="controller">Controller Div 50%</div>
  </div>

</div>

LionHeart-Nerd0

A solution would be to use a mix of flex and position: absolute. Then you need only the left and the right container. the logo you can center with position left: left: calc(50% - calc(80px / 2));. The 80px is the width from your logo.

* {
  margin: 0;
  padding: 0;
}

#app {
  margin: 0 auto;
  max-width: 900px;
  width:100%;
}
.header {
  display: flex;
  justify-content: space-between;
  height: 80px;
  background: yellow;
  position: relative;  
}
.header-left {
  background-color: green;
  width: 20%
}
.header-right {
  background-color: green;
  width: 44%;
}


.logo {
  background-color: red;
  width:80px;
  height: 80px;
  text-align:center;
  font-size:70px;
  position: absolute;
  left: calc(50% - calc(80px / 2));
}
<div id="app">
  <div class="header">
    <div class="header-left">left</div>
    <div class="logo">X</div>
    <div class="header-right">right</div>
  </div>

  <div style="width:50%; background: black;">Controller Div 50%</div>
</div>

Max Pattern0
Related