Newsy theme: customize navigation bar

croninjj · Member · Apr 18, 2012 at 6:24 pm
Copy link

Add topic to favorites
Can someone help me with sample CSS for customizing the navbar in Newsy? I want to control:

— height dimension of the navbar
— choice and size of font
— addition of links to navbar beyond “home” and “about”

The answers may be obvious, but after a dozen attempts based on examples I have found, I have failed.

The blog I need help with is: (visible only to logged in users)
timethief · Member · Apr 18, 2012 at 6:34 pm
Copy link
Newsy is a premium theme and we Volunteers answering questions on this forum have no access to premium themes and no knowledge of how they are designed to operate. When you purchased your premium theme what came with that purchase was support directly from the theme designer in the Premium Theme Support Forum. There is a link for the specific Premium Theme support forum under Appearance -> Themes in your blog’s Dashboard, but the premium theme must be active and you must be signed in as the user who purchased it in order to see it.

I also checked the forum threads and could not locate an answer for you in them > https://en.forums.wordpress.com/tags/newsy But don’t despair, as there is Staff surpport for the custom design upgrade and they will help you.
designsimply · Member · Apr 19, 2012 at 9:06 pm
Copy link
Newsy is a premium theme and we Volunteers answering questions on this forum have no access to premium themes and no knowledge of how they are designed to operate.

Read-access to the premium themes forum is now open to all users.
http://premium-themes.forums.wordpress.com/
designsimply · Member · Apr 19, 2012 at 9:06 pm
Copy link
— height dimension of the navbar

I checked http://thebluetimes.com/ and the navbar looks pretty snug already. Here is an example for making it as small as possible. You can try adjusting the numbers to your liking:
```
#access {
	height: 31px;
	min-height: 31px;
	padding-top: 0px;
}
```
designsimply · Member · Apr 19, 2012 at 9:06 pm
Copy link
— choice and size of font

You can change the font family and size for the site title, headings, and body text from the Appearance → Custom Design → Fonts page. If you need to change something more specific, post back with a description of exactly which fonts you’re looking to change.
designsimply · Member · Apr 19, 2012 at 9:13 pm
Copy link
— addition of links to navbar beyond “home” and “about”

You can use the custom menu feature for that:

Menus
croninjj · Member · Apr 21, 2012 at 2:34 am
Copy link
@designsimply: Thank you for your kind help. I discovered the obvious fixes just before your post but no the height dimension fix. That is great to know. Thanks.

I have moved the navbar out of the menu, not liking the look. This prompts a follow-up question, if you dont mind: how do I center the text elements inside the navbar? I have tired CSS schemes I have found here but I have been unsuccessful.
croninjj · Member · Apr 21, 2012 at 11:23 am
Copy link
Oh my. I must have been tired. I apologize for the indecipherable post above.

I menat that I moved the search box out of the navbar and now would like to center the menu text in the navbar.
croninjj · Member · Apr 21, 2012 at 11:39 am
Copy link
One more I forgot. The fix for sizing the navbar works great but how do I prevent a gap from appearing between the navbar and the main content body? Thanks again in advance.
designsimply · Member · Apr 21, 2012 at 12:43 pm
Copy link
How do I center the text elements inside the navbar?

The text inside each menu item is already centered. To center the entire navbar menu list, give this a try:
```
#access div {
	display: block;
	text-align: center;
}

#access ul.menu, #access div.menu > ul {
	display: inline-block;
	width: auto;
}
```
croninjj · Member · Apr 21, 2012 at 12:55 pm
Copy link
Done. Brilliant. Thank you.

If you are up for one more: I have modified the height of the navbar, as I want it narrow and the fonts small. But how do I now eliminate the gap I created between the navbar and the main content body?
croninjj · Member · Apr 21, 2012 at 1:17 pm
Copy link
I figured it out. Thanks for reading the posts. I appreciate all your help.
designsimply · Member · Apr 21, 2012 at 1:18 pm
Copy link
Sure. You can remove the padding from #branding to get rid of the small bit of white space that is currently below the menu:
```
#branding {
	padding: 0;
}
```
To tighten up the spacing above the content itself, you can reduce the padding on #main like this:
```
#main {
	padding-top: 20px;
}
```
Adjust the numbers as necessary.
designsimply · Member · Apr 21, 2012 at 1:20 pm
Copy link
Aha, I wrote my reply before I saw your note that you figured it out. :)
croninjj · Member · Apr 21, 2012 at 1:29 pm
Copy link
Whoops. There is yet another “one more”: how do I increase the space between the search bar (now located in the sidebar) and the header? Thanks in advance.
designsimply · Member · Apr 21, 2012 at 1:31 pm
Copy link
how do I increase the space between the search bar (now located in the sidebar) and the header?

:)

One way would be to add some padding to the top of the sidebar. Give this a try:
```
#secondary {
	padding-top: 22px;
}
```
croninjj · Member · Apr 21, 2012 at 1:45 pm
Copy link
That’s the charm! Thank you again. You have been very helpful. And I am learning some CSS along the way, thanks to your patience. So I don’t later forget why I did some of these things — the code is adding up — how do I make short notes to myself that don’t affect the code?
croninjj · Member · Apr 21, 2012 at 10:00 pm
Copy link
The tinkering goes on. How do I nudge my menu items to the right so they are truly centered? Yes, I know: how does anyone live with this?
designsimply · Member · Apr 21, 2012 at 11:04 pm
Copy link
how do I make short notes to myself that don’t affect the code?

Comments are stripped out by our CSS parser right now, but it’s a planned future update to fix that.
designsimply · Member · Apr 21, 2012 at 11:14 pm
Copy link
How do I nudge my menu items to the right so they are truly centered?

It looks truly centered to me right now. Maybe it looks off-center to you because the text inside the header image is not perfectly centered and makes the menu feel off-centered to you in comparison?

You can shift the menu over anyway if you’d like. To do it, find the “#access ul.menu,#access div.menu > ul” block in your Appearance → Custom Design → CSS page, and add a negative right margin like this:

margin-right: -100px;

Adjust the number as necessary.

No items found.