Why am I seeing a different Preview than when I save my changes?

[ghangiskan]

Hi,

I am trying to make the last link in the navigation appear as a red button. To do so, I've added the following in the Header html file:

<style>
  .wsite-menu-item-wrap.wsite-nav-7 {
    background-color: #FF0000;
    color: #FFFFFF;
   }
</style>

I am seeing the following in the HTML/CSS Previewer:
However, when I save the changes, this is what I see in the WYSIWYG:

Not sure if anyone can help me with a better way to make that last navigation item look like a red button, or if anyone knows why I'm seeing a difference between the previews.

Thanks!

[PaulMathews · Accepted solution]

@ghangiskan In some cases, class styling (particularly for navigation elements) is loaded dynamically by Weebly and this occurs after the loading of the site css file and header zone css. What this means is that, if you specify styling for a class in the css file or header zone, that styling may be overridden by the dynamically-loaded settings. You can see this by doing a code inspection on the front end of the element(s) in question. Dynamically-loaded css will have a source that looks something like "site.css...." rather than something like "main_style..."

To have your css not be overridden by Weebly's css, you'll need to use the "!important" qualifier on the class attributes that are being overridden (Weebly's dynamically-loaded code typically doesn't use that qualifier so you can override their attribute settings). So, in your case, it appears that the background color and font color are being overridden on the front end. To prevent this, modify your code as follows:

<style>
  .wsite-menu-item-wrap.wsite-nav-7 {
    background-color: #ff0000!important;
    color: #ffffff!important;
   }
</style>