WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
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!
The blog I need help with is tacklingmommyhood.com.
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?
Hi blondecroatian - can you tell me the code for changing the font in the navigation bar . thanks so much
@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:
blondecroatian
designsimply
sherrymeneley#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/
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
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
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....
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
You are correct!!! Thank you so much!!! You are awesome! :)
You're becoming a CSS expert!
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 - I am using Delicacy. I have a couple of WordPress.com sites. The one I'm refering to is http://createheart.com/
@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 ?
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!!
This topic has been closed to new replies.
