2014 Theme: Move navigation bar links to the left side, and increase the font.

roseeditorial · Member · Oct 23, 2014 at 11:17 pm
Copy link

Add topic to favorites
Can somebody provide the CSS code for the following:

In the WordPress 2014 theme, I’d like to move the navigation bar links (home, about, contact, etc.) to the left side of the navigation bar, and I’d like to increase the font of those links without changing the font size elsewhere. Thanks in advance!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Oct 23, 2014 at 11:54 pm
Copy link
Add this to your custom CSS and then adjust the font size as desired.
```
.primary-navigation {
    float: left;
    font-size: 11px;
}
```
roseeditorial · Member · Oct 25, 2014 at 3:05 pm
Copy link
That’s perfect! Thanks so much!
roseeditorial · Member · Oct 25, 2014 at 3:23 pm
Copy link
I have one more question regarding the text in the navigation bar:

Is there CSS code that I can add that will change the text from all uppercase (e.g., “ABOUT ME”) to upper case followed by lower case (e.g., “About Me”) or better yet, to small caps (e.g., a larger-font upper-case letter followed by smaller-font upper case letters)?

I tried using the “font-variant” and “text-transform” properties inside the “primary-navigation” class to no avail, so it may just be something that can’t be changed in the theme.
roseeditorial · Member · Oct 25, 2014 at 3:25 pm
Copy link
Oh, I forgot to mention that I want to make this change on the text in the navigation bar as well, and I don’t mind if it also affects my page titles.
thesacredpath · Member · Oct 25, 2014 at 4:48 pm
Copy link
Hi there, on the text-transform, you have to apply that to .primary-navitation a (the actual link text in the menu like this.
```
.site-navigation a {
    text-transform: none;
    font-size: 110%;
}
```
I included a font size declaration as well since the text gets pretty small looking when you go back to non-uppercase.

If you want to also change the pages/post titles to normal, you can add the following also.
```
.entry-title {
    text-transform: none;
}
```
If you want to change the widget titles, then this would be needed.
```
.content-sidebar .widget .widget-title, .widget .widget-title {
    text-transform: none;
}
.widget .widget-title {
    font-size: 110%;
}
```
The font declaration in the second rule above adjusts the font size on “Professional Affiliations” at top left.
roseeditorial · Member · Oct 25, 2014 at 5:21 pm
Copy link
Excellent, thank you so much! That’s exactly what I wanted.
roseeditorial · Member · Oct 25, 2014 at 5:41 pm
Copy link
Hello–of course, more questions come up as others are solved. I have a question about adding color to the various parts of my site that the built-in color picker cannot solve, and a question about spacing.

1. I’d like to assign a unique color to the navigation bar (I have the colors and their hex values picked out already), and I’d like to assign another unique color to the site’s background. With the color picker, one color choice affects both the navigation bar and the site background–as you can see on my site, the navigation bar is a slightly darker gray color than the background.

2. If possible, I would also like to “push down” the widgets on the left side of the page, and align the “Professional Affiliations” text with the top of my page images (at the same y-axis point as the “Recent Posts” widget that is on the right side).

Thanks so much for all of your help.
thesacredpath · Member · Oct 25, 2014 at 6:18 pm
Copy link
1. I’d like to assign a unique color to the navigation bar…

To change the background color on the navigation bar, add the following to the .site-header rule you now have in your custom CSS and edit the hex code as desired.
background-color: #cc0000;

2. If possible, I would also like to “push down” the widgets on the left side of the page, and align the “Professional Affiliations” text with the top of my page images

To align “Professional Affiliations” with the top of the image, add the following CSS. You can adjust my 65px value to get the alignment the way you want it.
```
.primary-sidebar {
    margin-top: 65px;
}
```
roseeditorial · Member · Oct 26, 2014 at 3:58 pm
Copy link
Excellent–thanks for all of your help!
thesacredpath · Member · Oct 26, 2014 at 4:49 pm
Copy link
You are welcome.

No items found.