Hueman Sticky Menu - WordPress Guide by Android Blog India

Views:
 
Category: Entertainment
     
 

Presentation Description

No description available.

Comments

Presentation Transcript

Slide1:

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%; z-index: 999; } .full- width.admin -bar # nav - topbar.nav -container { top: 32px; } }          

Slide2:

@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%; z-index: 999; } .full- width.admin -bar # nav - topbar.nav -container { top: 32px; } }

Slide3:

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%; z-index: 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%; z-index: 999; } .full- width.admin -bar # nav - topbar.nav -container { top: 32px; } }

Slide4:

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

Slide5:

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

Slide6:

Header.php <div class=" nav -text"><a href ="http://androidblog.xyz"><img src ="http://androidblog.xyz/wp-content/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  

Slide7:

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>

Slide8:

In Head <script type="text/ javascript "> jQuery(window).load(function () { jQuery('#loading').hide(); }); </script>   http://androidblog.xyz/wordpress-guide-series/

authorStream Live Help