Navigation Length – Reload

Home › Forums › Automattic › Flora and Fauna › Navigation Length – Reload

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • November 13, 2014 at 11:19 pm #162527 Resolve

    FitnesstoFree
    Member

    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 fitnesstofree.wordpress.com
    November 14, 2014 at 11:48 am #162528

    Rachel

    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.
  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.