Edit Navigation bar in Twenty Eleven theme!

your navbar graphic is an image “nav-bg.png”:

#navigation, #navigation-container {
    background: url("https://www.vanessachamberlin.com/wp-content/uploads/2011/11/nav-bg.png") repeat scroll 0 0 transparent !important;
}

So if you change the image path you can change the image.

if you remove the image, you’ll get the actual css graphic:

body.header-fluid div#navigation, body.header-fixed div#navigation {
    background-color: #000000;
    border-bottom-color: #EEEEEE;
    border-bottom-width: 0;
    border-top-color: #000000;
    border-top-width: 0;
}

which you can edit to your liking.

so confused. will get back to you, ok! i need help! lol.

Yes, there will be a slight learning curve with this but you’ll be suprised how easy most things can be changed. Good luck.. I’ll be expecting more questions of course.

Can I steal some of your recipies? I’ve been doing a vegan diet for over 2 years, feelin good!

If you use Firefox and want to try Firebug this will help:
tutorial

feel free to indulge in as many recipes as you can & sign up for the website too if you want, we don’t send out too much but you’ll get all of our newest video recipes, etc ;))

every recipe on the site is vegan, plant-based, NO OIL! ;))

thanks, easy enchiladas are lookin good ??

#access a {
height: 30px;
}

Deepbevel, that code sure helped a lot, thank you!

But i am joining Cavcopy in asking “how can it be re-centered” now? Meaning, when i use the lovely code you provided it does make the giant menu height decrease… but only from the bottom. Which makes the text of the menu tabs appear as if it had sunk. More than that, if i change the height to say 20px, the tabs text letters appear only half on the menu bar (horizontally) and half of it is under the menu bar! (so if i made the height 10px, i bet the whole menu text would appear completely under the menu bar).

i tried do add margin-bottom: 10px;

but it made the Menu bar look as high as it was before the whole style changing hehe

then i tried margin-top: 6px; <– this only added to the width of the menu bar top height instead of shrinking it and lifting the text of the tabs to appear on the center.

so i ended up with just

#access a {
height: 34px;
}

which makes my site so much more elegant, because it does shrink the menu height, and does not make the tabs text look that misplaced toward the bottom.

But if there is a way to shrink a bit more of the menu bar height top part, then i would really appreciate your input on how can that be done. Thank you!

there’s no way for me to know what the element id is for “top part” unless I can see it in a browser with Firebug. Just guessing, it could be your font is simply larger than the height of the bar..?
Are you using Firebbug or something like it? if not you should, but in the mean time post a link and I’ll see what I can find.

nope, the letters are rather small for the menu bar, me thinks

https://createawebsitehelp.com is the new website (my first try with WordPress!)

the height of the menu is 34px right now, as if i make it 30px the letters just look too below the center.

(may i also please ask you if there is any way to insert logo instead of the Title on top of the banner in other than uploading to FTP way? But it is off topic on this thread, so i guess i will not get the answer here eh). I am new here, should i start a new thread about it?

Thank you for your help, i appreciate it.

It’s in the padding,
`
#access {
height: 24px;
padding-bottom: 18px;
}

you can play with the height and padding to get what you want.

please try Firebug or an in browser dev tool of somekind, it’s easy to get going on, it’ll change your life.

Please decribe the other issue in more detail and I’ll take it on this thread.

I just downloaded the Firebug and trying to learn about it (i wonder where the undo button is. lol). Yes indeed, Firebug looks like a real treasure.

I am also trying to use InstantWP in browser dev tool. (omg it lost half of my new article as i did not know it does not react on Ctrl+Z). But overall i am having tons of fun, i am sure i will be a pro some day!

The other issue is trying to figure out how can i insert a Logo/Header (a 260x120px picture with some drawing and my website name on it) instead of the title which we type in Settings>General.

One trick is to put a huge negative margin on the title element:

#site-title {
    margin-left: -2000px;
}

Then you can put the title in the header image instead.

This way as far as google is concerned you still have a title. otherwise you might have just used:

#site-title {
    display: none;
}

Thank you for your input, i appreciate it.
1. You are right, the Title is needed. Title-less is not a good idea. I guess i have to leave it as is for now.

Then it is logical to put the Logo as a customized header image indeed.

Do you think there is a way to put both 260×120 Logo on the left, and 728×90 AdSense on the right side on the header? (I sure can make the Logo smaller size if needed).

2. Today i finally had a bit of time, so i tested changing padding for adjusting the menu height as you suggested, and yes indeed it does change the height, but still letters are misplaced toward the bottom. After experimenting with the +- few pixels i ended up only using changes in the height (just because it will be easier for me to remember what did i change) as you originally advised, and the menu bar looks ok to me now. The problem is resolved.
Thank you!

You can put anything you like in the header, just get the template tag which outputs the adsence and put in header.php. Often times the code goes right before “</header>” but you may have to experiment with placement to get what you want.. If you need to edit the css, you know what to do to get that going. You can resolve this thread and start another regarding that issue, and/or stay here and I’ll help as I can.