Woocommerce: Sitewide notice covers header

- 8 years, 8 months ago rebeccaolson
 Participant
 
 Expired
 
 Hello – I’d like to be able to use the “sitewide notice” option within Woocommerce, but unfortunately, it covers the header when I turn it on (this is true for both large/PC screens and responsive/mobile). I’ve combed through google and the Woocommerce support forum and tried several different CSS code suggestions, but nothing works. Can you help?
 
 Here is a screenshot of what it looks like on (I’ve turned it off for now, because if I turn it on my site is unnavigable.)
- 8 years, 8 months ago Mirela
 Participant
 Hello,
 
 You can edit it’s layout with custom css. Just add a padding-top to the header element.
 Example:
 
 .header_wrapper.header_11 { padding-top: 48px !important; }
 
 Best regards!
- 8 years, 7 months ago rebeccaolson
 Participant
 
 Expired
 
 Mihaila –
 
 Unfortunately, that didn’t work. I tried upping the padding to padding-top: 1oopx, but still nothing changed (it looked exactly the same as the original screenshot.) Any other ideas?
 
 Rebecca
- 8 years, 7 months ago Mirela
 Participant
 Hello,
 
 I added this code into your custom css box:
 
 .admin-bar p.demo_store { top: -9px; }
 
 This is the result, screenshot. Please refresh and check your site.
 
 Best regards!
- 8 years, 7 months ago rebeccaolson
 Participant
 
 Expired
 
 Thank you – that looks great on a PC! However, it has messed with the responsive navigation bar and layout on my phone.
 
 Here is the “visit us” page with the banner activated – the navigation bar is now cutting off the element at the top rather than pushing it down. In addition, there is a new section of brown on the right:
 
 And here is the home page with the banner removed – the navigation bar at the top is too wide, and it’s still cutting off the top of the element (slider in this case):
 
 Thanks!
 
 Rebecca
- 8 years, 7 months ago Mirela
 Participant
 Hello,
 
 Please add this code into your custom css box:
 
 @media (max-width: 979px){ .top_wrapper { padding-top: 50px !important; } .header_wrapper.header_11 { padding-top: 90px !important; } }
 
 Let us know.
 
 Best regards!
- 8 years, 7 months ago rebeccaolson
 Participant
 
 Expired
 
 Mihaila – unfortunately no, that didn’t work – it looks the same.
- 8 years, 7 months ago Mirela
 Participant
 Hello,
 
 All you have to do is change the values until you get the result you want. I edited the code’s values to this:
 
 @media (max-width: 979px){ .top_wrapper { padding-top: 126px !important; } .header_wrapper.header_11 { padding-top: 50px !important; } }
 
 This is the result, screenshot. Is this what you wanted?
 
 Best regards!
- 8 years, 7 months ago rebeccaolson
 Participant
 
 Expired
 
 Thank you – those adjustments worked!
- 8 years, 4 months ago rebeccaolson
 Participant
 
 Expired
 
 Mihaila –
 
 Unfortunately, with the recent theme update to Tower, the CSS you gave for this issue is no longer working on PC (the CSS for mobile still works fine.) When I turn on the sitewide notice and add the following CSS, the notice covers the header.
 
 <code class=”western”>.header_wrapper.header_11 {
 padding-top: 40px !important;
 }
 .admin-bar p.demo_store {
 top: -9px;
 }
 
 I tried adjusting the values for both the header_wrapper and admin-bar, but nothing moved. Ideas? I’ve turned off the sitewide notice for now, because it covers the navigation for the site (and I removed the associated CSS because without the notice, it makes the naviation bar far too wide) – but you have my credentials in my profile if you want to turn it on to see what I mean. I’ve also attached a screenshot. Thanks!
- 8 years, 4 months ago rebeccaolson
 Participant
 
 Expired
 
 Sorry about that – I always forget that this forum doesn’t like text from word docs. The code I inserted is what you gave me:
 
 .header_wrapper.header_11 {
 padding-top: 40px !important;
 }
 .admin-bar p.demo_store {
 top: -9px;
 }
- 8 years, 4 months ago Mirela
 Participant
 
 Hello,
 
 I see you have some errors in your custom css. There were two missing brackets. I fixed them. Please enable the sitewide notice for us to check it up.
 
 Best regards!
- 8 years, 4 months ago rebeccaolson
 Participant
 
 Expired
 
 Thank you – that seems to have worked!