Cara Membuat Menu Navigasi Blog Keren Ala Igniplex Untuk Template Viomagz

Selanjutnya tempatkan kode CSS berikut ini tepat di atas tulisan /* SEARCH FORM */.

/*--- idnxmus navheader ---*/
.check {
   display:none;
}
.idnxmusNavigation label {
   cursor:pointer;
   display:block;
   padding:8px;
   background-position:center;
   transition:all .5s linear
;
}
.idnxmusNavigation .check:checked ~ .NavMenu {
   opacity:1;
   visibility:visible;
   top:45px;
   min-width:200px;
   transition:all .3s ease;
   z-index:2;
}
.idnxmusNavigation .NavMenu {
   opacity:0;
   visibility:hidden;
   position:absolute;
   right:0;
   top:0;
   background-color:#fff;
   color:#3c4043;
   box-shadow:0 5px 8px 0 rgba(0,0,0,.06);
   transition:all .3s ease;
}
.idnxmusNavigation .check:checked ~ .icon .open {
   display:none;
}
.idnxmusNavigation .icon .open {
   display:block;
}
.idnxmusNavigation {
   position:absolute;
   right:0;
   top:3px;
}
.idnxmusNavigation .icon .close {
   display:none;
}
.idnxmusNavigation .check:checked ~ .icon .close {
   display:block;
}
.idnxmusNavigation .NavMenu ul {
   margin:0;
   padding:0;
}
.idnxmusNavigation .NavMenu:before,.idnxmusNavigation .NavMenu:after {
   content:'';
   top:-5px;
   right:11px;
   border-color:transparent;
   border-bottom-color:#e6e6e6;
   border-style:dashed dashed solid;
   border-width:0 8.5px 8.5px;
   position:absolute;
   z-index:1;
   height:0;
   width:0;
}
.idnxmusNavigation .NavMenu:before {
   border-bottom-color:rgba(0,0,0,.25);
}
.idnxmusNavigation .NavMenu ul li.xprofil {
   background-color:#e6e6e6;
   display:-webkit-box;
   display:-webkit-flex;
   display:-moz-box;
   display:-ms-flexbox;
   display:flex;
   margin:0;
   align-items:center;
   padding:10px 16px;
   border-bottom:1px solid #fff;
}
.idnxmusNavigation .NavMenu ul li {
   list-style-type:none;
   transition:all .3s ease;
   margin:0;
}
.idnxmusNavigation .NavMenu img {
   max-width:50px;
   max-height:50px;
   border-radius:100px;
   border:1px solid #fff;
   margin:0;
}
.idnxmusNavigation .NavMenu ul li.xprofil ul {
   line-height:24px;
   margin-left:3px;
}
.idnxmusNavigation .NavMenu ul li.xprofil ul li.name {
   font-weight:700;
   font-size:17px;
   margin-bottom:5px;
}
.idnxmusNavigation .NavMenu ul li.xprofil ul li {
   padding:0;
   font-size:17px;
   line-height:normal;
   white-space:nowrap;
}
.idnxmusNavigation .NavMenu ul li.xprofil ul li.follow a {
   background-color:#4285F4;
   color:#fff;
   font-size:10px;
   padding:3px 7px;
   border-radius:25px;
   display:inline-block;
}
.idnxmusNavigation .NavMenu ul li a {
   color:#3c4043;
   display:block;
   padding:10px 16px;
   margin:0;
}
.idnxmusNavigation .NavMenu ul li a span {
   font-size:14px;
}
.idnxmusNavigation .NavMenu ul li.xprofil ul li.follow a:before {
   content:'';
   display:inline-block;
   width:15px;
   height:15px;
   margin-right:3px;
   margin-left:-3px;
   vertical-align:-4px;
   background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z' fill='%23fff'/%3E%3C/svg%3E") center no-repeat;
}
.idnxmusNavigation .NavMenu ul li:hover {
   background:#e6e6e6;
}
.idnxmusNavigation .NavMenu ul li.social {
   background-color:#e6e6e6;
   display:-webkit-box;
   display:-webkit-flex;
   display:-moz-box;
   display:-ms-flexbox;
   display:flex;
   justify-content:space-between;
   padding:0 15px;
   border-top:1px solid #fff;
}
.idnxmusNavigation .NavMenu ul li.social a {
   padding:15px 7px;
   z-index:1;
   position:relative;
}
.idnxmusNavigation .NavMenu ul li.social button {
   margin:0;
   font-size:unset;
}
.idnxmusNavigation label:hover {
   border-radius:100px;
   background:rgba(0,0,0,.2) radial-gradient(circle,transparent 2%,rgba(0,0,0,.2) 2%) center/15000%;
}
.idnxmusNavigation label:active {
   border-radius:100px;
   background-color:rgba(0,0,0,.1);
   background-size:100%;
   transition:background 0s;
}
.idnxmusNavigation .NavMenu ul li.xprofil ul li.follow a:hover {
   background-color:#ff9800;
}
.idnxmusNavigation .NavMenu ul li.social a:hover:before {
   content:'';
   position:absolute;
   z-index:-1;
   margin:auto;
   background:rgba(0,0,0,.1);
   border-radius:100px;
   width:36px;
   height:36px;
   top:0;
   bottom:0;
   left:0;
   right:0;
   transition:opacity .3s linear;
}
@media only screen and (max-width:480px) {
.idnxmusNavigation .NavMenu ul li a, .idnxmusNavigation .NavMenu ul li.xprofil {
   padding: 8px 13px;
}
}

Selanjutnya, cari kode berikut ini.

/* SEARCH FORM */
.search-icon {
   position: absolute;
   top: 11px;
   right: 0px;
   font-size: 19px;
}

Dan ganti dengan kode berikut ini.