WordPress.com

1. sageenergy
   Member
   Feb 15, 2013, 1:48 PM

   Hi - I'd like to find out if it's possible to move my navigation menu bar into my header image. I've changed the background colour of the menu to match the image so it looks like it's part of the same image, but now I'm feeling like the header image is a bit too big. I know there's a way to resize the header images in Twenty Eleven with the CSS, but it sounds like a lot of trouble...! First I'd like to see if I can move the navigation bar up, and then I might not need to resize the header itself.

   I think I'd want the navigation bar to be transparent, so its background colour doesn't interfere with the header image (and so I don't have to worry about matching it exactly). I'd like it to align with the bottom of the header.

   There's also a thin black line on one side of my header image that I can't seem to get rid of. Any suggestions for removing it are welcome too.

   Thanks very much!

   The blog I need help with is sage-energy.ca.

2. designsimply
   Staff
   Feb 21, 2013, 4:40 PM

   Here's some CSS you can try out to move the menu around. Adjust the numbers as needed.

   #access {
   	margin-top: -43px;
   }
   
   #access div {
   	margin: 0 2%;
   }

   Consider removing the background color for hover links on the menu too.

   Aside: your header image has a thin black line on the left: http://sageenergy.files.wordpress.com/2012/03/cropped-website-header_earthdate.jpg I think it would look nicer without it.

3. sageenergy
   Member
   Feb 21, 2013, 6:11 PM

   Brilliant, designsimply, thank you! The code you provided was perfect.

   I also used this code that I adjusted from a wordpress.org forum for changing the hover colours:

   #access li:hover > a,
   #access ul ul :hover > a,
   #access a:focus {
   background: none;
   color: #404f24;
   }

   Now there's no background colour for the hover, and the text colour of each tab changes to match the darker colour of the header.

   Re: thin black line: I agree the header image would look better without it but I didn't think it was in the image itself. I thought it was in the header settings somewhere... Suggestions are welcome!

4. sageenergy
   Member
   Feb 21, 2013, 6:39 PM

   Fyi, and for anyone else fiddling around with these things: I also found that after putting the menu into the header image, I didn't think to remove the background colour of the navigation menu. It wasn't an issue with Firefox, so I didn't notice it until I checked the site in IE9.

   In IE9 the navigation bar showed as a solid colour, over top of the header image, so I added this code and now it looks great:

   #access {
   background-image: -moz-linear-gradient(none);
   }

   Thank you again!

5. designsimply
   Staff
   Feb 24, 2013, 5:30 AM

   Nice finds on the hover colors and figuring out how to make the main menu background transparent!

   Regarding the header image, you can't fix colors inside an image with CSS. :) You would need to adjust the image yourself to get rid of the line or get an updated image from a graphic designer if you had help from someone like that and then just upload the new image using the Appearance → Header page in your blog dashboard.

6. earthlinked
   Member
   Mar 26, 2013, 9:06 PM

   Thanks so much to both of you who saved me loads of time. I wanted to move the nav menu above the image and lose the background which I was able accomplish with your code and minor changes shown below. Was also able to lose the box shadow that showed up in Firefox and IE without editing image files:
   

   #access {
   	margin-top: -325px;
   	background: none;
   	-webkit-box-shadow: none;
   	-moz-box-shadow: none;
   	box-shadow: none;
    }

7. timethief
   Member
   Mar 26, 2013, 9:09 PM

   @earthlinked
   Which blog are your referring to? There is no blog linked to your username.

Topic Closed

This topic has been closed to new replies.