Center Logo in Header

Hi Guys,

I try to center my logo horizontally with my nav but it’s stuck at the top and not centered from the center.
I think my screenshot explains a lot more. The blue line is the line I want to center my items to. I have the same problem in my footer, kind of looks the same.
I can’t really explain it well because I’m not native.

Thanks for your help.


Hi. You have two ways:

  1. use margin-top to Nav Link elements;
  2. use magic flexbox)


Good luck :v:️:blush:

  1. add a div inside of the Container, along with Brand and Navbar
  2. move Brand and Navbar inside of this div
  3. give the div width 100%
  4. setup the div with Flexbox like this:


Flexbox will bug if used directly on the Container. It won’t be able to push both elemnts to the edges of the container. You need to first ad a div inside of the container and put everything in it, and put flexbox on the div.

Here is what happens if you use Flex on the container directly:

1 Like

All is OK) Look my video. But your decision was more correct

Thanks a lot, it worked!
Also for the footer.
One thing to add if someone else has this problem:
You also need to adjust the mobil version menu to the right again, but these are only 2 clicks and the same like in the video.

@bro-design One problem appears to me:
As I said I had to adjust the mobil menu icon. It works, but I used a 90° rotation on it when clicking on it. Now it rotates out of the window because the item got bigger with your method. Can you have a short look into my project to put the icon to the right with an other method than align the text to the right?
Would be awesome.

Sorry, you need use vincent’s method. One moment… Cancel all you do with flexbox

Right solution: __

1 Like