Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 1, 2017 at 9:01 pm #846985
    AJDesignCo

    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!

    September 2, 2017 at 12:12 pm #847152
    Rikard

    Hey AJDesignCo,

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

    Best regards,
    Rikard

    September 4, 2017 at 8:32 pm #847874
    AJDesignCo

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

    September 4, 2017 at 9:47 pm #847901
    Yigit

    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 7 years, 2 months ago by Yigit.
    September 4, 2017 at 10:10 pm #847916
    AJDesignCo

    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!

    September 5, 2017 at 12:15 pm #848067
    Rikard

    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

    September 5, 2017 at 4:09 pm #848180
    AJDesignCo

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

    September 5, 2017 at 4:43 pm #848192
    Yigit

    Hi,

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

    Best regards,
    Yigit

  • Author
    Posts
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.