Menu - by Nuno Pereira - on WordPress WooCommerce support

This topic has 3 replies, 2 voices, and was last updated 5 years, 2 months ago ago by Nuno Pereira

  • Avatar: Nuno Pereira
    Nuno Pereira
    Participant
    October 7, 2020 at 12:49

    Hi,

    I´m currently developing a website for a client: https://redhouserh.hbi.pt/

    I´ve successfully made my mega menu full width, thanks to a code you guys sent me: https://ibb.co/HHQcD8F

    But i need to apply the same style to the other dropdown menu: https://ibb.co/C0FpQ30

    How can I do this? Also, my client wants the background color to be black when people hover over the menu like the one on the gucci website: https://www.gucci.com/pt/en_gb/

    Right now, the menu in normal mode has a background overlay to achieve the same effect as the gucci menu. Is it possible to add a shadow background color to the menu and change the background color to black when hovering it? Like the on the Gucci website.

    One last thing, how can I delete the last space between the content and the footer in elementor? See image here: https://ibb.co/vkD2vYk

    2 Answers
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    October 7, 2020 at 16:13

    Hello,

    1) Do you want to make simple drop-down also full width?
    Then replace the previous code by the following one

    .item-design-mega-menu, .item-design-dropdown {
        position: static;
    }
    .header-top,.header-main,.header-bottom {
        position: static
    }
    .item-design-mega-menu .nav-sublist-dropdown , .item-design-dropdown .nav-sublist-dropdown {
        left: 0 !important;
        margin: 0 !important;
        width: 100% !important
    }
    .item-design-mega-menu .nav-sublist-dropdown:before, .item-design-dropdown .nav-sublist-dropdown:before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        height: 40px;
        bottom: 100%
    }

    2) Add the following custom to add bg color on hover

    .header-main-wrapper:hover {
        background-color: #25211e;
    }

    3) Add the below custom to page custom CSS https://gyazo.com/37199388bcd5a40e7ed6c5303e57b174
    .content-page{
    padding-bottom: 5.65em;
    }

    Regards

    Avatar: Nuno Pereira
    Nuno Pereira
    Participant
    October 7, 2020 at 16:31

    Awesome! Thank you.

  • Viewing 3 results - 1 through 3 (of 3 total)

The issue related to '‘Menu’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.