Hueman Sticky Menu - WordPress Guide by Android Blog India
@media only screen and (min-width: 720px) { /* fixed nav */ .full-width.topbar-enabled #header { padding-top: 50px; } .full-width #nav-topbar.nav-container { position: fixed; top: 0; left: 0; right: 0; width: 100%; zindex: 999; } .full-width.admin-bar #nav-topbar.nav-container { top: 32px; } }
@media only screen and (max-width: 719px) { /* fixed nav */ .full-width.topbar-enabled #header { padding-top: 50px; } .full-width #nav-topbar.nav-container { position: fixed; top: 0; left: 0; right: 0; width: 100%; zindex: 999; } .full-width.admin-bar #nav-topbar.nav-container { top: 32px; } }
Kontrast Sticky Menu & Hueman Sticky Menu 3.1.6
/* Hueman sticky top bar menu by androidBLOG */ @media only screen and (min-width: 1025px) { /* fixed nav */ .full-width.topbar-enabled #header { padding-top: 42px; } .full-width #nav-topbar.nav-container { position: fixed; top: 0; left: 0; right: 0; width: 100%; zindex: 999; } .full-width.admin-bar #nav-topbar.nav-container { top: 32px; } }
@media only screen and (max-width: 1024px) {
/* fixed nav */ .full-width.topbar-enabled #header { padding-top: 42px; } .full-width #nav-topbar.nav-container { position: fixed; top: 0; left: 0; right: 0; width: 100%; zindex: 999; } .full-width.admin-bar #nav-topbar.nav-container { top: 32px; } }
Menu Icon <i class="fa fa-home fa-lg" style=color:#26abd3; aria-hidden="true"></i> Home
Topbar Font Bright #nav-topbar .nav-text { color: #555; }
Hueman - Hide Banner & Set Image to Top bar
@media only screen and (max-width: 719px) { #header .site-title { display:none; } }
@media only screen and (max-width: 719px) { #nav-topbar .nav-text { display: block; width: 200px; margin: 0 0 0 -95px; padding: 0px 0; position: absolute;
left: 50%; } }
Header.php <div class="nav-text"><a href="http://androidblog.xyz"><img src="http://androidblog.xyz/wpcontent/uploads/2016/06/ab-mobile-logo4.png" width="190" height="60"></a></div> 240x60 png for Hueman 240x50 png for Kontrast http://wp-guide.xyz/wp-content/uploads/2016/07/wp-guide-mobile.png
Loading Effect
Custom Style Sheet #loading { top: 300px; width: 100%; height: 100%; position: fixed; z-index: 999; text-align:center; }
Header.php In Body <div id="loading"> <i class="fa fa-refresh fa-spin fa-3x fa-fw" style=color:#26abd3;"></i> <span class="sr-only"></span> </div>
In Head
<script type="text/javascript"> jQuery(window).load(function () { jQuery('#loading').hide(); }); </script>
http://androidblog.xyz/wordpress-guide-series/