Centering Menu Items in Nav B ar

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

    Container%202%20-%20Display%20Flex
    Container 2 - Display Flex.png239×689 18.3 KB

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

    Nav%20Menu%20-%20remove%20margin
    Nav Menu - remove margin.png230×749 12 KB

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’

    Tablet%20-%20Container2%20-%20Right%20Align
    Tablet - Container2 - Right Align.png237×807 23.8 KB

Hope that helps.
Keiran

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

1 Like