Removing white space under top bar/header

[Paul Sheiffele]

Hello, I’ve been playing around with the top bar/header area on our site at test.genetargeting.com and I’ve used widgets to position things the way I want with our logo. However, there is currently a lot of white space beneath the logo/top bar area that I couldn’t seem to get rid of. Could we get that removed?

Thanks.

[Sonnal S Sinha]

Hi,

Kindly use this CSS to remove white space.

.head-info-area .right .is-layout-flex.wp-container-4.wp-block-columns { margin-bottom: 0;}
.logo h2 { display: none;}

Regards,
Brad

[Paul Sheiffele]

Thanks, that worked! Is there any way to make the topbar/header area more mobile-friendly? Right now, it breaks up the contact info text (maybe we could hide that on mobile?). I tried to go into the widget and mark “hide content on mobile” for that widget, but it did not work. It also makes the mobile menu bar (the three lines) appear on the slider photo area. I hope that makes sense.

[Sonnal S Sinha]

Hi,

Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

@media screen and (max-width:479px) {
.head-info-area .right { width:90%; margin:0 auto;}
.is-layout-flow.wp-block-column.uag-hide-tab.uag-hide-mob { display: none;}
}

Regards,
Brad

[Paul Sheiffele]

When I pasted that, it squished all of the contact info text into one long vertical line. However, I tweaked the width to 70% and the margin to 20 and it fixed the issue. The text still shows on mobile, but it is not broken up so I am okay with it.

The only thing that is still broken is the location of the 3 lines for the mobile menu. On mobile, it is still sitting on top of our slider image rather than in the white space above it.

[Sonnal S Sinha]

Hi,

Can you send us the screenshot of your issues? Upload your screenshot on https://imgbb.com/ and paste the share url here.

Regards,
Brad

[Paul Sheiffele]

Sure, here is the screenshot: https://ibb.co/fpvHNPt

The mobile menu bar is sitting on top of the blue mouse image, but it would be nice to have it sitting in the white space above the image.

[Sonnal S Sinha]

Hi,

Kindly use this CSS.

@media screen and (max-width:479px) {
.left img { width: 85%;}
.header.type3 { position:static;}
}

Regards,
Brad

[Paul Sheiffele]

Excellent, that worked! Thank you once again!

[Sonnal S Sinha]

Hi,

If you found our service good kindly review us here: https://www.trustpilot.com/review/sktthemes.org

Regards,
Brad

[Author]

Posts