Streaming live at 10am (PST)

Centering Menu Items in Nav B ar


#1

Hi,

Need to know how I can center the menu items in my nav bar? Seems like I can get them to go right and left, but not centered over my image? Any help is appreciated.

Mike

https://preview.webflow.com/preview/dr-kelly-r2?utm_source=dr-kelly-r2&preview=71211efccd8bfd3d452513def0806e87


#2

Hi Mike @mhyusi

I think using Display: Flex (Flexbox) will help.

  1. Change ‘Container 2’ element to ‘Flex’

  2. Align/Justify - Horizontal: Center / Center

  3. Remove margin (30) from ‘Nav Menu’ element

That will center the Nav Links for desktop, however, you will see in the Tablet / Mobile view the ‘Hamburger’ menu icon is not centered.

To correct that issue:

  1. Select ‘Container 2’ (In the 'Tablet View - the changes will cascade down to the mobile view)

  2. Change Flex align to ‘Right’

Hope that helps.
Keiran


#3

Awesome solution thank you for the assist. I always forget about the flexbox option.

Thank you again.

Mike


#4

No problem. Glad to have helped. :sunglasses: