Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #846985

    I am trying to make the social icons in the Top Bar larger than their default size.

    I used this CSS to make the Top Bar taller and make the icons larger, but it had some unintended consequences:

    #header_meta .container{
        min-height: 40px;
    }
    
    #top .social_bookmarks li{
        font-size: 28px;
        padding: 5px;
        border-right-style: none;
        width: 40px;
    }

    Can you please show me a better way to make the social icons appear at a size of 28px? I would like the bar to be just large enough to contain them, and I would like the hover background to cover the entire icon. Finally, that CSS affected the social icons in the footer. That’s not needed. I only want to make the icons in the top bar larger.

    Credentials are in private content.

    Thanks in advance!

    #847152

    Hey AJDesignCo,

    Could you post a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    #847874

    Goodness gracious…so sorry to omit that crucial detail. I’m sending it in the private content.

    #847901

    Hey!

    I used the code as following

    #header_meta .container{
        min-height: 40px;
    }
    
    #header .social_bookmarks li{
        font-size: 28px;
        border-right-style: none;
        width: 40px;
    }
    #header .social_bookmarks li a {
       width: 40px; 
       height: 40px;
       line-height: 40px;
    }

    Please review your website

    Best regards,
    Yigit

    • This reply was modified 3 years, 1 month ago by  Yigit.
    #847916

    That’s near perfect. Thank you.

    The only thing I added was 12px of padding to push the phone-info text down and center it within the top bar.

    Thanks again!

    #848067

    Hi,

    Great, glad you got it working and thanks for the feedback. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    #848180

    Thanks Rikard! That’s what I needed. You can close this topic.

    #848192

    Hi,

    You are welcome, glad we could help!
    Let us know if you have any other questions!

    Best regards,
    Yigit

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Quick CSS to Change Size of Top Bar Social Icons’ is closed to new replies.