[Support request] Add text to slideout menu item

[Pontus]

Hello,

I want to replace the standard icon for the slideout menu to a text “Make a donation”, and, if possible, a FontAwesome heart. When the menu is open, I still want the “X” to be there in order to close the menu down.

(I’ve tried for a long time to do this myself but I am unable to do it. The font changes to “Times New Roman” and the text appears also when the menu is open (I want the standard “X” instead).)

Can you please give the CSS to add for this?

Thank you!

[Tom]

Hi there,

What if you did something like this?:

@media (min-width: 769px) {
    .slide-opened .slideout-exit::before, 
    .slideout-toggle a::before {
        content: "\f004";
        font-family: FontAwesome, Arial !important;
        line-height: 1em;
        text-align: center;
        display: inline-block;
    }

    .slideout-toggle a::after {
        content: "some text";
    }
}

[Pontus]

Tom, thank you very much! Looks beautiful. However, the “X” is not there to close down the menu, instead there’s the heart. Is it possible to fix this?

Because of my design with the gradient header with zero margin (if you look under “Om oss”) it’s sort of hard to make a nice a:hover effect. I’ve mad the font size larger during a:hover, is there a way for me to make that transition a bit animated? Perhaps using existing CSS from GeneratePress or Elementor? If you look under “Om oss” the submenu has this effect from Elementor.

Thank you very much, Tom!

Pontus

[David]

Hi there,

try removing this line including the comma from the CSS:

.slide-opened .slideout-exit::before,

[Pontus]

Worked like a charm, David.

Do you have any advice on my other question, regarding making the a:hover effect “transition” nicely? I think I’ll just go for making either the text a bit larger or underlining it, but I’d like it to transition like an animation. Hope you understand.

— Pontus

[David]

Hi there,

so you have this CSS at the moment which is scaling the entire menu item which changes the height of the Nav and isn’t too pretty:

.main-navigation .main-nav ul li.slideout-toggle a:hover {
        font-size: 1em;
}

How about instead of that we scale the Heart icon on hover?

[Pontus]

That sounds like a great idea! Thanks! Could you please give me the css for that so that the button has the same size? After that I think we’re all good! 🙂

[David]

Ok so lets try this:

Remove this CSS:

.main-navigation .main-nav ul li.slideout-toggle a:hover {
        font-size: 1em;
}

And then the code that Tom originally provided, swap that for this – don’t forget to up the content:

@media (min-width: 769px) {
    .slideout-toggle a::before {
        content: "\f004";
        font-family: FontAwesome, Arial !important;
        line-height: 1em;
        text-align: center;
        display: inline-block;
        transform: scale(1);
        margin-right: 0.5em;
        -webkit-transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
        transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }
    .slideout-toggle a::after {
        content: "some text";
    }
    .slideout-toggle:hover a:before {
        transform: scale(1.5);
    }
}

[Author]

Posts