iamxquisite
Member
Posted 5 months 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!
Try putting the line height back to default and try:
#access a {
height: 30px;
}
you can adjust the height as desired.
cavcopy
Member
Posted 3 months ago #
#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.
cavcopy
Member
Posted 3 months ago #
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?
cavcopy
Member
Posted 3 months ago #
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
cavcopy
Member
Posted 3 months ago #
helplisa
Member
Posted 3 months 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
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:)
helplisa
Member
Posted 3 months 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.
helplisa
Member
Posted 3 months ago #
I'll see what I can find out.
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(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.
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:)
helplisa
Member
Posted 3 months 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.
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.
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.
helplisa
Member
Posted 3 months 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.
Great to hear, and glad to help. Look forward to trying your solution myself.
helplisa
Member
Posted 3 months ago #
Deepbevel, Found simple plugin
http://wordpress.org/extend/plugins/accordion-image-menu/
;)
This totally works for me ...
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.
helplisa
Member
Posted 3 months ago #
hahaha.. isnt it.. :D
Thanks deepbevel anyways...
gets my vote for magic plugin of the week. But it's only Monday.
plantfire
Member
Posted 3 weeks 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!!!!
plantfire
Member
Posted 3 weeks 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!!!!
It's just an image, I can't tell what's wrong or what you're trying to do. More info?
plantfire
Member
Posted 3 weeks 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!!!! :)))
