I'm trying to make the navigation font a true bright white, but with the transparency, it seems to grey it out a bit. I also want to use Avenir for my navigation font and website content font, but I don't know how to do any css coding (sorry!).
I am trying to emulate another church's site for my client. I scanned their site for the theme they are using, but it's custom. We like the crisp, clean readability of the Avenir font, and I've tried to come close with all the other fonts in the Salient theme, with no luck.
Also meant to mention that I've had to play with different fonts and sizes that render differently by browser and by device - desktop, tablet, and phone. I can't seem to get them as consistent as the other website that seems to match just fine. The mobile phone nav bar with the sticky/off canvas option is very bulky, and I was hoping to get a cleaner version like the one in the other site.
#header-outer.transparent header#top nav > ul > li > a{
color: red !important;
}
You can change the red to whatever color you need. Add the CSS to salient \ general settings - css script related - custom css code.
Avenir font is not included with the options on salient \ typography - navigation font. You will need to add it using some custom CSS and then apply it to the menu text. You can use this guide: https://themenectar.ticksy.com/article/9773/ to set that up.
Thank you Andrew. I pasted the code and it works, however the white font still looks greyed or semi-transparent itself. It's not a true bright white and is hard to read, unlike other sites with white fonts in the headers (even comparing light and dark backgrounds). How do I fix that?
#header-outer.transparent header#top nav > ul > li > a, #header-outer.transparent header#top nav ul #search-btn a span.icon-salient-search, #header-outer.transparent nav > ul > li > a > .sf-sub-indicator [class^="icon-"], #header-outer.transparent nav > ul > li > a > .sf-sub-indicator [class*=" icon-"], #header-outer.transparent .cart-menu .cart-icon-wrap .icon-salient-cart, .ascend #boxed #header-outer.transparent .cart-menu .cart-icon-wrap .icon-salient-cart{ opacity: 1!important; }
I hope this gets you your desired results. Please feel free to contact us if you have any further questions.
I had another ticket open for a mobile navigation overlap issue, which was fixed when I advised to deactivate/reactivate plugins to see if one was interfering, and that worked! However, my nav bar font on desktop has reverted to black. I checked my font settings and css coding you previously provided below, and they all are set to white. The strange thing is, when you click to go to the homepage (on logo icon), the nav bar font is black, but when you click on one of the tabs and go into the subtab pages, the nav bar font reverts to white, but clicking again on the logo to go to the homepage, the font reverts again to black. How do I fix that?
Thank you for getting back to us and for giving us access.
I visited your site in Incognito mode and it seems that your hamburger menu is white as shown in the screenshot. I suggest you clear all caches you have installed on your site and server as well as your browser cache and see if that fixes the issue.
You can let us know if this solves the problem and feel free to contact us if you have any further questions.
Thanks for the reply. Can you please check the homepage? That's where I'm seeing the issue. When I go to the subtabs, the hamburger menu is white, but when I go back to the homepage, it goes back to black. How do I fix?
Hi Andrew - I did that and it just made the caption font dark with a lighter background, but did not change the hamburger menu to white to match all the other white hamburger menus on the subtabs. See attached. How do I fix? :)
Hi,
I'm trying to make the navigation font a true bright white, but with the transparency, it seems to grey it out a bit. I also want to use Avenir for my navigation font and website content font, but I don't know how to do any css coding (sorry!).
I am trying to emulate another church's site for my client. I scanned their site for the theme they are using, but it's custom. We like the crisp, clean readability of the Avenir font, and I've tried to come close with all the other fonts in the Salient theme, with no luck.
Here is my client's website: www.livinggrace.net
Here is the site I am trying to emulate: www.rivervalley.org
Please help, thanks!
Jennifer
Also meant to mention that I've had to play with different fonts and sizes that render differently by browser and by device - desktop, tablet, and phone. I can't seem to get them as consistent as the other website that seems to match just fine. The mobile phone nav bar with the sticky/off canvas option is very bulky, and I was hoping to get a cleaner version like the one in the other site.
Please let me know what I can do, thanks again.
Hello, is anyone there?
Hi Jennifer,
Apologies for the late reply.
About the fonts, for the menu color use this CSS:
#header-outer.transparent header#top nav > ul > li > a{ color: red !important; }You can change the red to whatever color you need. Add the CSS to salient \ general settings - css script related - custom css code.
Avenir font is not included with the options on salient \ typography - navigation font. You will need to add it using some custom CSS and then apply it to the menu text. You can use this guide: https://themenectar.ticksy.com/article/9773/ to set that up.
Cheers.
Thank you Andrew. I pasted the code and it works, however the white font still looks greyed or semi-transparent itself. It's not a true bright white and is hard to read, unlike other sites with white fonts in the headers (even comparing light and dark backgrounds). How do I fix that?
Hi Jennifer,
Try adding this code:
#header-outer.transparent header#top nav > ul > li > a, #header-outer.transparent header#top nav ul #search-btn a span.icon-salient-search, #header-outer.transparent nav > ul > li > a > .sf-sub-indicator [class^="icon-"], #header-outer.transparent nav > ul > li > a > .sf-sub-indicator [class*=" icon-"], #header-outer.transparent .cart-menu .cart-icon-wrap .icon-salient-cart, .ascend #boxed #header-outer.transparent .cart-menu .cart-icon-wrap .icon-salient-cart{
opacity: 1!important;
}
I hope this gets you your desired results. Please feel free to contact us if you have any further questions.
Best Regards.
Yes that worked!! Thank you Andrew so much!!
Hi Andrew,
I had another ticket open for a mobile navigation overlap issue, which was fixed when I advised to deactivate/reactivate plugins to see if one was interfering, and that worked! However, my nav bar font on desktop has reverted to black. I checked my font settings and css coding you previously provided below, and they all are set to white. The strange thing is, when you click to go to the homepage (on logo icon), the nav bar font is black, but when you click on one of the tabs and go into the subtab pages, the nav bar font reverts to white, but clicking again on the logo to go to the homepage, the font reverts again to black. How do I fix that?
Hey there,
Thanks for reaching in,
Can you please give us a temporary admin access to your site?
You can add new users by going to Users > Add New set the user and password for us, set the role to admin and send the info here. You can navigate here for more details; https://make.wordpress.org/support/user-manual/customizing-wordpress/managing-users-on-your-wordpress-site/adding-users-to-your-wordpress-site/
Hope to hear from you soon!
Regards,
Hi there,
Thank you for getting back to us and for giving us access.
I visited your site in Incognito mode and it seems that your hamburger menu is white as shown in the screenshot. I suggest you clear all caches you have installed on your site and server as well as your browser cache and see if that fixes the issue.
You can let us know if this solves the problem and feel free to contact us if you have any further questions.
Best Regards.
Hi Andrew,
Thanks for the reply. Can you please check the homepage? That's where I'm seeing the issue. When I go to the subtabs, the hamburger menu is white, but when I go back to the homepage, it goes back to black. How do I fix?
Hi Jennifer,
Thanks for getting back to us and my apologies.
Try changing the "Slide Font Color" on your Nectar Sliders to "Dark".
I hope this helps. Please feel free to contact us if you have any further questions.
Best Regards.
Hi Andrew - I did that and it just made the caption font dark with a lighter background, but did not change the hamburger menu to white to match all the other white hamburger menus on the subtabs. See attached. How do I fix? :)
Hi jennyo2222,
Apologies for the late reply.
We logged in and changed the text color option on the row containing the slider here http://www.livinggrace.net/wp-admin/post.php?post=5&action=edit to light and now the dark mobile menu is switch to white.
Hope this helps.
Thank you Andrew!! I just needed to know where to fix it, so this is very helpful.
Jennifer :)