Menu Bar BG CSS+

[LorSmi]

I have been trying to put in CSS in this section however when I click on SAVE SETTINGS, it doesn’t! I can save other items on that area (Main Options, Menus) but not that. I have other sites that I have used the same CSS for, and I just change the colors so I know that the CSS isn’t the problem.

What could be causing this?

Here is my CSS;

.mygradient {
background-image: -webkit-gradient(linear, left top, left bottom, from(#655a48), to(#c4b890));
background-image: -webkit-linear-gradient(top, #655a48, #c4b890);
background-image: -moz-linear-gradient(top, #655a48, #c4b890);
background-image: -o-linear-gradient(top, #b655a48 #c4b890);
background-image: -ms-linear-gradient(top, #655a48, #c4b890);
background-image: linear-gradient(to bottom, #655a48, #c4b890);
filter:prodig:DXImageTransform.Microsoft.gradient(startColorstr=’#655a48′,endColorstr=’#c4b890′);
}

[scrambler]

Your rule is made to style a class (.mygradient), so it should go into the Theme Global CSS Rule box, NOT the menu bar CSS+ box.

If you wish to apply the gradient using the CSS+ box, then you should use the primary Menu bar BG CSS+ box and only put the part of the rule with the Curly bracket like below, and without the class

{
background-image: -webkit-gradient(linear, left top, left bottom, from(#655a48), to(#c4b890));
background-image: -webkit-linear-gradient(top, #655a48, #c4b890);
background-image: -moz-linear-gradient(top, #655a48, #c4b890);
background-image: -o-linear-gradient(top, #b655a48 #c4b890);
background-image: -ms-linear-gradient(top, #655a48, #c4b890);
background-image: linear-gradient(to bottom, #655a48, #c4b890);
filter:prodig:DXImageTransform.Microsoft.gradient(startColorstr=’#655a48′,endColorstr=’#c4b890′);
}

In that case, you do not need to apply the mygradient class to the menu bar.

 

[LorSmi]

I did that however it still won’t save!

 

Here is the site on this one;

HOME

[scrambler]

What do you mean by wont save. Once you click save does the CSS disappear, or it stays but does not work?

If the CSS actually disappear when you save the options, then you may have a configuration issue.

Check all items in the article below

https://guide.weavertheme.com/settings-wont-save-from-customizer/

Also make sure you do not have any plugin that does CSS or JS optimization. These will usually break the theme

 

[LorSmi]

The CSS actually disappears.

I have 5 websites that I just recently migrated from Weaver II to Xtreme. (and I have Plus on all of them) This CSS worked on all of them except this one. The only difference is that the other 4 all had a background image, but this one only has a gradient background. I think the answer is somewhere in there but I don’t know where to look.

 

[scrambler]

test if any rule placed there disappear like

{color:red;}

if it does, try putting that rule in other CSS+ boxes and see if they disappear too.

If it does, see if when you change options and save, the changes are lost.

The content of the box should not disappear when saving regardless of what it is for…

[LorSmi]

Okay, I tried it, and it stayed there (   {color:red;}  ). I then tried mine again and after I hit save selections, yours (color red) was the only thing in the box. I guess something is wrong with my CSS but I don’t understand that since it worked for my previous 4 sites, with the only difference being the colors in the CSS.

 

Update:  {color:red;} is still in there and saved but when I visit site, the menu is black!

I will try to attach a screenshot. Okay, how do you insert an image that resides on your desktop?

 

[LorSmi]

Okay, this is the only way I could figure out how to share the screenshot

https://www.apsforestsolutions.com/home-2/test-page-for-image-viewing/

[scrambler]

That is weird, all I can think of is that when you copy paste, you are carrying some invisible character that screw things up.

Try this

Right Click inside the CSS+ Box and click Select All, then backspace to delete ALL content of the box (even if invisible)

Then copy the CSS below and paste it in your CSS+ box and save

{background-image: -webkit-gradient(linear, left top, left bottom, from(#655a48), to(#c4b890));
background-image: -webkit-linear-gradient(top, #655a48, #c4b890);
background-image: -moz-linear-gradient(top, #655a48, #c4b890);
background-image: -o-linear-gradient(top, #b655a48 #c4b890);
background-image: -ms-linear-gradient(top, #655a48, #c4b890);
background-image: linear-gradient(to bottom, #655a48, #c4b890);
filter:prodig:DXImageTransform.Microsoft.gradient(startColorstr='#655a48',endColorstr='#c4b890');}

That works for me

[LorSmi]

That worked! Thanks! But, select all on right was grayed out. I had backspaced until your command was gone. Maybe that was why.

[Author]

Posts