ThemeShaper Forums » Thematic

Adjusting Width of Tabs in Nav Bar

(5 posts)
  • Started 5 years ago by knightinblue
  • Latest reply from Chris
  • This topic is not resolved

Tags:

  1. knightinblue
    Member

    Hey guys,

    I am trying to adjust the width of menu items within my nav bar, specifically increase the left and right margins of each item to space them out a bit.

    I have tried fiddling with the menu section of the style css -

    /* =Menu
    -------------------------------------------------------------- */

    #access {
    font-size:11px;
    background:#B5D1EA;
    border-top:1px solid #CADEF0;
    margin-top:-1px;
    }
    .skip-link {
    display:none;
    }
    #menu {
    padding:7px 0 8px 0;
    overflow:hidden; /* clears the inner float */
    }
    #menu ul {
    margin:0;
    list-style:none;
    clear:both;
    }
    #menu ul ul {
    display:none;
    }
    #menu li {
    display:inline;
    }
    #menu a {
    display:block;
    float:left;
    margin:0 10px 0 0;
    padding:1px 6px;
    background:#87B5DD;
    color:#fff;
    border-top:1px solid #6DA5D6;
    text-decoration:none;
    }
    #menu a:hover {
    background:#5C9BD1;
    color:#fff;
    border-color:#3B86C7;
    }
    #menu .current_page_item a {
    background:#5C9BD1;
    color:#fff;
    border-color:#3B86C7;
    }
    #menu a:focus {
    background:#4887BD;
    color:#fff;
    border-color:#2772B3;
    }

    Can anyone tell me where I would have to make the changes to get the menu items to be more spaced out that they currently are?

    Thank You,
    Knight

    Posted 5 years ago #
  2. The width is controlled by padding within #menu a {}. The second value is set to 6 px. Increase this value and you increase the width of your menu items.

    Cheers

    Posted 5 years ago #
  3. In case you want to increase the space between the menu items, increase the second value of margin .. again within #menu a {}.

    Cheers

    Posted 5 years ago #
  4. knightinblue
    Member

    Thank You!!! Worked like a charm again :)

    Now if I can just figure out how to color each menu item a diff color, I'd be golden!

    Posted 5 years ago #
  5. Have a look on the forum topic "Individual Items in Navigation"

    Posted 5 years ago #

RSS feed for this topic

Reply

You must log in to post.