Streaming live at 10am (PST)

How to vertical align navbar --> navlinks with minimal styles


#1

I saw a lot of sites with too many styles -or- not exactly vertically center nav links/ hamburger menu).

One way to solve this (less than a minute):

Desktop

1/3. display flex

Create a wrapper for brand/nav menu/menu button(hamburger). Set this wrapper to display flex and v-align.

image

2/3. margin auto

Webflow original nav-menu set to float: right; (Wont work so well with flexbox).
How to solve this?
Select nav-menu and set margin-left: auto (for RTL sites use margin-right: auto; ).

video:

3/3. tablet/mobile:

Select the hamburger menu - and again use margin-left: auto;

Done :slight_smile:

For perfect align center-center

Use margin-left: auto; margin-right: auto;