Trouble Centering Nav Bar |
Trouble Centering Nav Bar |
classywalrus |
May 20 2014, 01:08 PM
Post
#1
|
Group: Members Posts: 3 Joined: 20-May 14 Member No.: 20,950 |
Hello!
I am having trouble centering the navigation bar at the top of the page of my clients site. Site link is: WorthRepeatingDecor.com The site may be up and down today. I'm changing a ton of graphics on the site. The code is listed below, I just can't figure out what I'm doing wrong. Any ideas? Thanks in advance for any help! /*-----------------------------------------------------------------------------------*/ /* Nav /*-----------------------------------------------------------------------------------*/ nav { background: url(../img/nav.png) no-repeat top center; height: 65px; width: 1038px; margin-left: -20px; font-family: 'Lato'; font-size: 16px; font-weight: 700; } nav #menu-icon { display: none; background: red; width: 40px; height: 40px; } nav #nav { display: block; margin-left: 35px; /* substract 15 from the link padding */ } nav #nav > li { display: inline; /* Subnavigation ----------------------------------------------------*/ } nav #nav > li:hover a, nav #nav > li.current-menu-item a, nav #nav > li.current_page_item a { background: #e4f1eb; text-shadow: 0px 2px 0px #444; } nav #nav > li > a { display: block; line-height: 65px; padding-left: 15px; padding-right: 15px; text-decoration: none; color: #dedad3; text-shadow: 0px 2px 0px #c68301; } nav #nav > li.important a { color: #ffe09f; } nav #nav > li ul { margin-top: 25px; background: #62493d; } nav #nav > li ul li { border-bottom: 1px solid #806d63; } nav #nav > li ul li:last-child { border-bottom: none; } nav #nav > li ul a { display: block; color: #dedad3; text-decoration: none; line-height: 1.5em; padding: 15px; } nav #nav > li ul a:hover { color: #f22a2a; } |
classywalrus |
May 20 2014, 02:11 PM
Post
#2
|
Group: Members Posts: 3 Joined: 20-May 14 Member No.: 20,950 |
EDIT: I mean the text in the Nav Bar not the actual Nav bar graphic, sorry about that.
|
Christian J |
May 20 2014, 03:48 PM
Post
#3
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
You mean the links in the LI elements? The LI elements are "display: inline", so you might try "text-align: center" on the parent UL. But then the links themselves appear to be styled as "display: block", and I can't find what makes them line up in a row despite that.
|
pandy |
May 20 2014, 04:30 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Already tried that. Didn't work.
Yeah, I came to that point too, but I din't have the strength to decipher it further. À demain... |
classywalrus |
May 20 2014, 10:47 PM
Post
#5
|
Group: Members Posts: 3 Joined: 20-May 14 Member No.: 20,950 |
Thanks for the suggestion, I guess I'll have to keep working at it. I think I'll try and contact the theme creator for some help.
|
pandy |
May 21 2014, 05:24 AM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
A starting point may be to create a "minimal test case". That is, put only the menu end relevant CSS on a page. That both helps you to understand what's going on since you don't have created it yourself and it makes it a lot easer for us to help you since we don't have the break all the CSS down.
' |
Lo-Fi Version | Time is now: 23rd April 2024 - 01:03 AM |