Edit Navigation bar in Twenty Eleven theme!

iamxquisite
(@iamxquisite)

12 years, 4 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!

Viewing 15 replies - 1 through 15 (of 45 total)

1 2 3 →

deepbevel
(@deepbevel)

12 years, 4 months ago
Try putting the line height back to default and try:
```
#access a {
height: 30px;
}
```
you can adjust the height as desired.
cavcopy
(@cavcopy)

12 years, 2 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?
deepbevel
(@deepbevel)

12 years, 2 months 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.
cavcopy
(@cavcopy)

12 years, 2 months ago

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

Rev. Voodoo
(@rvoodoo)

12 years, 2 months ago

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

cavcopy
(@cavcopy)

12 years, 2 months ago

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

Rev. Voodoo
(@rvoodoo)

12 years, 2 months 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

cavcopy
(@cavcopy)

12 years, 2 months ago

Thanks!

helplisa
(@dhrumindc)

12 years, 2 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
deepbevel
(@deepbevel)

12 years, 2 months 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:)
helplisa
(@dhrumindc)

12 years, 2 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
(@dhrumindc)

12 years, 2 months ago

Pastebin Link:

http://pastebin.com/EL7SWf2d

deepbevel
(@deepbevel)

12 years, 2 months ago

I’ll see what I can find out.

esmi
(@esmi)

12 years, 2 months 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”.
deepbevel
(@deepbevel)

12 years, 2 months 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.