• 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 Right Widget overlaps logo image in Metro Pro

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 Right Widget overlaps logo image in Metro Pro

This topic is: not resolved

Tagged: header image, header right widget, Metro Pro

  • This topic has 4 replies, 3 voices, and was last updated 9 years, 6 months ago by lwlindquist.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • October 29, 2013 at 4:30 pm #69757
    lwlindquist
    Member

    I've modified the header image size from the default 270x80 to 360x107. As a result, the Header Right widget overlaps the header image on narrower width displays (fine on my widescreen, but anything less puts the widget on top of the header).

    Suggestions as to what else I need to modify to correct this? I've tried reducing the widget width without success (don't actually need it to be very wide). Any help is appreciated.

    Thanks

    http://dakotamidwestadjusting.com/

    http://dakotamidwestadjusting.com/
    October 29, 2013 at 6:17 pm #69800
    emasai
    Participant

    I adjusted like this and it worked just fine
    .site-header .widget-area {
    float: right;
    width: 280px;

    I love the site.


    Need Website Customization or a Responsive CSS fix? Contact Me
    Lynne emasai.com

    October 29, 2013 at 7:36 pm #69814
    lwlindquist
    Member

    Tried that -- hoping you'd be more persuasive with it, since it didn't believe me the first time. 🙂

    Still didn't work. But I went south and fiddled with the widget area width and the title area width in the responsive section of the css. Decreasing the widget area width still didn't resolve it, but widening the title area to match the width of the header image did the trick.

    Thanks for the suggestion -- got me thinking there had to be a missing piece somewhere. And thanks on the site. Happy with the way it turned out. 🙂

    LW

    November 16, 2013 at 11:03 am #73426
    rebootedbody
    Member

    How did you change the custom size of the header image?

    November 16, 2013 at 12:12 pm #73437
    lwlindquist
    Member

    In functions.php I modified the width and height in this section (don't recall the original, I changed to 360 and 107):

    //* Add support for custom header
    add_theme_support( 'custom-header', array(
    'width' => 360,
    'height' => 107,
    'header-selector' => '.site-title a',
    'header-text' => false

    In style.css, I modified the width of the title area in this section.

    /* Title Area
    --------------------------------------------- */

    .title-area {
    float: left;
    padding: 0;
    width: 500px;
    }

    In this case, I made it 500px which is wider than the 360px image, though that may not have been needed once I fiddled with the responsive section. Would take some trial and error I suppose, but I got it to work and left it at that. 🙂

    Hope that helps.

    LW

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 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