-
Website: http://boartusk.co.uk
Hello Daniel,
I’m having some trouble customizing the navigation bar and was wondering if you could help me. I’m trying to center (the links on the) navigation menu but it just doesn’t seem to want to move as desired. I’ve tried using margins, padding commands etc but the menu still stays aligned to the left side (of the access element).
I’ve managed to get the buttons to kinda sit in the middle of the page by using position:relative and the left command. However, it’s a very sloppy way for me to do it and it isn’t (exactly) aligned in the center of the page. Image of how it looks under Firefox > Inspect for reference: http://i.imgur.com/AapAY.jpg
Here is the code I am using in the Custom CSS section:
#access
{
box-shadow: none;
background: none;
position: relative;
left: 15%;
}I just tested a few numbers and found “left: 15%” was the closest I was going to get to it being in the centre of the page.
Kind regards,
AlexHi Alex,
Did you manage to make any progress on this? I’m having the same issue, and tried several things, but to no avail.Margin-left: auto;
Margin-right: auto;Does not seem to do anything. Any ideas are welcome!
Hello Alex, and Daniel,
I’m also trying to do something similar and center the nav line items.
But,what also has to be checked is how the NAV menu looks and acts in all 3 responsive sizes.
Any changes made with CSS will impact the NAV in the other screen sizes; notably the phone/smallest screen NAV.
Test out your modifications as you go along in all 3 screen sizes. I’ve testing mine on my Android phone, and I know there are online sites you can use to check out how your site will look on different screen sizes/devices.
When I tested mine (after centering the nav) it TOTALLY screwed up the phone NAV version, it throws the Phone version off – it’s unusable and I’d lose any visitors coming to the site via phone.
I don’t think the solution is as simple as centering the divs/elements — See the question I just posted in the forum a day ago:
Navigation: CSS Style & positioning for the 3 devices/sizes DT, Tablet, PhoneI’d also like to have help with this 🙂 !
Hi Guys, my is not David (to who this post was adressed to) but mybe I can help…
Try:
.menu-item a {
text-align:center;
}to center the links in the navigation menu.
Cheers,
Alexander @ http://www.mouseclick.comthanks, that certainly helps to at least center the text of the nav. But the question remains as how to center the whole navigation menu, in a way that it keeps centered on different platforms (computer, pad, mobile).
Alex his solution of moving the navigation bar to the left 15% works for a computer screen, but on smaller screens (i.e. pad or mobile) it is pushed to the side. Is there a way to center the whole div in header.php, and would this work across different platforms?
Well this one is a little more tricky as you need to know the width of the container holding your navigation bar. But for most of you guys this shouldn’t be a problem at all 🙂
Here is what you have to add to your CSS:
div.menu-menue-container {
margin-left:auto;
margin-right:auto;
width:667px;
}Don’t use #access in your CSS for this as it targets the whole box, not only the container.
As I said before, the width depends on YOUR nav container. 667px is just an example. And don’t forget to adjust this number as you add or delete navigation topics.
Cheers,
Alexander@ http://www.mouseclick.comoyess, that works nice! your tips are really helpful!
there’s a small typo though: ‘menue’.
I was getting stuck on using “#access {” but I see I needed to use: “div.menu-menue-container {“. thanx. ..in a similar fashion, i’m trying to center my header-image using “#site-title {” but I guess I need to use a different code for this one aswell?Alexander, thank you for your great tutorials!
I am also trying to center my menu but when I pasted this into my Custom CSS nothing changed. I adjusted the width to my header width but nothing. Is there something I am not seeing?
Thank you in advance for any help!
div.menu-menu-container {
margin-left:auto;
margin-right:auto;
width:1140px;
}Hi guatemeha,
As I said, this one is a little more tricky as you have to put in the right number for the width of your navigation container. The container only holds the menu topics.
I wrote a tutorial for that on my blog: Adjust the navigation bar
http://www.mouseclick.com/tutorials-2/adjust-the-navigation-bar/
The number you used for the width seems to me to be the complete width of the bar?
Cheers,
Alexander@ http://www.mouseclick.com
You must be logged in to reply to this topic.