1

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>
Maik Lowrey
  • 15,957
  • 6
  • 40
  • 79
  • Why can you not just set your ```.logo``` section to also include a ```max-width: 75px;```, for example? Just set it to the maximum width of your current logo? – LionHeart-Nerd Sep 14 '22 at 12:35
  • @LionHeart-Nerd Thank you for comment! Why can you not just set your .logo section to also include a max-width: 75px;, for example? Just set it to the maximum width of your current logo? – Maik Lowrey Sep 14 '22 at 12:41
  • 1
    Does this solve your issue? If so, I will post the correct code as an answer - I can also see a couple of aesthetic changes I can add to the code. :) – LionHeart-Nerd Sep 14 '22 at 12:45
  • @LionHeart-Nerd I would be happy if you suggest me your solution, because i just don't know how you mean it. and code improvements would also be tol! merci – Maik Lowrey Sep 14 '22 at 12:48

4 Answers4

2

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 Vu
  • 14,512
  • 4
  • 21
  • 31
  • 1
    Thanks! I think the answer is good and I think I can continue to work with it. I'm still waiting for the answer from a colleague @LionHeart-Nerd. I'll get back to you as soon as I know more! :-) +1 from me! – Maik Lowrey Sep 14 '22 at 13:11
2

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

loic
  • 36
  • 3
  • Thank you! I don't use bootstrap but the answer is good. I had already thought about working with position: absolute. I will definitely try it out too! – Maik Lowrey Sep 14 '22 at 13:14
1

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-Nerd
  • 61
  • 15
  • Thanks for your answer! I have been eagerly awaiting it :-) But to be honest I like Nick's answer better because it solves the problem with the "dependent widths". But for the effort you get at least a +1 from me. Thanks to you and see you next time! – Maik Lowrey Sep 14 '22 at 13:22
1

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 Pattern
  • 1,430
  • 7
  • 18