"Overhang" Header Image

Community Forums Forums Design Tips and Tricks "Overhang" Header Image

This topic is: not resolved

This topic contains 3 replies, has 2 voices, and was last updated by  SoZo 1 year, 2 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #13619

    JamesDunn
    Participant
    Post count: 5

    I am creating a website in WordPress to basically duplicate an HTML website at another location (http://wmsl.fm) and I’m working in a sandbox domain (http://jnicoledunn.com). Notice how the layout of the header is on the HTML website – the shield logo overhangs the navigation menu. That’s what is currently kicking my teeth in.

    To accomplish the “overhang” of the logo, I followed the instructions in this article: http://journalxtra.com/websiteadvice/wordpress/themes/studiopress-genesis-theme-framework/how-to-overhang-a-wordpress-header-image-in-genesis-5268/ – and added three widgets instead of two in the header. I had to modify a couple of sections because even though he said in the comments to just add three widgets, there was a little more to do. For instance, I had to remove the “clear:left;” part for the Center Header widget because that doesn’t allow for other items to be floated left of the item it pertains to.

    However, when I place the log in the Left Header widget, it overhangs just fine. But, when I place it in the Center Header it doesn’t overhang. I think I’ve got all the other items handled.

    My sandbox test site is http://jnicoledunn.com/ and the website I’m duplicating is http://great88.net (which redirects to http://wmsl.fm). That will be the active domain once it’s completed.

    Any help getting this completed would be greatly appreciated.

    James Dunn

    #13750

    SoZo
    Moderator
    Post count: 1573

    Remove overflow: hidden; from the #header rule


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #13758

    JamesDunn
    Participant
    Post count: 5

    Thanks @John.

    That worked perfectly. I’ve been pulling my hair out trying to make this work and I missed that. I knew it was something simple, just didn’t know what. I thought maybe my z-axis was incorrect or that the nav bar and the header were in different <div>’s so the z-axis didn’t apply to them.

    Thanks so much for helping here. Good to go.

    James Dunn

    Athens, GA USA

     

     

    #13762

    SoZo
    Moderator
    Post count: 1573

    You’re welcome :)


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘"Overhang" Header Image’ is closed to new replies.