Dynamic NavBar in which the logo is always in the middle-CodePudding

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 >Burger Menu</div>
    <div >
      <div >
I
      </div>
    </div>
    <div >Context Buttons</div>
  </header>
  <div>
    <div style="width:50%; background: black;color:white; text-align:center;">Controller Div 50%</div>
  </div>

</div>

CodePudding user response：

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 >Burger Menu</div>
    <div >
      <div >
I
      </div>
    </div>
    <div >Context Buttons</div>
  </header>
  <div>
    <div style="width:50%; background: black;color:white; text-align:center;">Controller Div 50%</div>
  </div>

</div>

CodePudding user response：

Since you're looking for different possibilities i'll suggest you to take the approch used by Tepken Vannkorn : Centering brand logo in Bootstrap Navbar

CodePudding user response：

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 >Burger Menu</div>
    <div >
      <div >
        I
      </div>
    </div>
    <div >Context Buttons</div>
  </header>
  <div>
    <div >Controller Div 50%</div>
  </div>

</div>

CodePudding user response：

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 >
    <div >left</div>
    <div >X</div>
    <div >right</div>
  </div>

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

CodePudding user response：

Try this:

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

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

<div id="app">
  <small>width: 100%</small>
  <header>
    <div >Burger Menu</div>
    <div >
      <div >
I
      </div>
    </div>
    <div >Context Buttons</div>
  </header>
  <div>
    <div style="width:50%; background: black;color:white; text-align:center;">Controller Div 50%</div>
  </div>

</div>