Small bar above Main Menu – font and icon size

Hi,

Thank you for the update.

To adjust the style of the social icons, you can use this css code.

#top #header_meta .social_bookmarks li a {
    float: left;
    width: 30px;
    line-height: 30px;
    display: block;
    margin: 0px;
    outline: none;
    padding: 0;
    min-height: 30px;
    height: 100%;
    overflow: visible;
    z-index: 2;
    position: relative;
    text-align: center;
}

Would you mind providing a screenshot of the issue? Or post the site URL in the private field so that we can check the current header layout and settings.

Best regards,
Ismael

Hi,

Thank you for the screenshots.

Please keep border color set to white, then add this css code to remove the lines between the social icons.

#top .social_bookmarks li {
    border-color: transparent;
    border: none;
}

Best regards,
Ismael

Hi,

Thanks for the update.

You can include this css code to remove the borders on mobile view and adjust the size or styles of the social icons.

@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .responsive #header_meta .social_bookmarks li {
    border: 0 !important;
  }

  #top #header_meta .social_bookmarks li {
    margin-right: 10px;
  }

  #top #header_meta .social_bookmarks li a {
    float: left;
    width: 40px;
    line-height: 40px;
    display: block;
    margin: 0;
    outline: none;
    padding: 0;
    min-height: 30px;
    height: 100%;
    overflow: visible;
    z-index: 2;
    position: relative;
    text-align: center;
    font-size: 30px;
  }
}

Increase the font size value further if you want to make the social icons bigger.

Best regards,
Ismael

Hi,
Do you want a different font sizes for the text in your topbar or do you mean for a text element on your page?
The “Font sizes” – “Textblock Font Sizes” and changing smaller screens settings should work if it is in a text element on your page.
Try disabling any caching plugins and check again. Also note that if you have set the font size in the Enfold Theme Options ▸ Advanced Styling, or with custom css, this may override the element setting.
If this doesn’t help please include an admin login in the Private Content area and tell us which text block you are working on so we can check.

Best regards,
Mike

Hi,
You could try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px) { 
#top #wrap_all .all_colors #av_section_1 h1 {
    font-size: 35px;
}
}

It will make the H1 text at the top of the page linked below 35px on mobile instead of the 65px that it is now on desktop.
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike