Plugin Contributor
alexgso
(@alexgso)
Hi lordvader,
Do you have a public URL where we can take a look at said menu item?
For reference, you can directly target a menu item via a standard WordPress CSS class applied to each menu item. Simply click the link and then make note of the menu item and write a selector for it. For example,
.menu-item-335 {
background: #fff;
}
Thread Starter
LV
(@lordvader)
I found the menu-item, but when I alter the code and past it into
SiteOrigin CSS it does not show up.
Also SiteOrigin CSS gives me some remarks that is expects
rbrace or a colon at a certain line.
Tried those, but didn’t work also.
Could it be that the default theme is blocking
my choice of colour/ design?
Regards,
Plugin Contributor
alexgso
(@alexgso)
Hi Lordvader,
Do you have a public URL where we can take a look at what’s going on?
Could you also send me the CSS you wrote as a response to my comment?
Thread Starter
LV
(@lordvader)
Hello alexgso,
I don’t have it yet on a public url.
I didn’t wrote the CSS, I’m trying to edit one
with SO CSS.
Is if select the main menu of origami theme I get
#menu ul li a {
}
So if I put your suggested code in it:
#menu ul li a {
.menu-item-1375 {
background: #ff0000;
}
“Where 1375 is the menu item and the
color #ff0000 ( red )”.
But it doesn’t work.
Regards,
Plugin Contributor
alexgso
(@alexgso)
Hi Lordvader,
Okay so that’s not valid CSS.
You’ll want to instead use:
.menu-item-1375 {
background: #ff0000;
}
CSS doesn’t support nesting selectors (remove #menu ul li a {). If the above doesn’t work, try:
.menu-item-1375 {
background: #ff0000 !important;
}
Thread Starter
LV
(@lordvader)
Hello alexgso,
Sorry for my late response.
This works fine, thank you!
When I select the option Text Color in SO CSS and
I change the font color with this other background
color it don´t show up.
Also when the background is not change is does not work either.
This is the code that I now have.
.menu-item-1375 {
background: #ff0000;
color: #ffffff;
}
Regards,
Plugin Contributor
alexgso
(@alexgso)
Hi lordvader,
That’s right, but it’s likely your theme is preventing that CSS from working as expected.
You could maybe force it by placing !important before the ;. For example:
.menu-item-1375 {
background: #ff0000 !important;
color: #ffffff !important;
}
Thread Starter
LV
(@lordvader)
Hello alexgso,
Too bad it didn’t work.
Strange, because the theme Origami is also from SiteOrigin.
I guess you can’t have it all.
Thanks for the support.
Regards,
Plugin Contributor
alexgso
(@alexgso)
Hi lordvader,
I just tried that CSS on Origami and it’s working as desired. Can you check the menu item id to ensure it’s the correct number?
Thread Starter
LV
(@lordvader)
Sorry for the delayed reply. Whit your suggestions I got it fixed.
Thanks.
Hey guys.
Newb here. So, I’m sorry of I’m doing something wrong. If I am, please tell me and I shall correct it.
I tried all the suggestions in this thread but I can’t change the menu item “Get Free Report Card” on http://www.sellmoreburgers.com.
I want it to be: #0ef411f
Thanks a lot for your help.
Plugin Contributor
alexgso
(@alexgso)
Hi Paul,
Use:
.banner .navigation .menu-item-282 a {
color: #0ef411;
}
Whoa!!! You made it look so simple.
Thanks a lot.
Hi, I use flatsome and siteorigin Css.
Tried all the above suggestions, but I can not get the text color change..(all the rest works)
I made custom class for my menu item too.
In every scenario I tested that I can change background and border.
I’m quite lost-.-
alexgso,
I added your code and it put the correct color on the specific menu item perfectly. But the color box it added is larger than the border of the menu item button being displayed on the screen.
Is there some other code I need to put in to custom size the color to make sure it stay within the border?
If you need the url let me know.
Thanks!
