Target top bar and footer menu fonts with CSS Hero?

BB Theme
1

Hi gang,

I’m using the BB theme, with the BB plugin, and CSS Hero.

I want to change the font size and colour of menu links in the top bar and the footer, but CSS Hero doesn’t seem to pick them up.

I watched a video guide to using CSS Hero to target BB (plugin) elements, but this says you need to add the “node” number. I think only BB plugin elements have node numbers, not elements in the theme, so could you let me know how I can change these please?

Thanks,
Lee

2

Hey Lee,

CSS Hero should be able to target our theme as well as plugin in its entirety. I gave it a shot in a local install and it does appear CSS Hero isn’t able to target the top bar for some reason unless I am doing something wrong, but is able to target the footer. You may want to bring this to their attention directly, but in the meantime, here is CSS to target both. Feel free to edit as needed in terms of what you need.

Top Bar:

.fl-page-bar .text-right .fl-page-bar-nav {
  font-size: 14px;
}

Footer Bar:

.fl-page-footer .text-right .fl-page-footer-nav {
  font-size: 14px;
}

Best,
Billy

3

Hi Lee,

looks like there was a minor bug in our BB-Theme configuration file, we managed to fix it and you should now be able to edit both top-bar and footer (including widgets) with CSS Hero.

Kindest regards,

Ale from the CSS Hero Team

4

Great to see you in our forums, Ale! Thanks for sharing as well! :slight_smile:

5

Thanks for jumping right on that Ale.

Awesome stuff mate!

6

Wow, thanks for the outstanding support guys! I’m still having problems though :frowning:

I was able to change the footer text no problem. CSS Hero was still not picking up the top bar text in rocket mode on its own though, so I added .fl-page-bar .text-right .fl-page-bar-nav into the custom box in CSS Hero and now it recognises it (thanks for that Billy).

All of the options in CSS Hero change this element (for example I can change the font weight, font size etc) but it won’t let me change the colour of the text. I’m adding a Hex code as I did for the footer - which worked fine there - but even clicking the !important button doesn’t change the colour.

Any ideas?

I’ve updated the BB plugin and theme too.

Thanks,
Lee

7

I’ve got it working now.

I’m not 100% sure, but I think the problem may have been related to the background settings for the top bar, chosen in the BB Theme customiser.

I changed the top bar background from custom back to same as content, and afterwards CSS Hero was able to pick it up.

I’m happy, thanks for your fast help :slight_smile: