â–Ľ
Streaming live at 10am (PST)

How to create a centered navigation

Design help General
#1

Hey guys,

Is there a guide on how to create a centered navigation similar to the one used in this template:
http://mill-template.webflow.com/

I have tried before and although I can make it centred the mobile version messes up. I will edit this post with a workflow link in a bit. Currently trying to make it again.

2 Likes
Help with Centered Nav
How to center the navbar?
#2

You can create it using the navbar widget and re-arranging the elements
http://g4asouschef.webflow.com/centernav

  1. drag the navbar widget in to your blank page

  2. Open the navigator and expand the Navbar widget. Inside you will find the following elements:
    Container
    – Brand
    Nav Menu
    – Nav Link
    – Nav Link
    – Nav Link
    Menu Button
    – Icon

  3. Move Brand into Navbar. Pu ti in between the 2nd and 3rd Nav Links

  4. Duplicate Nav Link 3 under itself by holding “alt”(mac) and dragging just below it. Now you should have 4 links.

  5. Select the Brand element and give it a class. I used logo.

  6. Change display to inline block, change the height and width to what ever you need. Change float to “none”

  7. Select Nav Menu and give it a class

  8. Give it a width of 100%

  9. Float “none”

  10. Text align “center”

You´re welcome :slight_smile:

9 Likes
#3

Thank you so much mate! Very detailed steps!

#4

@makloon, Thanks for this too!

It worked great on Desktop view, however when I preview it on Mobile/Ipad, the brand logo comes into the drop down list of the Hamburger Menu.
i.e. there is no logo on the iPad/Mobile version, with the logo featuring in the drop down menu between Nav Link 2 and Nav Link 3.

Would you have any idea on how to fix that? @Hamzster did you have the same issue?

Thanks.
Ish

PS First day playing with WebFlow so apologies if this was a simple/stupid question.

#5

There is a display on device button in the setting panel. You can set it to view on just desktop and put another image into the mobile/tablet view and set to display on mobile and tablet only. That should do it!

Centering logo in middle of nav bar doesn't quite work
#6

@Hamzster Got it! Thanks a lot!

#7

Hi @Hamzster, I’m a little late here, but I made a small demo showing how to achieve what you described. Let me know if this helps :smile:

Demo: https://webflow.com/design/demokit?preview=72388b288a26874be319ca1f7412d4eb
Page Title: Centered Navigation

2 Likes
#8

I didn’t need it anymore but thanks mate I appreciate the work. I’m sure someone else will benefit from it!

1 Like
#9

I wanted a navbar that was centered without the brand link in it (because my client wants it this way). And I found I could delete the brand link and just follow the instructions 4,7,8,9 and 10 and I got what I needed. Thanks to @makloon.

#10

Thank you! You actually helped me tremendously, I tried almost everything for centering menu… phew! :smile:

#11

Thank you very much! works perfect!

#12

@thewonglv how did you get the nav links inside a div block. everytime I try to to drag cnav-linksWrapper into cnav-menu I get an error message from webflow saying navlinks can only be inside a nave menu

#13

Thank you for this. It helped me A TON :smiley:

#14

Is this demo still available anywhere? I’m getting a “Sorry, you do not have permission to access this page” message.

https://webflow.com/design/demokit?preview=72388b288a26874be319ca1f7412d4eb

#15