Streaming live at 10am (PST)

Create a Central Navbar Button


#1

Hi!

I would like to create a simple navbar button that is centered on my page. The button is my brand's image, and when I click on it the navigation links appear immediately below, centered, beneath the button. I am able to create it slightly, but I can't figure out how to do it without a lot of messy positioning. Here is an example on the test page.


The problem with this example is that it is not responsive and the positioning of the navlinks below are not predictable. I cannot be sure that this would look the same on every browser or screen. I tried centering every single box, but it doesn't seem to actually affect the positioning of the links.

Do you all know of a way to cleanly have the navigation links centered below the navigation button (which is centered at the top of the page?)

I've shared my public link below, and the navigation button is on the "our venue" page;

thank you!


Here is my public share link: public link
(how to access public share link)


#2

Hello Zach

To center a div, you can use the "center element" button next to Margin right, but this requires a width and relative positioning

Let me show you how to do it :smiley:
We need to make these changes inside of your class Navbar div

Step one
Remove float and position

To get a nice width, we need to calculate how much width the elements inside of the div uses. Let us say that the links take up 100px width and you have 5 of them, which in math is 5 * 100. ( margin left and right also uses width space )
Step two
Go into your class nav link and make the width of the link 100px and remove margin right and margin left

Step three
Give your class Navbar div a width of 500px and click the "center element" button.

That should do it :smiley:
David


#3

This worked perfectly! Thank you so much!


#4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.