Header Right Widget overlaps logo image in Metro Pro

[lwlindquist]

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/

[emasai]

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

[lwlindquist]

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

[rebootedbody]

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

[lwlindquist]

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