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;
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
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.
