How do I reduce the width of the nav bar?

  • smoker450

    (@smoker450)


    11 years, 11 months ago

    gardenmonsters.net

    I have a twentyeleven child theme going. I’ve examined with firebug, and I almost had it one time but I have been stuck on this for a while.

    I want the green (red if viewing in IE) nav bar to cut off at the end of the menu options, I do not want it to extend to the edges of the blue border. What can I do to play with this?

    Also, I am going to search for this, but how can I make a rule for IE so my nav bar looks like it should?

    /* Menu Background */
    #access {
    background: #A72608 !important; /* Tertiary to Primary */
    background: -moz-linear-gradient( #39B44C, #113713) !important;
    background: -o-linear-gradient(#39B44C, #113713) !important;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#39B44C), to(#113713)) !important; /* older webkit syntax */
    background: -webkit-linear-gradient(#39B44C, #113713) !important;
    text-align:center;
    width: 100%;
    display:inline-block;
    }

Viewing 6 replies - 1 through 6 (of 6 total)
  • WPyogi

    (@wpyogi)

    11 years, 11 months ago

    If you post a link to your site, someone can give you better help on questions like this.

    Thread Starter smoker450

    (@smoker450)

    11 years, 11 months ago

    its the first thing in my post, I should put it at the end next time.

    gardenmonsters.net

    WPyogi

    (@wpyogi)

    11 years, 11 months ago

    Oh no, my bad — you did fine. I should read more closely!

    It’s kind of messy to do what you want — this will do it — add the following to he CSS on line 14:

    #access  {
     width: 700px;
     margin-left: 170px;
}

    BUT, be aware that if you add any more items to the menu, you will have to make it wider and then adjust the width.

    Also FYI, you have “display: inline-block” in a couple of places — that’s not valid CSS — it’s EITHER inline OR block — can’t be both! http://www.w3schools.com/css/css_display_visibility.asp

    BTW, VERY cool restaurant concept! Yours?

    Thread Starter smoker450

    (@smoker450)

    11 years, 11 months ago

    thanks, not my idea, good friend of mine. I talked him into letting me build his site for practice. I just started, I’m a noob and I have a day job, trying to learn as fast as I can. I’ve been to one of his tasting parties and they are GOOD. made the dressings himself.

    anyways, so now the menu options are wrapping to another line. I will keep playing with what you’ve given me, thanks! I tried editing the
    access div, but it didn’t do much for me, would that not do it?

    Thread Starter smoker450

    (@smoker450)

    11 years, 11 months ago

    i am still playing with that, it is gonna work, thanks so much!

    WPyogi

    (@wpyogi)

    11 years, 11 months ago

    Just make the width a bit bigger — it’s no doubt a browser difference.

    #access div means any divs INSIDE the #access div – so that’s not what you want for this.

    #access mean the element (in this case a div) with the id of “access.”

    Well, for a noob, it’s looking good! Nice going.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How do I reduce the width of the nav bar?’ is closed to new replies.