WordPress.org

Ready to get started?Download WordPress

Forums

Edit Navigation bar in Twenty Eleven theme! (46 posts)

  1. iamxquisite
    Member
    Posted 2 years ago #

    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;
    	font-size:14px;
    }

    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!

  2. deepbevel
    Member
    Posted 2 years ago #

    Try putting the line height back to default and try:

    #access a {
    height: 30px;
    }

    you can adjust the height as desired.

  3. cavcopy
    Member
    Posted 2 years ago #

    #access a {
    height: 30px;
    }

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

  4. deepbevel
    Member
    Posted 2 years ago #

    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.

  5. cavcopy
    Member
    Posted 2 years ago #

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

  6. Rev. Voodoo
    Volunteer Moderator
    Posted 2 years ago #

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

  7. cavcopy
    Member
    Posted 2 years ago #

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

  8. Rev. Voodoo
    Volunteer Moderator
    Posted 2 years ago #

    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

  9. cavcopy
    Member
    Posted 2 years ago #

    Thanks!

  10. helplisa
    Member
    Posted 2 years ago #

    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.
    Thanks

  11. deepbevel
    Member
    Posted 2 years ago #

    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:)

  12. helplisa
    Member
    Posted 2 years ago #

    From firebug i have tried :

    li#menu-item-49.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-49 {
    	background-image:url('wp-content/themes/twentyeleven/images/btn/bttn_home.gif');
    	color:#FFFF00;
    }
    
    li#menu-item-49.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-49 a{
    	background-image:url('wp-content/themes/twentyeleven/images/btn/bttn_home.gif');
    }
    
    li#menu-item-49.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-49 a:hover{
    	background-image:url('wp-content/themes/twentyeleven/images/btn/bttn_home.gif');
    }

    also

    I did this before

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

    Please help me with it.

  13. helplisa
    Member
    Posted 2 years ago #

  14. deepbevel
    Member
    Posted 2 years ago #

    I'll see what I can find out.

  15. esmi
    Forum Moderator
    Posted 2 years ago #

    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".

  16. deepbevel
    Member
    Posted 2 years ago #

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

    #access ul li  { background-image: url(http://wpweaver.info/downloads/fade.png);}

    Hover:

    #access ul ul a, #access li:hover > a, #access ul ul :hover > a
       {background-image: url(http://wpweaver.info/downloads/fadeup.png);}

    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.

  17. deepbevel
    Member
    Posted 2 years ago #

    just want to reiterate what esmi said, it's true this is not a spececific wp issue. There are too many aspects of web dev to include them all in a forum that tries to focus on wp. I'll help with this issue but in the future we must respect the goal and rules of this forum:)

  18. helplisa
    Member
    Posted 2 years ago #

    None of them worked for me

    I have tired using

    #access ul li  { background-image: url(http://wpweaver.info/downloads/fade.png);}

    or

    #access ul li menu-item-49 { background-image: url(http://wpweaver.info/downloads/fade.png);}

    Nothing works. :(
    Here i took screenshot and this is something how my code looks like. I dont know if that make any changes or not but i am using Twentyeleven child theme - Called three menus.

    screenshot of my code:
    http://postimage.org/image/wwl1y78zl/

    Its hosted on localhost.

    Thank you deepbevel. for you help. And esmi I will make sure from next time for sure.

  19. deepbevel
    Member
    Posted 2 years ago #

    arrrg.. that's lame. I don't know what else to do, I always seem to have trouble with twentyeleven. It works in twentyten.

    are you trying to edit existing code or are you putting new code at the end of style.css? If you tried to insert it into existing css, remove it and try putting the new code at the end of the css file.

  20. deepbevel
    Member
    Posted 2 years ago #

    In case you get it working, this is for the current menu item:

    a:active
    #access ul ul a, #access li:active > a, #access ul ul :active> a
    {background-image: url(http://wpweaver.info/downloads/active.png);}

    tested in twentyten, also working in Custom Community.

  21. helplisa
    Member
    Posted 2 years ago #

    Nice... With that Last code got it working on A:Hover.

    Need to figure about about diffrent IDs images... Will keep u posted as done...
    Thanks deepbevel.

  22. deepbevel
    Member
    Posted 2 years ago #

    Great to hear, and glad to help. Look forward to trying your solution myself.

  23. helplisa
    Member
    Posted 2 years ago #

    Deepbevel, Found simple plugin

    http://wordpress.org/extend/plugins/accordion-image-menu/

    ;)
    This totally works for me ...

  24. deepbevel
    Member
    Posted 2 years ago #

    wow, almost like it was made just for you! Nice! As you know I did get it with code but I'll have to check out this plugin for sure.

  25. helplisa
    Member
    Posted 2 years ago #

    hahaha.. isnt it.. :D

    Thanks deepbevel anyways...

  26. deepbevel
    Member
    Posted 2 years ago #

    gets my vote for magic plugin of the week. But it's only Monday.

  27. plantfire
    Member
    Posted 2 years ago #

    I really need help with the navigation tool bar... if someone could assist, that'd be great!!

    http://i1067.photobucket.com/albums/u439/VanessaChamberlin/VCcom.png
    ^^^^^^^^^^^^^^
    If you put the link above in your browser, you will see what i am talking about...

    That picture is the toolbar for the site...
    how in the world can I or do I edit that?!?!?!

    PLEASE HELP!!!!

  28. plantfire
    Member
    Posted 2 years ago #

    I really need help with the navigation tool bar... if someone could assist, that'd be great!!

    http://i1067.photobucket.com/albums/u439/VanessaChamberlin/VCcom.png
    ^^^^^^^^^^^^^^
    If you put the link above in your browser, you will see what i am talking about...

    That picture is the toolbar for the site...
    how in the world can I or do I edit that?!?!?!

    PLEASE HELP!!!!

  29. deepbevel
    Member
    Posted 2 years ago #

    It's just an image, I can't tell what's wrong or what you're trying to do. More info?

  30. plantfire
    Member
    Posted 2 years ago #

    the website is http://www.vanessachamberlin.com

    the tool bar where you navigate to different pages on the site, how do i change the appearance of that, and i don't even know the difference between twenty ten & eleven or what ever that is that i keep reading!

    THANKS!!!! :)))

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.