Support » Themes and Templates » Edit Navigation bar in Twenty Eleven theme!

  • I am trying to change the height of the navigation bar in twenty eleven theme.
    Im using a child theme with this css code:

    #access a {
    	color: #eee;
    	display: block;
    	line-height: 3.333em;
    	padding: 0 1.2125em -1em -1em;
    	text-transform: uppercase;
    	font-weight: bold;

    Im changing the line-height to something smaller and it does change the height of the navigation bar.

    Now my problem is if there is a drop down menu this leaves a big gap from the navigation bar to the drop down menu. How can i remove the gap that stays in between the nav bar and drop down menu..

    Any help would be appreciated thanks!

Viewing 15 replies - 1 through 15 (of 45 total)
  • Try putting the line height back to default and try:

    #access a {
    height: 30px;

    you can adjust the height as desired.

    #access a {
    height: 30px;

    Once that code is inserted, how do you re-center the menu items within the now-shorter navigation bar?

    not sure why changing the height would make it shorter. Nor do I understand why it would change the alignment of the items. But if that’s the case, you might try a margin.

    #access a {
    margin-left: 30px;

    You can use left or right and play with the number.

    Sorry, I should have specified: vertically centered. It’s like I need to put in a baseline shift.

    Using firebug, can you see any padding to adjust to get your vertical centring?

    I’m using a child theme, let me see if I can find it in my text editor.

    firebug is an addon for firefox which allows you to point at various elements on your page and see what css is being applied.

    It also tells you where the css comes form, so you can tell if padding is being appied to the elemets and if you can adjust it, or add it to try to center your text


    I am trying to Image in my Menu (rollover different image). Anyone please help me with it.

    Any link or help would be appreciated.
    Here is my css for menu.

    [CSS moderated as per the Forum Rules. Please just post a link to your site.]

    Any help would be appreciated. Please.

    I think it’s something like:

    .nav > ul {
    background: url("........

    But this is time consuming css work. Get Firebug. Read up on how to assign images with css.

    Also your code will most likely be removed, no more than 10 lines allowed. Use pastebin in the future:)

    From firebug i have tried : {
    } a{
    } a:hover{


    I did this before ul li#menu-item-49 a {background-image:url('wp-content/themes/twentyeleven/images/btn/bttn_home.gif');} ul li#menu-item-49 a:hover {background-image:url('wp-content/themes/twentyeleven/images/btn/bttn_home.gif');}

    Please help me with it.

    I’ll see what I can find out.



    Forum Moderator

    I’m sorry but it is beyond the scope of these forums to teach CSS. Try asking on a general CSS forum or googling on “css selectors”.

    This worked for me, but I don’t know how to specify each menu item seperately:

    #access ul li  { background-image: url(;}


    #access ul ul a, #access li:hover > a, #access ul ul :hover > a
       {background-image: url(;}

    do you have to id each item yourself? this is the first time I’ve even tried this. Let me know how it goes, I’ll keep helping as I can.

Viewing 15 replies - 1 through 15 (of 45 total)
  • The topic ‘Edit Navigation bar in Twenty Eleven theme!’ is closed to new replies.