Change Menu Text Colour In Floox Template - Question | JoomShaper

Change Menu Text Colour In Floox Template

Gavin Bates

Gavin Bates

Template 10 months ago

HI, is there a preset somewhere in Floox template - where we can change the text colour of a menu name

shown in this pic https://ibb.co/s5PSRmC

Thanks in advance

0
10 Answers
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 10 months ago #178914

HI Gavin,

I would use Custom CSS for that, becuase that template was created mostly for darker image in the background, so without it, text color is too light.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 10 months ago #178916

Example for Top Bar:

#sp-top-bar ul.sp-contact-info li,
#sp-top-bar ul.sp-contact-info li a {color: red;}
#sp-top2 ul.social-icons li, 
#sp-top2 ul.social-icons li a {color: blue;}

body.header-default .sp-contact-info li,
ul.sp-contact-time li {color: black;}

Example for Menu:

.sp-megamenu-parent > li > a, 
.sp-megamenu-parent > li > span {color: black;}

OR

body.header-default .sp-megamenu-parent > li > a, 
body.header-default .sp-megamenu-parent > li > span {color: black;}
0
Gavin Bates
Gavin Bates
Accepted Answer
10 months ago #178931

Thanks, I added the following -

#sp-top2 ul.social-icons li a {color: #c31491;}
#sp-top-bar ul.sp-contact-info li a {color: #c31491;}
#sp-megamenu-parent > li > span {color: #c31491;}

some has changed - but not all - in particualr the menu text ...

I am sure I am doing something wrong - just not sure what ...

https://theschoolprintcompany.co.uk

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 10 months ago #178938

Don't get me wrong, but .... I gave you correct class names already, and you used wrong ones.

For example: #sp-megamenu-parent > li > span - does not exist ! look up again. Besides you need style for link, not only span in menu. Hello! Wake, wake


0
Gavin Bates
Gavin Bates
Accepted Answer
10 months ago #178941
.sp-megamenu-parent > li > a, 
.sp-megamenu-parent > li > span {color: #c31491;}

OK Thank you and sorry if I dont fully understand - I am trying.

I have added this to the CSS but it didnt seem to change the headings ...

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 10 months ago #178942

For "Open hours" and all icons, text in top section use

body.header-default .sp-contact-info li,
ul.sp-contact-time li {color: black;}

just copy-paste!

Yes, Links will stay "purpure".

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 10 months ago #178944

This was for menu items link, not headings. Either I don't understand purpose or you are using the wrong terms. In general, HTML headings are defined with the <h1> to <h6> tags. Menu items =/= headings.


Look up again, a few moments ago, I added section "OR". It'll work better in that template ;]

0
Gavin Bates
Gavin Bates
Accepted Answer
10 months ago #178945

Thank you

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 10 months ago #178946

And just in case by mistake you removed color for all links in the Top, listen me again, and use

body.header-default .sp-contact-info li a {color: purple;}

and, I think you got the point.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 10 months ago #178950

I take this opportunity to wish you a Merry Christmas :)))

0