WordPress.com Forums » Topic: Put in my own Navigation bar in Delicacy

blondecroatian on "Put in my own Navigation bar in Delicacy"

blondecroatian — Thu, 03 Jan 2013 18:49:08 +0000

Actually, forget my question about changing the font color. I tried it out, and it does not look as good as the white.

Thanks so much for all your help, designsimply!!

designsimply on "Put in my own Navigation bar in Delicacy"

designsimply — Thu, 03 Jan 2013 16:33:27 +0000

@sherrymeneley, aha! It helps very much to include a link! Would you mind please creating a separate help request for your navigation font size question at http://en.forums.wordpress.com/forum/css-customization/#postform ?

sherrymeneley on "Put in my own Navigation bar in Delicacy"

sherrymeneley — Thu, 03 Jan 2013 15:25:06 +0000

designsimply - I am using Delicacy. I have a couple of WordPress.com sites. The one I'm refering to is http://createheart.com/

blondecroatian on "Put in my own Navigation bar in Delicacy"

blondecroatian — Thu, 03 Jan 2013 15:19:16 +0000

Designsimply - I did it!!!!! I made it work with the grass!!! Check it out!!!

One last question, though - because the grass is a lighter green, I think the white font is too light. How can I make the font in the nav bar the same color as all the other links in my blog (ie: that purplish color)?

designsimply on "Put in my own Navigation bar in Delicacy"

designsimply — Thu, 03 Jan 2013 13:04:40 +0000

You're becoming a CSS expert!

blondecroatian on "Put in my own Navigation bar in Delicacy"

blondecroatian — Thu, 03 Jan 2013 12:51:35 +0000

You are correct!!! Thank you so much!!! You are awesome! :)

designsimply on "Put in my own Navigation bar in Delicacy"

designsimply — Thu, 03 Jan 2013 12:40:06 +0000

The 1px line is not in the CSS, it's in the header image. Open this image in a graphics program and look at the bottom and you should see it:
http://tacklingmommyhood.files.wordpress.com/2012/12/banner-grass-dec-27-2012-poles-stroller-copy1.png

blondecroatian on "Put in my own Navigation bar in Delicacy"

blondecroatian — Thu, 03 Jan 2013 08:38:13 +0000

Done!!! Thanks! One question about the 1 px white part above the navigation bar. How do I get rid of that? My original idea for the navigation bar was to extend the "grass" area so that my navigation bar was actually grass with white wording inside (essentially making it look like the header and the nav bar was one big picture). This would be possible if the 1 px white part wasn't there....

designsimply on "Put in my own Navigation bar in Delicacy"

designsimply — Thu, 03 Jan 2013 01:07:28 +0000

Okay. First, to basically zero out as much of the current menu styles as possible, what I did was go to Appearance → Custom Design → CSS, click "Edit" next to "Mode: Add-on," click the theme CSS link, and looked for the section named "=Menu Ribbon-style." Then I systematically added CSS rules to override the ones listed there until I came up with this list of stuff to reset:

#navigation,
#navigation > .main-menu:before,
#navigation > .main-menu:after,
#navigation .main-menu > ul:before,
#navigation .main-menu > ul:after {
	border: none;
}
#navigation:before,
#navigation:after,
#navigation > .main-menu > ul {
	background: none;
	box-shadow: none;
}
#navigation > .main-menu {
	background-color: inherit;
}

To add the image you provided in as a background for the main navigation, do this:

#navigation {
	background: url('http://tacklingmommyhood.files.wordpress.com/2013/01/screen-shot-2013-01-03-at-12-05-58-am.png') 9px 0 no-repeat;
}

I noticed it feels like there's a 1px line above the menu with this solution, but that's actually in the header image itself just below the grass: http://tacklingmommyhood.files.wordpress.com/2012/12/banner-grass-dec-27-2012-poles-stroller-copy1.png

blondecroatian on "Put in my own Navigation bar in Delicacy"

blondecroatian — Thu, 03 Jan 2013 00:28:08 +0000

Designsimply, I've been trying to decide between a few navigation bars, but for now I'm just going to use something similar to what I already have (and then later I'll just swap out the URL for another image). I uploaded the new nav bar here:

http://tacklingmommyhood.files.wordpress.com/2013/01/screen-shot-2013-01-03-at-12-05-58-am.png

designsimply on "Put in my own Navigation bar in Delicacy"

designsimply — Wed, 02 Jan 2013 16:42:40 +0000

@sherrymeneley, this forum topic is about the Delicacy theme but your site is not using Delicacy. CSS is theme specific, so could you please post future help requests for your theme in a separate help request?

To change the font in the navigation bar of the Chateau theme, which http://sherrymeneley.com/ is currently using, you could add something like this to your Appearance → Custom Design → CSS editor:

#menu a {
	font-family: Georgia, Times New Roman, Times, serif;
	text-transform: none;
}

That example sets a generic font stack and also changes the uppercase text to normal case.

To learn more about font stacks, see http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

Or if you'd like to use a custom font, you must load it in your site first using the Appearance → Custom Design → Fonts page. See this link for more info about how custom fonts work at WordPress.com:
http://en.support.wordpress.com/custom-design/custom-fonts/

sherrymeneley on "Put in my own Navigation bar in Delicacy"

sherrymeneley — Tue, 01 Jan 2013 21:47:40 +0000

Hi blondecroatian - can you tell me the code for changing the font in the navigation bar . thanks so much

designsimply on "Put in my own Navigation bar in Delicacy"

designsimply — Thu, 27 Dec 2012 06:55:46 +0000

The CSS code for the Delicacy menu is actually done using several layers of CSS borders, background colors and gradients rather than by using a background image. However, you should be able to reverse all of the various backgrounds and gradients and borders to replace them with an image background instead. Note that you will want to have really clean lines in your image with transparent backgrounds on the edges if you want parts of the background to show through. It will take a bit of work to help figure out everything that's needed, so if you'd really like to go ahead, can you please post a link to the image you will be using in a reply here before continuing?

blondecroatian on "Put in my own Navigation bar in Delicacy"

blondecroatian — Sat, 08 Dec 2012 16:58:26 +0000

I would like to remove the navigation bar in Delicacy and put in my own picture.

Can someone help me with this? I know that I have to upload the new navigation picture and reference the URL somehow in the new CSS code, but that's about as much as I know....

Please help!