Streaming live at 10am (PST)

Center Logo in Header


#1

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.


Read-Only: https://preview.webflow.com/preview/versuch-1?preview=51c110dbabed5dde27bb60093a51ade3


#2

Hi. You have two ways:

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

__https://drive.google.com/open?id=1Z3E5MKrLuZFY2jO29mAnLUFUGPt_GnT9

Good luck :v:️:blush:


#3
  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:


#4

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:


#5

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


#6

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.


#7

@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.


#8

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

Right solution: __https://drive.google.com/open?id=1KG2H1nv-NrLlOnJAuHvqxoAKy-2RYMA5