Notification texts go here Contact Us Buy Now!

Step by Step Change / Delete Mobile Navigation on Median UI Templates

Step by Step Change / Delete Mobile Navigation on Median UI Templates
Source: jagodesain.com

The mobile navigation menu display is made to make it easier for users to click important menus on the blog such as the navigation menu button, search button, dark mode button and other buttons

As we know the average user uses a smartphone using one hand and the thumb has difficulty reaching the top (header) on a page, that’s why the mobile navigation menu is moved to the bottom. This concept is also applied in several well-known applications such as Instagram , several mobile browsers , Pinterest , Youtube and so on

But for those of you who don’t like the appearance of the mobile navigation menu in this template and want to keep the sticky header on the mobile view, you can change and delete some of the CSS code below so that the navigation menu doesn’t appear:

All the CSS code below is present and added to the CSS section @media screen and (max-width: 640px) { , the code means that it is only active when the maximum screen width is 640px

First – return the sticky header

In the CSS code set @media screen and (max-width: 640px) { find the code below and change it according to the instructions:

.header{padding:0 20px;position:absolute;}

Delete the section of code marked "position: absolute;" so the code looks like this:

.header{padding:0 20px;}

The code above is to return the header back to sticky, next

Returns the navigation icon and adds a search icon to the header

In the post display the navigation icon is changed to a back button to the homepage , to change it, please find and delete the code collection below:

.singleItem .navicon .nav{display:none;transform: rotate(180deg);-webkit-transform: rotate(180deg)}
.singleItem .navicon .nav.home{display:block}
.singleItem .navicon .nav i:nth-child(1){width:45%;margin-left:55%;-webkit-transform:translateY(3px) rotate(40deg);transform:translateY(3px) rotate(40deg)}
.singleItem .navicon .nav i:nth-child(2){width:95%;margin-left:0%}
.singleItem .navicon .nav i:nth-child(3){width:10%;margin-left:62.5%;background-color:transparent;-webkit-transform:translateY(0px) rotate(-40deg);transform:translateY(0px) rotate(-40deg)}

So that the search button icon appears, please change (replace) the code above with the css code below:

.header .navicon .navSearch{display:block;}

Second – Hide the mobile navigation menu

This method does not permanently delete the mobile navigation code, but only hides it again. Search then delete the code below:

/* Navigation mobile show */
.navigation-mobile{background-color:#fefefe;box-shadow:0 -10px 20px 0 rgba(30,30,30,.05);bottom:0}
.navigation-mobile li{visibility:visible;opacity:1}
.navigation-mobile .top-link a{display:block;position:relative;right:auto;bottom:auto;width:auto;height:auto;background-color:transparent;box-shadow:none}

The second code to delete:
.dark-mode .navigation-mobile svg{fill:$(night.colors)}
.dark-mode .navigation-mobile svg.line, .dark-mode .navigation-mobile .top-link svg.line{fill:none;stroke:$(night.colors)}

Preview

Please save your template and see the results. For an example of its application you can open this post on your smartphone:

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.