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

Home Forums Support Main menu slideout toggle menu-item customization

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #544528
    Pontus

    Hi!

    I am working for a charity organisation and we have different ways for people to donate to us. I want to have a slideout menu with all alternatives and I want the menu-item for the slideout menu to stick out a lot, to encourage people to press it.

    How do I change the CSS to make that menu-item have a different background color, border, different text color? Also, I want it to have a font-awesome icon and then text ([heart] Make a donation).

    Thanks in advance,

    Pontus

    GeneratePress 2.0.2
    #544853
    Leo
    Staff
    Customer Support

    Hi there,

    Try this method here: https://docs.generatepress.com/article/adding-buttons-navigation/

    and replace this line:
    .main-navigation .main-nav ul li.nav-button a
    with this line:
    .main-navigation.slideout-navigation .main-nav ul li.nav-button a

    Your site is also not loading for me so if you need additional help on this please double check so I can see 🙂

    #562978
    Pontus

    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!

    #563164
    Leo
    Staff
    Customer Support

    Hmm my method should work.

    Can you reapply it so I can see what’s wrong?

    #563167
    Pontus

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

    #563172
    Leo
    Staff
    Customer Support
    #563314
    Pontus

    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).

    #563343
    Leo
    Staff
    Customer Support

    What do you mean by “it doesn’t toggle a slideout menu”?

    Your CSS above is working to me: http://www.screencast.com/t/6liGJmI9F

    This would be your full CSS if you want to change the hover color as well:

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

    Let me know 🙂

    #563552
    Pontus

    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.

    #563718
    Leo
    Staff
    Customer Support

    Ahh I see.

    Try this CSS for both background and background hover:

    @media (min-width:769px) {
        .main-navigation .main-nav ul li.slideout-toggle a {
            background-color: #bb4430;
        .main-navigation .main-nav ul li.slideout-toggle a:hover {
            background-color: #000;
        }
    }
    #566234
    Pontus

    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!

    #566582
    Leo
    Staff
    Customer Support

    Ahh we’ve removed FontAwesome in order to optimize the theme and make it fast 🙂

    See the first paragraph here for explanation and solution: https://generatepress.com/generatepress-2-1/

    Let me know.

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.