Addin X (close) to fade mobile menu on top

  • Resolved mwekierowca

    (@mwekierowca)


    3 months, 2 weeks ago

    Hello,
    I have a question about closing “X” in mobile menu. In pictures under you can see menu from one site where “X” is in mobile menu on the top. I would like to do that in my menu, but i cant find option where I can do so. I would like to make logo on the left top and X (close) on right top.

    Can anybody help me with that ?

    My current menu have opening toggle in the bottom bar, but i cant add this X button when mobile menu is opened.
    I will appreciate any help from you.

    https://ibb.co/GkR7n7P – this teh first one i would like to make my (logo on left, button to close on right)
    https://ibb.co/kKC5tcS – this is my current closed mobile
    https://ibb.co/w4PYsMX – this is my current opened mobile

    Thanks for your help !

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author megamenu

    (@megamenu)

    Hi,

    To add a close icon, go to Mega Menu > Menu Themes > Custom Styling and add the following:

    @include mobile {
    /* The next code block adds a close button to the slide in mobile menu, change color, font-size and use left or right to position it */
        #{$wrap} .mega-menu-toggle.mega-menu-open + #{$menu}:after {
            content: '\f158';
            font-family: 'dashicons';
            font-size: 30px;
            margin: 0;
            display: block;
    	right: 10px;
    	top: 0;
            cursor: pointer;
            color: white;
            position: absolute;
        }
    }

    Adding a logo is possible in the Pro version: https://www.megamenu.com/documentation/menu-logo/

    Regards,
    Tom

    Thread Starter mwekierowca

    (@mwekierowca)

    Thanks a lot ! That worked !

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