Jump to content

Archived

This topic is now archived and is closed to further replies.

BeeTcore

[Solved] MegaNav - Close button

Recommended Posts

BeeTcore

Hello,

Pls Can there also be a X when the MegaNav menu opens on Mobile. The X will be to close the Menu.

Or what do you recommend? 

Share this post


Link to post
Share on other sites
Aires

Hi @BeeTcore,

It is going to take some css magic and some other tricks but it can be done.

  1. First thing we need to do is turn on css classes in the screen options.
  2. Next we need to create a custom menu item. You will notice that there is a place to enter classes now you need to add the class of mm-close and cls-btn. The class that does all the work is mm-close it will allow you to close the menu. the other class is what we will use to position the menu item.
  3. Add this for your (x) 
    <i class="pl-icon pl-icon-times"></i>

     

  4. If you have done everything correctly so far you should have something like the picture. 
  5. Visit the mobile version of your site and you should be bale to close the menu with that link.
  6. Now to get this link up and over to the right we are going to target it with the cls-btn.
.cls-btn {
    position: absolute;
    top: 0;
    right: 50px;
}

And that is pretty much it.

To hide the close menu on large screens be sure to include this.

@media (min-width:769px){
  .cls-btn {
  display: none!important;
  }

}

Enjoy!!

 

ice_screenshot_20170606-221806.png

ice_screenshot_20170606-222104.png


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
BeeTcore

Perfect. 
It works. 
 

Thank you :)

Share this post


Link to post
Share on other sites

×