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

Sinan Tektaş
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:

Yorumlar
Uyarı:
1.Yorum yaparken saygı çerçevesin'den çıkmayın
2.Küfür Hakaret Siyasi propaganda içerikli yorum yapmak yasaktır.
3. Her ne şekilde olursa olsun, özel iletişim bilgilerinizi paylaşmayın, fark edildiğinde kesinlikte silinecektir.