Center Logo in Header

Design help General
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.

28
282460×320 93.1 KB

Thanks for your help.

Read-Only: Webflow - Versuch 1

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:

2 Likes
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:

http://vincent.polenordstudio.fr/snap/ou66k.jpg

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

l1fn4
l1fn41473×164 90.8 KB

1 Like
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

1 Like