Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

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

Home Forums Support How to add social media icons/links in header

Viewing 15 posts - 1 through 15 (of 27 total)
  • Author
    Posts
  • #483509
    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 🙂

    GP Premium 1.5.6
    #483703
    Leo
    Staff
    Customer Support

    HI there,

    Can you provide a live link to your site?

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

    Thanks!

    #483775
    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

    #483982
    Tom
    Lead Developer
    Lead Developer

    Give this CSS a try:

    @media (max-width: 768px) {
        .header-widget * {
            margin-top: 20px;
            text-align: center !important;
        }
    }
    #484188
    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

    #484585
    Leo
    Staff
    Customer Support

    Try this:

    .header-widget .textwidget h3 {
        margin-bottom: 10px;
    }
    @media (max-width: 768px) {
        #black-studio-tinymce-3 {
            padding-bottom: 0;
            margin-bottom: 0;
        }
    }
    #484602
    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

    #484753
    Leo
    Staff
    Customer Support

    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;
        }
    }
    #485153
    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

    #485556
    Leo
    Staff
    Customer Support
    #486207
    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.

    #486497
    Leo
    Staff
    Customer Support

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

    #486514
    Jo

    That’s it! Thanks 🙂

    #486575
    Leo
    Staff
    Customer Support
    #495314
    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

Viewing 15 posts - 1 through 15 (of 27 total)
  • You must be logged in to reply to this topic.