[Support request] Header on mobile

[Nicki Watson]

I am finding that the header spacing on my website leaves too much white space underneath the logo on the mobile version. Could you please advise how I could make this smaller?

2 On the mobile version of my site the header widget area with the social icons displays at the top, and then the logo displays underneath it. Is it possible to change these so that the logo is on top on the icons underneath?

[Tom]

Hi there,

1. Can you link me to your site so I can see what’s causing the white space?

2. This topic should help: https://generatepress.com/forums/topic/mobile-friendly-header/#post-177641

[Nicki Watson]

Hi Tom
its http://www.cotswoldcolleague.co.uk

[Tom]

Any reason you have the description added but hidden? That’s most likely a part of the cause.

Then you have negative margin added to the .inside-header class.

I would remove the site description, remove that negative margin and then add padding to the bottom of the header.

[Nicki Watson]

Thanks Tom.

I changed the negative margin , and added padding to the bottom.
The site title is Cotswold Colleague and the tagline is Resourceful Virtual Admin the Cotswolds, but if I unhide this it shows additionally above the logo.

I can’t locate where the line showing below the logo is . Is site description somewhere else and not in site identity?

[Tom]

It looks like you have the site title and tagline in the logo itself, so it’s probably ok just to remove the text versions in “Customize > Site Identity”.

It looks a lot better on mobile for me now 🙂

[Nicki Watson]

Tom

I’ve taken this line out on the site identity but it’s still showing? Is there site description somewhere else?

Can I add you as user and you could take a look?

[Tom]

Did you check the “Hide title” and “Hide tagline” checkboxes?

Sure, feel free to send it using the contact page: https://generatepress.com/contact/

[Nicki Watson]

Hi

Yes I have them checked and its still showing.

Sorry, not clear on how I give you access?

[Nicki Watson]

I think Ive added you as a User now- sorry being dumb and getting my head around this. Thanks for your patience

[Tom]

I don’t think I received any details through the contact form?

[Nicki Watson]

sorry . I cant find the form? Other than account issue? Sorry I’m not understanding how do I do give you access? I added as a user ?

[Tom]

You can send me the URL, username and password through the account issue form 🙂

[Nicki Watson]

Tom

I managed to remove this which as in GP hooks. Thanks.

I trialled adding in the css from your note in point 2 above- social icon appearing above the logo but the social icon moved to nearly touching under the logo. On mobile the social icons are too big in comparison with my logo. On pc it looks fine.

Could you help with css for this ? many thanks

[Leo]

This CSS should make the icons smaller on mobile:

@media (max-width: 768px) {
    .icon-set-lsi_widget-6 a {
        font-size: 15px !important;
    }
}

[Author]

Posts