Need help? Check out our Support site, then


How do I center align the navigation bar?

  1. Hi there,

    I think I've isolated the CSS element I need to change:

    .main-navigation.clear {
    background: #1d1d1d;
    clear: both;
    display: block;
    position: relative;
    width: 100%;
    z-index: 3;
    }

    How would I amend this to make the navigation bar center aligned? At present it seems to be left aligned.

    I'd be very grateful of your help!

    The blog I need help with is barrycooper.com.

  2. Hi @barrygcooper,

    I hope you are well today.

    Try using the following CSS code.

    .main-navigation.clear {
         background: #1d1d1d;
         clear: both;
         display: block;
         position: relative;
         width: 100%;
         z-index: 3;
         line-height: 11px;
    }
    #site-navigation .menu-blue-menu-below-logo-container {
         text-align: center;
    }
    #site-navigation ul {
         display: inline-block;
         width: auto;
    }

    Kind Regards,
    Vinod Dalvi

  3. Vinod, you're a legend. Thank you very much!

    I realise I probably ought to start a new topic, but while I have you - do you know if it's possible to make the menu "follow" the top of the screen as a viewer scrolls down (ie so that it's always at the top of the browser window)? Or would that be a special feature that the theme would have to support?

  4. Hi @barrygcooper,

    Thank you for your reply.

    I know you want to achieve the same navigation effect as implemented on this page.

    We could easily achieve this using the solution posted on this page but to implement this solution we need to use JavaScript code but it is not allowed to post JavaScript on WordPress.com blogs so we can't do this.

    We can easily achieve the solution displayed on this page by developing CSS code if you want to.

    Alternatively you can use the themes on WordPress.com blogs that supports this type of navigation.

    Cheers,
    Vinod Dalvi

  5. Yes, that's exactly it Vinod. Thank you!

    That's a really ingenious solution using CSS. On my site, I'm guessing (am I understanding right?) that the entire header + menu would remain static while the text scrolls "under" it. That might be a problem - the header is quite large, so it would cut down on screen space quite a bit.

    Am I right, or is there a way to make it so that you could scroll the header out of sight, leaving only the menu at the very top of the screen?

    Thanks so much for your excellent help.

  6. Hi @barrygcooper,

    That might be a problem - the header is quite large, so it would cut down on screen space quite a bit.

    Am I right, or is there a way to make it so that you could scroll the header out of sight, leaving only the menu at the very top of the screen?

    We can move the menu in the top of the header and make it fixed there and leave some blank space at the top of the site header so that the deader won't cut down and menu will remain static at the top on scrolling the page.

    Regards,
    Vinod Dalvi

  7. Sounds interesting Vinod! Is there some CSS I could copy and paste so I could try it on my site?

  8. Hi @barrygcooper,

    Try using the following CSS code to achieve it.

    #page {
           margin-top: 30px;
    }
    #site-navigation {
           position: fixed;
           top: 0;
           left: 0;
    }
    body.logged-in #site-navigation {
           top: 33px;
    }

    Best Regards,
    Vinod Dalvi

  9. Wow, that is ingenious! I like it - thank you Vinod. Amazing what can be achieved with CSS.

    How would I make the menu text slightly bigger, and in bold type? When I try to change it, it becomes left-aligned rather than centered - so I must be doing something off.

    Thanks again for such kind help.

  10. And also: is there a way to reduce the amount of whitespace that now exists between the header image and the top post?

  11. How would I make the menu text slightly bigger, and in bold type? When I try to change it, it becomes left-aligned rather than centered - so I must be doing something off.

    First, try the tools in Appearance > Customize > Fonts, just in case that works out. You currently have the body text set to -2 in that panel, and that affects the menu text size as well. If you'd rather keep the -2 setting and just make the menu font size bigger again, try adding this to your Appearance > Customize > CSS editor:

    #page .main-navigation a,
    #page .main-navigation a:visited {
    	font-size: 14px;
    }

    Adjust the 14px number as needed.

    Edit: I forgot the part about bold text! You can add a line for that right into the previous example. Here's how it would look after being adjusted:

    #page .main-navigation a,
    #page .main-navigation a:visited {
    	font-size: 14px;
    	font-weight: bold;
    }
  12. is there a way to reduce the amount of whitespace that now exists between the header image and the top post?

    Certainly. Here's how I figured this one out:

    https://cloudup.com/cPTRPtf--Tz

    I used the built-in web inspector and style editor in Firefox to test some CSS. You should copy that, adjust the 0px to a number you like, and paste the adjusted CSS into your Appearance > Customize > CSS editor.

  13. The video is really helpful - thanks so much.

    I'm still at the stage where messing around with CSS makes me feel about as tense as performing open heart surgery (I imagine). So thank you for stepping me through it!

  14. Just a PS on the menubar. On my computer, the menu font is displaying correctly - it's Brandon Grotesque, the same font used for the blog title.

    However, for some reason, it's not displaying correctly on other people's computers / iPads. It looks like it's being substituted for Times New Roman, or some other serif font.

    I've tried specifying fonts in the code, like this:

    #page .main-navigation a,
    #page .main-navigation a:visited {
    font-family: Brandon Grotesque;
    font-size: 13px;
    font-weight: bold;
    }

    ...but it doesn't seem to be working. Any thoughts?

  15. This won't work:

    font-family: Brandon Grotesque;

    When it comes to web fonts like the ones served through the Custom Design upgrade at WordPress.com, you need to use the font names as they are setup by the CSS code used to serve them. It's a little bit of an advanced task to figure out the names, so don't worry that you didn't guess it right. :)

    To make a long story short, the web font that you selected in the Appearance > Customize > Fonts panel is setup with the name "brandon-grotesque-1" not "Brandon Grotesque." If the font worked on your computer with the name "Brandon Grotesque," that might be either because you have that font installed locally or you were looking at a cached version of the web font.

    Try changing this:

    font-family: Brandon Grotesque;

    To this in your custom CSS:

    font-family: brandon-grotesque-1, “Helvetica Neue”, Arial, Helvetica, sans-serif;

    The comma-delimited list of fonts is called a font stack. A browser tries each font in the list and serves the first one it finds, so it's a good idea to select a set of fallback fonts that look similar to the desired font so it still looks good in case that first one doesn't load for whatever reason.

    This page has a good explanation about font stacks if you're interested: http://web.archive.org/web/20131010010610/http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

  16. I want you to know, I am trying :) But you're right, I never would have worked that out!

    Thanks designsimply, that's really helpful.

    Tomorrow's job is scaling the header width down a bit so it doesn't look completely weird on an iPad. My hopes aren't high...

  17. I want you to know, I am trying :) But you're right, I never would have worked that out!

    It was tricky!

    Tomorrow's job is scaling the header width down a bit so it doesn't look completely weird on an iPad. My hopes aren't high...

    Raise your hopes. :) Start a new help thread in the CSS forum if you get stuck.

Topic Closed

This topic has been closed to new replies.

About this Topic