• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Header Image, Header Widget: Responsive Alignment Problem

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Header Image, Header Widget: Responsive Alignment Problem

This topic is: not resolved

Tagged: header image, header widget, responsive alignment

  • This topic has 3 replies, 3 voices, and was last updated 10 years ago by jeremi_liwanag.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 22, 2013 at 10:31 am #75030
    grottocom
    Participant

    Hi. I’m having the same issue in different themes/different sites. Header Widget items float to cover header on mobile devices (or shortened browser windows). Been hunting in forums for tips, but need a bit more help. Please and thank you.

    We’ve got a Custom Header graphic at 1140 x 150 pixels (logo, tagline, background graphic), then the Header Widget area includes social media icons and an image widget (just the icons on the second site listed below). Set the CSS to place the widget area nicely for desktop viewing.

    #header .widget-area {
    float: right;
    margin: 40px 40px 20px 0;
    width: 210px;
    z-index: 100;
    }

    Thought I could change the header image to be just the logo (a transparent GIF, perhaps?) at 142 x 150 pixels then set the other part of the graphic as a background? But I can’t seem to make that work.

    http://www.lakecountyhaven.org/
    (secondary problem is load time for some reason)

    FYI: Same problem, different theme, different site. (Though header may require redesign to work?)

    http://www.lindenhealthcenter.com/

    If that solution would work, can someone step out how to accomplish this properly?
    OR, do I need a different approach?
    Thanks! Top link is a local shelter and we’re keen to get it working properly right away to inspire holiday donations.

    http://www.lakecountyhaven.org/
    November 22, 2013 at 3:32 pm #75081
    Robin
    Member

    I don't know if it's possible to swap out the custom header for your own image, but you can scrap the custom header and use your own logo/image from the get go. Here's a tutorial about how to go about it. (That's not the only one, but if you google "genesis use logo header", you'll see others, but this seems to hit all the high points.)

    If you put your logo in your theme files instead of using WP like she does, you may need a second/smaller version for your media queries. I usually have a large logo and then one smaller one, which is enough to cover the bases.

    HTH


    I do the best I can with what I’ve got. (say hey on twitter)

    December 2, 2013 at 12:00 pm #76624
    grottocom
    Participant

    Thanks, Robin
    The tutorial was a great tip. Though it seemed to not address how we could have a custom image for the background of the header. So we tabled that option to see what we could come up with.

    We want to include the organization's tagline and a brand graphic rather than just the logo-on-the-left/widget-on-the-right set up. My colleague continued to futz with the CSS and we reworked the graphic until the layout for both desktop and mobile seem to be work well. (Though I haven't had time to compare what else he did under the hood!)

    Really appreciate the help and relieved that we've got the site up purring along for the client. ---KSP

    December 2, 2013 at 6:14 pm #76711
    jeremi_liwanag
    Member

    you may want to set a position relative into your #header and use position absolute to your widget ... use media queries to set a different background image to your header once you reached you breakpoint and top left or where ever you like to position your widget.


    @media
    only screen (max-width:768px ) {
    // header different background
    // header widget different class
    }

    then 480 and 320 ...


    Your online success is our business http://www.systemise.com.au

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble