Put navigation bar in header image on Twenty Eleven

  • Author
    Posts
  • #1155434

    sageenergy
    Member

    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.

    #1155614

    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.

    #1155618

    sageenergy
    Member

    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!

    #1155619

    sageenergy
    Member

    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!

    #1155621

    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.

    #1155629

    earthlinked
    Member

    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;
     }

    #1155630

    timethief
    Member

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

The topic ‘Put navigation bar in header image on Twenty Eleven’ is closed to new replies.