Header widget cutting off the header image. Need help. Metro pro.

[davethevegan]

Hello for starters my website is "Davethevegan.com" where you can see my issue. My problem is that when I add a header Widget, in this case the search bar, it cuts off my Header image. The image is full when there is no widget so I know it is the widget space that is the problem. It says "Dave the Vegan" But with the Search bar added it only says "Dave the Vega"

I've tried editing the header widget with in the styles sheet but it just makes the search bar smaller and not the actual widget area. I'm using the metro pro theme on google chrome.

Any suggestions?

http://davethevegan.com

[Christoph]

Hi,

decrease the width of
.site-header .widget-area {
float: right;
width: 664px;
}

and increase the max-width of
.header-image .site-title a {
background-color: transparent;
max-width: 270px;
min-height: 80px;
padding: 0;
}

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[davethevegan]

That did not do anything. 🙁

[Christoph]

I don't see any changes to the style.css.
Please deactivate whatever minification and or caching plugin / solution you are using.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[davethevegan]

I de activated a caching plugin how's that?

[wadams92101]

This reply has been marked as private.

[Susan]

I'm not seeing the changes to your CSS as suggested by @Christoph.

When I make the adjustments suggested by @Christoph, I'm seeing the changes reflected on your site.

[davethevegan]

Check again. I had the Cache plugin turned back on

[davethevegan]

When I remove the header widget, the entire site title is displayed now. But I need to fit the search bar and the header

[Susan]

I didn't recommend removing the header widget area, and neither did @Christoph.

If you're not already using it, I recommend getting Firebug, so you can identify what needs to be changed in your stylesheet.

I adjusted the following areas in Chrome Developer Tools:

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

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

/* Widget Area
--------------------------------------------- */

.site-header .widget-area {
float: right;
width: 400px;
}

.header-image .site-title a {
background-color: transparent;
max-width: 681px;
min-height: 133px;
padding: 0;
}

[davethevegan]

I didn't remove the header widget area from the CCS hhaha I meant that when I remove the search bar widget, the title displays correctly, just to clarify what was happening. My bad.

I changed the values to the ones that you suggested and I'm still having the issue. Can you see the search form on my site? I feel like I messed something up.

Just downloaded Firebug lite for chrome since I have a chromebook I can't use the firefox version.

[Author]

Posts