Awesome! Is it possible to put a phone icon next to the menu icon that is there but both just open the canvas mobile menu? If not, I can look for an icon to put there. We would just like to show that it is the menu but also has phone numbers that they can call.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
Thank you so much, it looks so great! Is there a way to make the phone icon either link to a phone number to make a call or also open the off canvas mobile menu like the menu icon?
I do have the URLs in the social media links. The phone icon works in the off canvas mobile menu but not in the header. Is there a way to add a hyperlink for the phone icon that is in the mobile header in the custom css?
Would it be possible to have my mobile header set up like it is here, but change the icons and hyperlinks? So change the search icon to Font Awesome icon f044 (the paper with the pencil) and have it link to our lead form, and change the bag icon to a phone icon Font Awesome f095 that links to our phone number? And keep the menu icon to open the off canvas mobile menu. I attached the link and screenshot.
I am afraid those icons have their own links and though the icons can be changed via CSS the underlying links would remain the same therefore its not possible at the moment.
No problem, thank you! Is it possible to add a link to the phone icon that you added through css yesterday? Or just make it so that if they press the phone icon it also opens the off canvas menu?
Only use Below CSS and remove the one I provided earlier.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
That worked perfectly! Thank you so much, you rock! I just noticed it is showing up on the desktop version, is there a way to disable the user account button on desktop?
I added "Request a Free Quote" and the link to the secondary menu. Is there a way to hide the secondary menu on the desktop? Also, is there a way to make it sticky on the mobile and behave like the mobile header (transparent at the top, then get a white background when scrolling)?
- Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
Hey!
Can I add a phone icon and an email icon to the mobile header?
There is a screenshot attached for an example.
Thanks in advance!
Hailey
Hey Again,
I am afraid such an option is not available at the moment.
Thanks
ThemeNectar Support Team
Dear Tahir,
Thank you. Is there a way to change the icon to open the menu on mobile?
Kind regards,
Hailey
Yes, the icon can be changed with some Custom CSS. Let us know which icon do you want to replace it with?.
Thanks
ThemeNectar Support Team
Dear Tahir,
Awesome! Is it possible to put a phone icon next to the menu icon that is there but both just open the canvas mobile menu? If not, I can look for an icon to put there. We would just like to show that it is the menu but also has phone numbers that they can call.
Thanks,
Hailey
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
#top .span_9>.slide-out-widget-area-toggle:after { content: "\f095"; font-family: 'FontAwesome'; position: absolute; top: 24px; left: -21px; color: #13bdcc; font-size: 20px; } .transparent #top .span_9>.slide-out-widget-area-toggle:after { color: #fff; }Thanks
ThemeNectar Support Team
Dear Tahir,
Thank you so much, it looks so great! Is there a way to make the phone icon either link to a phone number to make a call or also open the off canvas mobile menu like the menu icon?
Thank you,
Hailey
Hi Hailey,
You will need to enter the full URLs to the social media links.
Thanks.
Dear Andrew,
I do have the URLs in the social media links. The phone icon works in the off canvas mobile menu but not in the header. Is there a way to add a hyperlink for the phone icon that is in the mobile header in the custom css?
Thanks,
Hailey
Would it be possible to have my mobile header set up like it is here, but change the icons and hyperlinks? So change the search icon to Font Awesome icon f044 (the paper with the pencil) and have it link to our lead form, and change the bag icon to a phone icon Font Awesome f095 that links to our phone number? And keep the menu icon to open the off canvas mobile menu. I attached the link and screenshot.
http://themenectar.com/demo/salient-ascend/
Thanks in advance,
Hailey
Hey Again,
I am afraid those icons have their own links and though the icons can be changed via CSS the underlying links would remain the same therefore its not possible at the moment.
Thanks
ThemeNectar Support Team
Dear Tahir,
No problem, thank you! Is it possible to add a link to the phone icon that you added through css yesterday? Or just make it so that if they press the phone icon it also opens the off canvas menu?
Thanks,
Hailey
Hey Again,
The only way to have it link to a phone number is to use the User Account Icon and change its icon via CSS:
Please enable that option so i can write up relevant CSS for it.
Thanks
ThemeNectar Support Team
Dear Tahir,
Awesome! Thank you so much. Just enabled it.
Thanks,
Hailey
I can seem to view the icon?
Please clear your cache using this guide: https://themenectar.ticksy.com/article/6226/ .
ThemeNectar Support Team
Dear Tahir,
Sorry just purged the cache. It is showing up now but the phone icon from the css you gave me yesterday is underneath it.
Thanks,
Hailey
Only use Below CSS and remove the one I provided earlier.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
#header-outer #top .mobile-user-account span.icon-salient-m-user:before { content: "\f095"; font-family: 'FontAwesome'; } li#nectar-user-account span.icon-salient-m-user:before { content: "\f095"; font-family: 'FontAwesome'; }Thanks
ThemeNectar Support Team
Dear Tahir,
That worked perfectly! Thank you so much, you rock! I just noticed it is showing up on the desktop version, is there a way to disable the user account button on desktop?
I added "Request a Free Quote" and the link to the secondary menu. Is there a way to hide the secondary menu on the desktop? Also, is there a way to make it sticky on the mobile and behave like the mobile header (transparent at the top, then get a white background when scrolling)?
- Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
/* hide desktop user icon */ li#nectar-user-account { display: none !important; }- I am afraid the Secondary Header Behavior can't be changed.
Thanks
ThemeNectar Support Team
Dear Tahir,
That worked, thank you so much! Is it possible to make the secondary header still show on mobile after scrolling?
Thanks,
Hailey
Hi There,
Please enable this option :
Thanks.