If you want to center it, try adding this CSS:
nav ul {
display: table;
float: none;
margin: 0 auto;
}
You should add CSS via a custom CSS option if your theme has it – or add custom CSS via a plugin – that way your changes won’t be overwritten when the theme is updated.
I don’t know if that will fix it on all browsers – you can test it and see. What browsers and versions are you having trouble with?
}
.nav ul {
List-style: none;
Margin: 0;
Padding: 0;
Float: right;
text-align: center;
}
.nav ul li {
Float: left;
Margin: 0.25em;
Padding: 0.25em;
}
.nav ul li.current_page_item { Border-bottom: 2px solid black; }
.nav ul li a {
Text-decoration: none;
Color: #0000ff;
Display: block;
}
there is my nav is CSS. When I did what you suggested it only changed the on mobile devices. How can I spread out the categories in the nav bar so they run the length of my header evenly?
Where did you add the CSS I posted? I don’t see it on your site. Worked okay for me in Firebug on a laptop. Did you clear your browser cache?
I don’t think there is a way to automatically space those out, though you can do it by adding a width to this CSS – you’d have to adjust that if you add more menu items:
.nav ul li {
width: 110px;
}
ugh..
When I adjust the width of the nav bar it causes changes to the text. The words will stake on on top of eachother. ex:Police
State
My headers 956px
Also would mind chnmging it to the length of the bar that separates the headline from the body of the article.
Ah, if you want it the same width as your header, see if this works:
.nav ul {
float: none;
display: table;
margin: 0 auto;
width: 1000px;
}
.nav ul li {
width: 95px;
}
When I plugged that in the nav bar started at the beginning of the header but ended up at the very end of the page. Before each category was a bullet circle as well.
is there anyway to space it the same length as the bar underlining the Headlines above the body of the posts?
Where are you adding this code?
I am adding it into style.css
Are you aware that any changes you make to that file will be lost when the theme is updated? That’s why I suggested you use a custom CSS plugin.
That said, it looks like you can move the menu over by adding a right margin here:
.nav ul {
List-style: none;
Margin: 0;
Padding: 0;
Float: right;
text-align: center;
margin-right: 150px;
}
I am aware.
That actually centered the nav bar.
All I want is the first category to line up with h2 evenly.
The last category lines up with the end of the the second header bar perfectly.
