This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Cannot change the header text font with CSS Siteorigin

Resolved 6 replies pluginplugin-siteorigin-csstechnical
WeissLife
8 years ago · Last reply by WeissLife 8 years ago

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!

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

6
  1. Alex S Staff 8 years, 8 months ago

    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.

  2. WeissLife 8 years, 8 months ago

    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

  3. Alex S Staff 8 years, 8 months ago

    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.

  4. WeissLife 8 years, 8 months ago

    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

  5. Alex S Staff 8 years, 8 months ago

    Hi WeissLife,

    Please replace:

    /* Menu background */
#nav-topbar.nav-container {
	background: #fff;
}

    With:

    /* Menu background */
#header #nav-topbar.nav-container {
	background: #fff;
}
  6. WeissLife 8 years, 8 months ago

    Many many thanks Alex! this one works like a charm :)

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread