Tutorial on Changing the Display of Mobile Navigation Menu

Nulled Plugin
December 09, 2020
1


                                                                                                                                               Source: nulledplugin.blogspot.com


A little change in appearance for those of you who may not like the current mobile navigation menu, this change will not be visible on the desktop display.

If you open this article on a smartphone, the navigation menu will appear different from other pages. To apply this change, just add a little CSS code to the template, please follow the tutorial below:

Tutorial

Look for the code below in your template and add some of the code listed at the bottom

// Carilah kode dibawah ini:

]]></b:skin>

// Pada versi AMP carilah kode ini:

/*]]>*/</style>

// Letakan kode ini tepat sebelum kode diatas

@media screen and (max-width:640px){
  .navigation-mobile{margin: 0 10% 15px;border-radius: 25px;width: 80%;height: 45px;box-shadow: 0 6px 18px 0 rgba(9,32,76,.05)}
  .navigation-mobile svg{height: 18px}
  .navigation-mobile li.home-link{display: none}
  .navigation-menu .home{display: block}
}

// Berikut adalah contoh penempatan kode yang benar

@media screen and (max-width:640px){
  .navigation-mobile{margin: 0 10% 15px;border-radius: 25px;width: 80%;height: 45px;box-shadow: 0 6px 18px 0 rgba(9,32,76,.035)}
  .navigation-mobile svg{height: 18px}
  .navigation-mobile li.home-link{display: none}
  .navigation-menu .home{display: block}
}
  ]]></b:skin>

Save your template and see the difference