Change Mobile Navigation Menu Display on Median UI template

Tutorial on Changing the Display of Mobile Navigation Menu of Median UI
Source: jagodesain.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.

// Look for the code below:

]]></b:skin>

// In the AMP version look for this code:

/*]]>*/</style>

// Put this code right before the code above

@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}
}

// Here is an example of correctly placing the code

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