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

[Jo]

Hi,

Firstly, sorry I’m a complete novice!

I have a header with the logo to the left. On the top right I have the telephone number.

On the bottom right of the header I want to add the social media icons.

Any help would be appreciated 🙂

[Leo]

HI there,

Can you provide a live link to your site?

The link you provided in the URL field require a password.

Thanks!

[Jo]

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

I’ve actually added them now as a widget. I also used a widget to add the telephone number.

The problem now is these two widgets are not mobile responsive.

So now my questions is, how do I make all of the current header mobile responsive?

Many thanks

[Tom]

Give this CSS a try:

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

[Jo]

Hi,

That’s much better thank you 🙂

Just one last thing on the header…… I would like to move the telephone number down slightly so it’s closer to the “call for a free….” Leave the call for free where it is. Also adjust the height of the social media widget so there isn’t such a big space on the mobile version. (it’s probably best to view the mobile version to see what I mean).

Many thanks

[Leo]

Try this:

.header-widget .textwidget h3 {
    margin-bottom: 10px;
}
@media (max-width: 768px) {
    #black-studio-tinymce-3 {
        padding-bottom: 0;
        margin-bottom: 0;
    }
}

[Jo]

Hi,

That has moved the social media buttons up slightly on mobile. Are you able to decrease the top margin/padding slightly too to moved it up just a touch further on mobile?

However there has been no change to the telephone number widget. Are you able to increase the top margin/padding slightly which will move it all down slightly?

Also, while I am being particular on the header (sorry). On the mobile version are you able to make the logo the full width?

Many thanks

[Leo]

Sorry which spacing are you referring to now?

I’ve fixed the code above for telephone number spacing: https://generatepress.com/forums/topic/how-to-add-social-media-icons-links-in-header/#post-484585

You can try this CSS to make the header full width on mobile:

@media (max-width: 768px) {
    .inside-header {
        padding: 0;
    }
}

[Jo]

Hi,

The telephone number spacing didn’t get fixed with the CSS you gave me.

The header width on mobile is now great! Thanks

[Leo]

I’m not seeing the first block of CSS being added here: https://generatepress.com/forums/topic/how-to-add-social-media-icons-links-in-header/#post-484585

It should work.

[Jo]

It’s OK, I’ve dropped the social media icons from the header now.

However, now the bottom of the telephone number widget has cropped off (on the ‘g’ of obligation).

I can see how to change this?

Sorry to be a pain and thanks for your help.

[Leo]

Check your line-height in Body > Typography and make sure it’s not at 0.

[Jo]

That’s it! Thanks 🙂

[Leo]

No problem 🙂

[Jo]

Hi,

Sorry, I’m back to social media icons.

I have the icons on a header widget which looks great on the desktop. However on the mobile it’s taking up too much space in the header and there isn’t much scrolling area below the navigation bar.

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

Are you able to suggest a better layout for the mobile? For example can the social media icons be added to the naviation bar on the mobile? Could it work to have the menu icon to the left and the social media icons to the right on the navigation bar on the mobile? I’m open to suggestions.

Also, is there a function which condenses the header when you scroll down (to create more page space on the screen)? Sorry, I don’t know what this is called.

Thanks

[Author]

Posts