[Resolved] How to add social media icons/links in header

[Leo]

Personally I’d hide the entire header widget area on mobile.

I don’t think you have enough room in the mobile header to insert social icons.

Maybe check out this method here: https://generatepress.com/forums/topic/social-media-icons-on-slideout-menu/#post-490928

[Jo]

Hi,

I’ve add this CSS to hide the header widgets.

@media (max-width: 768px) {
.header-widget {
display: none;
}
}

I really want the phone number and ‘call for a free, no obligation, consultation’ to appear on the landing page without having to click anywhere to find the number.

Obviously now the telephone number widget and social media widget are both hidden on mobile.

I’ve tried to follow instructions to add a hook in generate_inside_navigation but in GP Hooks this element is not showing. Am I looking in the wrong area?

I’m a little lost with this to be honest and probably need some very simple instructions to follow.

Thanks in advance.

[Leo]

You can just hide the social icons on mobile only instead of the entire header widget:

@media (max-width: 768px) {
    #lsi_widget-4 {
        display: none;
    }
}

You don’t have enough room for all that info in the mobile navigation bar.

[Jo]

I’ve done that. Is there any way when you scroll down the site (on mobile) that the header area condenses smaller so there is more visibility on site content? Even removing the social media icons the header and navigation bar takes up 40% of the screen.

Also how and where do I put the social media links? You have sent me links about adding a hook to inside_navigation. That element is not showing as an option in GP Hooks. Please can I also have simple instructions on how to add social media icons on the mobile (header).

Many thanks

[Jo]

https://journalxtra.com/wordpress/quicksnips/make-wordpress-theme-headers-shrink-on-scroll/

I think this is what I mean?

[Leo]

There really isn’t a way to make your header smaller as you have a lot of content with a big logo – generally people don’t do that as you can see why.

You can make it a bit smaller by reducing the margin-top in this CSS you’ve already added:

@media (max-width: 768px) {
    .header-widget * {
        margin-top: 20px;
        text-align: center !important;
    }
}

and maybe reduce this margin-bottom as well:

@media (max-width: 768px) {
    .inside-header>:not(:last-child):not(.main-navigation) {
        margin-bottom: 0;
    }
}

As for adding social icons in slideout navigation, can you open a new topic for that?

[Jo]

Hi,

That’s better but I think still too big.

Please can you have a look at this website which does exactly what I’m looking for.

On both desktop and mobile on scrolling the logo area shrinks. This would be perfect.

http://cainandbeer.com/

Many thanks

[Leo]

The logo gets cut off half?

That would require some custom javascript (anything that moves) and it’s out of the scope of this support forum unfortunately.

You could try asking on these sites:
https://stackoverflow.com/
https://codepen.io/

Let me know if there is another layout you’d like.

[Jo]

That’s a shame as I think it’s the solution for how it stands now.

What can you suggest to make the header area smaller on mobile?

[Leo]

Well hard for me to provide suggestions on design as everyone likes things different.

But personally, I would use the mobile header feature with your logo/icon (without text) for the mobile header logo:
https://docs.generatepress.com/article/mobile-header/

Then you can add a phone icon (instead of the phone) inside mobile header so that people can click and dial if they want:
https://docs.generatepress.com/article/mobile-header/#adding-html-inside-the-mobile-header

[Jo]

Hi,

I’m back on with this!

I’ve reduced the logo size and it’s looking much better on the desktop. However it hasn’t changed on the mobile.

Please can you advise how I make the logo smaller on mobile and not the full width of the screen?

(I am going to look into how I had the phone icon inside the mobile header)

https://charnwoodbookkeeping.co.uk/wp/

Thanks

Jo

[Leo]

Have you tried my mobile header suggestion in my last reply?

I think it will look slick 🙂

If not please open a new topic as this is unrelated to the original title/topic.

Thanks!

[Author]

Posts