[Support request] Add text to slideout menu item

Home Forums Support [Support request] Add text to slideout menu item

Home Forums Support Add text to slideout menu item

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #688842
    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!

    GeneratePress 2.1.4
    #689068
    Tom
    Lead Developer
    Lead Developer

    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";
        }
    }
    #689193
    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

    #689240
    David
    Staff
    Customer Support

    Hi there,

    try removing this line including the comma from the CSS:

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

    #689259
    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

    #689287
    David
    Staff
    Customer Support

    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?

    #690827
    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! 🙂

    #690844
    David
    Staff
    Customer Support

    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);
        }
    }
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.