Delete line below top bar and change social media icons

Hi there

Can you help me with the top bar header. I want to get rid of the yellow line and also change the social media icons to the ones in a circle? Also increase their size slightly.

http://www.communityblitz.org.au

Thanks

Kay Shanley

Hey Kay,

Sorry to say but we don’t have options for those on the BB theme. But they can be done via custom CSS. Try the CSS snippet below and see if it works! :slight_smile:

/* Remove Top Bar bottom border */
.fl-page-bar {
  border-bottom: none;
}
/* Change Top Bar Social Icons size */
.fl-page-bar .fl-icon {
  font-size: 32px; /* Adjust to increase size */
  height: 28px; /* Only adjust if needed */
  line-height: 28px; /* Must be equal to height */
  width: 32px; /* Adjust to increase space between icons */
}
/* Change Top Bar Social Icons to round */
.fl-page-bar .fl-icon-twitter-regular:before {
  content: '\e287';
}
.fl-page-bar .fl-icon-facebook-regular:before {
  content: '\e227';
}
.fl-page-bar .fl-icon-rss-regular:before {
  content: '\e271';
}
.fl-page-bar .fl-icon-email-regular:before {
  content: '\e224';
}

Ben

Thanks Ben

That worked great.

Kay

Hi Ben

This worked well at first but when I moved out of the Customiser, it doesnt display correctly. I just copied and pasted your exact code.

Any ideas?

Kay

Hi Kay,

Can you remove Ben’s code and use the following code instead.

/* Remove Top Bar bottom border */
.fl-page-bar {
  border-bottom: none;
}
/* Change Top Bar Social Icons size */
.fl-page-bar .fl-icon {
  font-size: 32px; /* Adjust to increase size */
  height: 28px; /* Only adjust if needed */
  line-height: 28px; /* Must be equal to height */
  width: 32px; /* Adjust to increase space between icons */
}
/* Change Top Bar Social Icons to round */
.fl-page-bar .fl-icon-twitter-regular:before {
  content: '\\e287';
}
.fl-page-bar .fl-icon-facebook-regular:before {
  content: '\\e227';
}
.fl-page-bar .fl-icon-rss-regular:before {
  content: '\\e271';
}
.fl-page-bar .fl-icon-email-regular:before {
  content: '\\e224';
}

Basically, WordPress strips out </code> when added to the Customizer, so you need to use two to bypass it. I would recommend using a child theme and add this code to your child theme’s style.css instead. Then Ben’s code will work without any problem.

Thanks,
Danny

Thanks Danny, I tried this code as well but its the same.

I don’t know anything about Child Themes. Is there an easy tutorial you could recommend?

Kay

Hi Danny, sorry, your code works the opposite, when you save and come out of customiser it works!

Still I guess I need to learn how to use Child Themes so a quick lesson would be good.

Kay

Hey Kay,

Sorry about that one! I always tend to forget about that customizer bug. Every time you enter the customizer, a backslash gets stripped. So Danny’s code may work for now, but later if you go back to the CSS Code section in the customizer, the other backslash will be stripped again so our best bet will be to use a child theme until core fixes that bug.

Re child themes, there should be one available for download on your Accounts page. It’s a premade child theme for you to use. First, you’ll need to export your theme settings via Appearance > Export/Import. Once done, install the child theme, activate it, then import your theme settings. You can then remove the code from the CSS Code section in the customizer, and transfer it to the style.css file of your child theme which can now be found under Appearance > Editor.

Take note though that this will only work if you haven’t changed any codes in the theme files. :slight_smile:

Ben

Hi,

Great post and sorry to jump in on it, it’s just what I was looking for.

I was just wondering though, can you please post the rest of the “e224” numbers for the other social media links and also the twitter bird if available, that would be a great help.

also how do you include spacing between the icon circles, I tried padding-right but that failed.

Thanks, Colin

OK, worked out the spacing, I had the other size fix added which was overriding the size and spacing.

Colin

Hey Colin,

We’re using Mono Social Icon Fonts for those. Have a look at the link below to see the rest of the icons! :slight_smile:
http://drinchev.github.io/monosocialiconsfont/

Ben

Thanks Ben,

I did find the ones I wanted by trial and error but that helps for future sites.

BB is great by the way, only been using it a couple of weeks and have 5 sites designed, most are waiting on content but that’s usual.

Colin

Thanks for the kind words, Colin! We really appreciate it! :slight_smile: Enjoy! :slight_smile:

Ben