Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hello,
I am new to websites, and very new to CSS!
I just started using the site origin CSS plug-in. I want to change the text font on my website’s header part such as – Home, About me etc.but when I select the text and hover over my mouse pointer over the color palette, the text color does not change at all. however,I see the ‘navigation link’ (which looks like my website address/the text I am selecting) in the css code window change color according to the color I am selecting.Could you please help!
Hi Weiss,
This sounds like header text colors are using a significantly more specific selector than the one you’ve selected. Do you have a public URL where we can take a look at your header? This will allow me to work out the ideal selector to use.
Hi Alex,
thank you so much for looking into this, I really appreciate it!
the link is – theweisslifestyle.com
I want to change the color of gray banner to white and change the text color to black
and bold.
thank you
Hi WeissLife,
Please add (and adjust) the following CSS to WP AdminAppearanceCustom CSS:
/* Menu background */ #nav-topbar.nav-container { background: #fff; } /* Sticky menu background */ .is-scrolled #header #nav-topbar.nav-container { background: #fff; } /* Menu Item */ #nav-topbar .nav li a { font-weight: bold; color: #000; } /* Menu Item hover and menu item when current page */ #nav-topbar .nav li a:hover, #nav-topbar .nav li.current_page_item a { color: #f00; }You might also need to install the SiteOrigin CSS Editor.
Hi Alex,
Thank you!
it worked to a degree I would say, when don’t scroll down the page,I can still see the gray band on the corners of the header. Is there any way to remove that completely?
Thank you
Hi WeissLife,
Please replace:
/* Menu background */ #nav-topbar.nav-container { background: #fff; }With:
/* Menu background */ #header #nav-topbar.nav-container { background: #fff; }Many many thanks Alex! this one works like a charm :)