Newsy theme: customize navigation bar

  • Author
    Posts
  • #871467

    croninjj
    Member

    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 thebluetimes.com.

    #871590

    timethief
    Member

    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.

    #871805

    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/

    #871806

    — 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;
    }
    #871807

    — 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.

    #871810

    — addition of links to navbar beyond “home” and “about”

    You can use the custom menu feature for that:
    http://en.support.wordpress.com/menus/

    #871824

    croninjj
    Member

    @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.

    #871826

    croninjj
    Member

    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.

    #871827

    croninjj
    Member

    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.

    #871828

    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;
    }
    #871829

    croninjj
    Member

    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?

    #871830

    croninjj
    Member

    I figured it out. Thanks for reading the posts. I appreciate all your help.

    #871831

    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.

    #871832

    Aha, I wrote my reply before I saw your note that you figured it out. :)

    #871833

    croninjj
    Member

    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.

    #871834

    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;
    }
    #871835

    croninjj
    Member

    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?

    #871838

    croninjj
    Member

    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?

    #871840

    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.

    #871841

    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.

The topic ‘Newsy theme: customize navigation bar’ is closed to new replies.