Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Hi, Andrew. I just switched themes and am still adjusting the work that was done in my previous theme, to Hueman. It’s hidden from the public at present, but I can open it up temporarily once I know someone is available to look at it.
It’s now after 10:00 PM, Eastern Daylight Time, US, and I’m quitting for the day. I can make the site available tomorrow afternoon, after 2:00 PM.
Until then, I’ll go ahead and post the code I tried which did not work.
Apparently, I only have the last two failed attempts still saved in comments in my style sheet. Please don’t laugh. I tried:
#nav-header .nav-container {
margin-left: auto;
margin-right: auto;
}
#nav-header .nav-container {
background: #f1cfe0;
z-index: 99;
position: center;
}
In that second one, neither centering nor the background color change worked. (I copied that line of code from Hueman’s main stylesheet, then altered it.) Here’s the original:
.nav-container { background: #888; z-index: 99; position: relative; }
Your first attempt will work with a bit of modification. You need to explicitly set the width of an element for the margin: auto trick to work. Also, you don’t need the #nav-header in your CSS. Since you said you already have a child theme, try this instead:
.nav-container {
width: 95%;
margin: 0 auto;
}
To Lauren: You asked me about centering the nav. menu. I just used Stephen’s code above and inserted 60% instead of the 95% and it centered my menu under my logo. (This is a test site so it’s not available to the public.)
It now looks like this:
.nav-container {
width: 60%;
margin: 0 auto;
}
I’ve now been able to change the font color of the menu text and center it.
Thanks to everyone who has offered their instructions.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Won’t adding a width be a bottle-neck solution as nav items are added/ removed/ edited?
@steven and tzinser: Thank you both! 95% didn’t make any change and I might not have thought to tweak the %age number if you hadn’t added your part, Tom. My site required 85% because of the size of the header/logo image, but now it’s centered and looks good. I really appreciate your help!
@andrew: For this particular site, nav items might never change. There are only static pages, no blog, and at most, categories might be added to dropdown menus. If any should be added in the future, I’ll adjust the %age again. Thanks for pointing that out, though.
Apparently, I don’t know how to mark a topic as resolved. Does it need to accompany a post, in order to take effect? This is my fourth attempt, lol.
