[Support request] Main menu slideout toggle menu-item customization

I must’ve done something wrong because I could not get that to work. Instead, I tried a couple of things and eventually this worked for me:

.slideout-toggle {
	background-color: #bb4430;
	color: #ffffff;
}
.slideout-exit::before, .slideout-toggle a::before {
    content: "\f004  Give a gift";
    font-family: FontAwesome, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1em;
    width: 7em;
    text-align: center;
    display: inline-block;
	color: #ffffff;
}

This makes the button stick out with a red background color. However, the red background color is the same as the menu’s hover color, and because the slide-out menu’s hover background color inherits from the menu, there is no hover-effect. I tried with this CSS, but without success:

.slideout-toggle ul li:hover {
	background-color: #000;
	color: #ffffff;
}

This should make the sticky navigation button’s background color to #000 when I hover it, but it remains the same red color as all the other menu item’s hover color. Hoping you can guide me through fixing this!

Thank you!

Sure, I can do that. But how do I add a custom class to the slideout navigation menu-item?

I created a menu-item called “toggle” with the class nav-button and the following CSS:

@media (min-width:769px) {
	.main-navigation.slideout-navigation .main-nav ul li.nav-button a {
        background-color: #ffffff;
        border: 2px solid #000000;
        color: #000000;
    }
}

Sorry, I don’t understand what I am doing wrong. I hope you can see by checking out the website. It’s just a normal menu-item; it doesn’t have its own background color, it’s not on the right, and it doesn’t toggle a slideout menu.

Just so that I am clear with what I want to accomplish: 1) I want to change the background color and the content of the slideout menu-item. 2) I also want the slideout menu-item to have it’s own a:hover color.¨

With the that I posted above, I succeed with 1) but not with 2).

Hi!

I think I might have been unclear, my apologies.

It is not the menu items in the slideout menu that I wish to change with CSS. It is the menu item that “toggles” the slideout menu, in other words the menu-item that the user will see all the time on the top right of the website. On my site, it’s the “<3 Ge en gåva”.

I’ve managed to change it to have a red background and “<3 Give a gift”. However, I am unable to give it its own hover color. Please see my CSS in previous post.

Thanks, that worked. But… I just updated the theme and now the CSS for the content of that button doesn’t work, So I would appreciate some assistance here. Before the update, this CSS worked to change the content of the menu-item and the font:

.slideout-exit::before, .slideout-toggle a::before {
    content: "\f004  Ge en gåva";
    font-family: FontAwesome, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1em;
    width: 7em;
    text-align: center;
    display: inline-block;
	

Before the update, \f004 displayed a FontAwesome heart, and the font-family was the same as on the rest of the theme. Now i see a weird icon and the font is Times New Roman.

So, how would I change the content of the slideout-toggle menu-item to “<3 Give a Gift” with font-family Arial?

Thanks Leo!