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
.
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
For perfect align center-center
Use margin-left: auto; margin-right: auto;