Navigation Length – Reload

Home Forums Automattic Flora and Fauna Navigation Length – Reload

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #162527 Resolve


    Hi, sorry to open this again, Ive clicked notify when answered:

    Im looking at making the long navigation bar that the menu sits on shorter. I don’t want it to stretch all the way to the edge of the page.

    The blog I need help with is


    Hi there,

    No need to apologize! :) You can shorten the width of that navigation bar using custom CSS (part of your Custom Design upgrade), so that’s no problem at all.

    Right now, your Flora and Fauna theme is using this CSS to style that navigation bar:

    .navigation-main {
    background: #eac359;
    clear: both;
    display: block;
    font-family: Sanchez, Courier, monospace;
    font-size: 14px;
    font-size: 1.4rem;
    padding: .75em 0;
    position: relative;
    width: 100%;

    The last line there, width: 100%;, is what makes the navigation bar stretch across the full width of the page. To shorten it, you can put in a different percentage or a specific number of pixels. You’ll also need to add a margin so the shorter navigation bar is centered on the page.

    To add custom CSS, go to your My Sites page and click the Customize link under the blog’s title. In the Customizer, open the CSS section and in the CSS editor there, you can add your custom CSS. I’d recommend trying out something like this:

    .navigation-main {
    width: 1040px;
    margin: 0 auto;

    Please let me know if you have any questions about that. :)

    • This reply was modified 8 years, 6 months ago by Rachel.
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.