-
AuthorPosts
-
August 5, 2018 at 10:06 pm #993746
Hi.
I want to make the text colour in the top header to white but when I change this in general styling the text colour also changes for my drop down menu in services and you cant see it.
Is there a code to please to only adjust the text colour for the top header? Also I’d like to add icons in the top header i.e. phone and a little calendar with the words Book Online which when clicked will go directly to booking online (much like a social profile behaviour)
Can you please help?
Thanks
August 6, 2018 at 1:44 am #993770Hey EliteMassageSolutions,
Please check the url in the Private Content area, it has no TLD, I tried “.com” with no luck.Best regards,
MikeAugust 6, 2018 at 4:38 am #993787Apologies. Have resent in private. THanks. :-)
August 6, 2018 at 7:03 am #993814Hi,
Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:
.phone-info span, ul.social_bookmarks a::before { color:white !important; }
Best regards,
RikardAugust 6, 2018 at 9:02 am #993843Thank you that worked for the font colour. Now is it possible for icons in the top header?
I.e. Phone icon before the phone number and a calendar icon for some text to Book Online?
Can send a pic of what I mean to show?
August 6, 2018 at 7:41 pm #994060Hi,
You want to add icons in the top header?
Best regards,
Jordan ShannonAugust 6, 2018 at 9:48 pm #994112Yes that’s right. See example sent in private content.
August 6, 2018 at 9:54 pm #994114Hi,
Please go to Enfold theme options > Header > Extra elements and choose to display Social icons and “Header Phone Number/Extra Info” on the top bar on the right side.
Best regards,
Jordan ShannonAugust 6, 2018 at 10:11 pm #994117Hi Jordan.
Thanks I already have info in my top header, I just want to know if its possible to add a phone icon before my phone number and also a little calendar next to some text to make it for online booking?
See info in private content
August 6, 2018 at 10:16 pm #994119Hi,
Yes, those areas accept html so you can add the icon images directly to them.
Best regards,
Jordan ShannonAugust 6, 2018 at 10:32 pm #994127Jordan
I don’t know how to HTML code can you please help with that?
August 7, 2018 at 7:41 pm #994538Hi,
I added this html to your Enfold Theme Options > Header > Extra Elements > Phone Number or small info text field:<span class="phone">[av_font_icon icon='ue854' font='entypo-fontello' size='20px'][/av_font_icon]<a href="tel://1-555-555-5555">0412 552 293</a></span> <span class="calendar">[av_font_icon icon='ue85b' font='entypo-fontello' size='20px'][/av_font_icon]<a href="http://elitemassagesolutions.com.au/book-online/">Book Online</a></span>
then I added this css to your Enfold Theme Options > General Styling > Quick CSS field:
.phone .av-icon-char,.calendar .av-icon-char { margin-top: -7px; } .phone a,.calendar a { color: #fff !important; }
I also added a link to your booking page next to your calendar icon.
Please check and let us know if you need any adjustments.Best regards,
MikeAugust 7, 2018 at 9:39 pm #994579Awesome!! thanks only 1 request – is it possible for the phone icon to turn the other way with the receiver?
August 7, 2018 at 10:03 pm #994589Hi,
Please try this code in the General Styling > Quick CSS field:.phone .av-icon-char { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; }
Best regards,
MikeAugust 8, 2018 at 6:42 am #994691THank you this worked! Great! :-)
August 8, 2018 at 10:52 am #994827Hi,
Great, glad we could help :-)
Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
RikardAugust 8, 2018 at 11:49 am #994873Thanks Rikard and team. Can now be closed. ;-)
August 8, 2018 at 12:08 pm #994889Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)Best regards,
Mike -
AuthorPosts
- The topic ‘Text Colour and Icons in top header’ is closed to new replies.