Design + Coding > Centering the horizontal nav bar.
Hi James,
I think this is the CSS that centers the horizontal nav:
#canvas, #canvasWrapper, .horizontalNavigationBar { width: $(CanvasWidth-ContentPaddingExternal-ContentPaddingExternal)$; }
This goes in the Custom CSS insertion point.
ramidonya
I just tried the above code posted by ramidonya, and did not succeed in centering the top horizontal nav on Messier, Usonian, or Newsroom templates.
I too, would really like to be able to center the top Nav automatically. Anybody got any custom CSS that will work for this?
many thanks
Catherine
catherine
I too tried the code, even with a few adjustments but couldn't get it to work unfortunately.
I find it strange that something so simple isn't automatically an option in the Squarespace UI.
James Cook
Once you've found the specific module ID (#navigationBottom or #navigationTop) you need to specify a width and a magin in your custom CSS. For EXAMPLE:
#navigationBottom { width:600px; margin:auto; }
This will center the navigation but make sure you're using the correct ID for specificity. Use Firebug to play around with it until you've got what you want and then copy the code from Firebug and paste into your custom CSS.
Hope this helps.
Joshua R
Living Collect
Thank you. This works perfectly.
James Cook
Hmm..I thought it did.
The nav bar looks centred when I'm logged in. But when I log out and become part of the public audience it shifts to the left.
I have certain links hidden from public view so there are links disappearing, but shouldn't the nav bar still sit in the middle?
Also to try and target the links directly I was trying to include .content-navigation in my custom CSS code, but for some reason it didn't seem affected by anything I was trying.
Confused...
Cheers,
James
James Cook
It can be done but there's some manipulating involved. I would be open to some suggestions from the community if someone has an easier way. Basically it's going to involve a few CSS properties to make it work in addition to Member Permissions as well as whether the page is enabled/disabled.
If you could provide a link to the page I would be glad to see what I can do from the outside.
Joshua R
I'm really interested in getting this to work, tried the above suggestion, and it did not center my horizontal Nav bar.
I am using Messier template.
Could somebody kindly post a "step by step" to the forum, maybe with a particular template to try it on?
that would be really useful.
many thanks
Catherine
catherine
Living Collelct,
The website is http://www.particularboy.com/
Thanks,
James
James Cook
I won't be able to do much until I get home. Perhaps another SS user can assist in the mean time. I'll see what I can do to help out though.
Joshua R
Hi James,
I only had a short time to play around with this, but was able to come up with this quick workaround for you. I'm sure there is a better way, just ran out of time to keep going at it.
First, I eye ball measured the width of your NavBar, and wrote CSS for it see here:#navigationBottom .horizontalNavigationBar { width:275px;}
Second, since I created a somewhat correct Width of your NavBar, I was able to center it, see here:#navigationBottom-sectionContent2288898 {margin-left:auto; margin-right:auto;}
You can use this till you figure it out, or someone here comes up with a better solution. Also, as a note, if you add menu items, you will need to adjust the Width in the First CSS line above.
For a Screenshot of it working, see here:
EDIT: As an Additionally note, this will look a bit funny in the Editor due to you having Disabled Pages in your Nav. Or if these are set to be visible on member login, that is a different story.
Hope this helps!
Regards,
Michael
Michael Zampino
That's a go0d point Michael - for every item you add you have to change the width to accomodate.
Joshua R
Hi
Thanks for the replies. This works fine assuming that I'm not setting permissions to certain links.
The problem is that I am, and certain links are available to certain users.
Therefore, the nav bar changes widths depending on who's logged in. I may have to stop being awkward and just have the links either left or right!! :)
James Cook
My attempt at Horizontal Nav centering is here:
http://www.global-creativity.com/
as you can see, it is hugging the Left side!
I tried the code insertion suggested above (with a larger Nav width in pixels) but it is still sticking to the Left. I see altering the pixel width does indeed have an effect on the Nav bar, but the "margin-left:auto; margin-right:auto;" bit does not respond. Should I turn off some other settings in the CSS? I am wondering if the "float" setting has something to do with it... I have Float set on "inherit".
cheers and thanks for any input!
Catherine
catherine
Hi
I've searched the forums and although there are a couple of topics on this problem, nobody seems to have answered it.
At the moment, it is easy to float the horizontal nav bar left or right. But I want mine to be centred perfectly on the page, under my header.
I don't want to have to play around with padding as I'm sure there must be a very simple way of telling the website to center the links at the top.
Any ideas?
Cheers,
James