Header Right Widget overlaps logo image in Metro Pro

Community Forums Forums Design Tips and Tricks Header Right Widget overlaps logo image in Metro Pro

This topic is: not resolved

This topic contains 4 replies, has 3 voices, and was last updated by  lwlindquist 2 years ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #69757


    I’ve modified the header image size from the default 270×80 to 360×107. 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.





    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



    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. :)




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



    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.


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

You must be logged in to reply to this topic.