- This topic has 4 replies, 2 voices, and was last updated 10 years, 4 months ago by
. This post has been viewed 1835 times
Viewing 5 posts - 1 through 5 (of 5 total)
-
Posts
-
Hopefully the mods do not mind this post, and if they do, I apologize. I needed a narrow sticky header for my needs and while I found the solution posted here on the forum at http://www.okler.net/forums/topic/how-to-make-the-menu-always-sticky/ I found a few issues with it. Namely, I was getting a js error when disabling the sticky menu, I could not change the gradient colors properly or use a top border any longer (the upper part of the header was being hidden from view), I noticed the height of the header would change when in collapsed mode, and the collapsed menu did not seem to work. These were just my experiences…
I ended up creating my own solution which seemed to solve the above for me. Top border shows and can be changed / gradient shows as expected due to a static height, collapsed menu works, everything lines up / is centered, etc. I thought I would post this in case other people were having trouble and/or perhaps something like this could be implemented as a new header option in a later version. Note that the header will always be sticky with this solution and will not position properly without tweaking this code if you want it to be static.
This is based off index-header-signin.html included with the template. This was simply the header option I liked and needed to modify.
Replace your the header contents :
<header id="header"> <div class="container custom-top"> <a href="index.html"> <img class="custom-logo" alt="Porto" width="82" height="40" src="img/logo.png"> </a> <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse"> <i class="fa fa-bars"></i> </button> </div> <div class="navbar-collapse nav-main-collapse collapse"> <div class="container"> <nav class="nav-main mega-menu"> <ul class="nav nav-pills nav-main" id="mainMenu"> <li class="dropdown active"> <a class="dropdown-toggle" href="#"> Home <i class="fa fa-angle-down"></i> </a> <ul class="dropdown-menu"> <li class="dropdown-submenu"> <a href="#">Sliders</a> <ul class="dropdown-menu"> <li><a href="index.html">Revolution Slider</a></li> <li><a href="index-slider-2.html">Nivo Slider</a></li> </ul> </li> <li><a href="index.html">Home - Default</a></li> <li><a href="index-2.html">Home - Color</a></li> <li><a href="index-3.html">Home - Light</a></li> <li><a href="index-4.html">Home - Video</a></li> <li><a href="index-5.html">Home - Video - Light</a></li> <li><a href="index-one-page.html">One Page Website</a></li> </ul> </li> <li> <a href="shortcodes.html">Shortcodes</a> </li> <li class="dropdown"> <a class="dropdown-toggle" href="#"> About Us <i class="fa fa-angle-down"></i> </a> <ul class="dropdown-menu"> <li><a href="about-us.html">About Us</a></li> <li><a href="about-us-basic.html">About Us - Basic</a></li> <li><a href="about-me.html">About Me</a></li> </ul> </li> <li class="dropdown mega-menu-item mega-menu-fullwidth"> <a class="dropdown-toggle" href="#"> Features <i class="fa fa-angle-down"></i> </a> <ul class="dropdown-menu"> <li> <div class="mega-menu-content"> <div class="row"> <div class="col-md-3"> <ul class="sub-menu"> <li> <span class="mega-menu-sub-title">Main Features</span> <ul class="sub-menu"> <li><a href="feature-pricing-tables.html">Pricing Tables</a></li> <li><a href="feature-icons.html">Icons</a></li> <li><a href="feature-animations.html">Animations</a></li> <li><a href="feature-typography.html">Typography</a></li> <li><a href="feature-grid-system.html">Grid System</a></li> </ul> </li> </ul> </div> <div class="col-md-3"> <ul class="sub-menu"> <li> <span class="mega-menu-sub-title">Headers</span> <ul class="sub-menu"> <li><a href="index-header-2.html">Header Version 2</a></li> <li><a href="index-header-3.html">Header Version 3</a></li> <li><a href="index-header-4.html">Header Version 4</a></li> <li><a href="index-header-5.html">Header Version 5</a></li> <li><a href="index-header-6.html">Header Version 6</a></li> <li><a href="index-header-7.html">Header Version 7 (Below Slider)</a></li> <li><a href="index-header-8.html">Header Version 8 (Full Video)</a></li> <li><a href="index-header-signin.html">Header - Sign In / Sign Up</a></li> <li><a href="index-header-logged.html">Header - Logged</a></li> </ul> </li> </ul> </div> <div class="col-md-3"> <ul class="sub-menu"> <li> <span class="mega-menu-sub-title">Footers</span> <ul class="sub-menu"> <li><a href="index.html#footer">Footer Version 1</a></li> <li><a href="index-footer-2.html#footer">Footer Version 2</a></li> <li><a href="index-footer-3.html#footer">Footer Version 3</a></li> <li><a href="index-footer-4.html#footer">Footer Version 4</a></li> </ul> </li> </ul> </div> <div class="col-md-3"> <ul class="sub-menu"> <li> <span class="mega-menu-sub-title">Admin Extension <em class="not-included">(Not Included)</em></span> <ul class="sub-menu"> <li><a href="feature-admin-forms-basic.html">Forms Basic</a></li> <li><a href="feature-admin-forms-advanced.html">Forms Advanced</a></li> <li><a href="feature-admin-forms-wizard.html">Forms Wizard</a></li> <li><a href="feature-admin-forms-code-editor.html">Code Editor</a></li> <li><a href="feature-admin-tables-advanced.html">Tables Advanced</a></li> <li><a href="feature-admin-tables-responsive.html">Tables Responsive</a></li> <li><a href="feature-admin-tables-editable.html">Tables Editable</a></li> <li><a href="feature-admin-tables-ajax.html">Tables Ajax</a></li> <li><a href="feature-admin-charts.html">Charts</a></li> </ul> </li> </ul> </div> </div> </div> </li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" href="#"> Portfolio <i class="fa fa-angle-down"></i> </a> <ul class="dropdown-menu"> <li><a href="portfolio-4-columns.html">4 Columns</a></li> <li><a href="portfolio-3-columns.html">3 Columns</a></li> <li><a href="portfolio-2-columns.html">2 Columns</a></li> <li><a href="portfolio-lightbox.html">Portfolio Lightbox</a></li> <li><a href="portfolio-timeline.html">Portfolio Timeline</a></li> <li><a href="portfolio-full-width.html">Portfolio Full Width</a></li> <li><a href="portfolio-single-project.html">Single Project</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" href="#"> Pages <i class="fa fa-angle-down"></i> </a> <ul class="dropdown-menu"> <li class="dropdown-submenu"> <a href="#">Shop</a> <ul class="dropdown-menu"> <li><a href="shop-full-width.html">Shop - Full Width</a></li> <li><a href="shop-sidebar.html">Shop - Sidebar</a></li> <li><a href="shop-product-full-width.html">Shop - Product Full Width</a></li> <li><a href="shop-product-sidebar.html">Shop - Product Sidebar</a></li> <li><a href="shop-cart.html">Shop - Cart</a></li> <li><a href="shop-login.html">Shop - Login</a></li> <li><a href="shop-checkout.html">Shop - Checkout</a></li> </ul> </li> <li class="dropdown-submenu"> <a href="#">Blog</a> <ul class="dropdown-menu"> <li><a href="blog-full-width.html">Blog Full Width</a></li> <li><a href="blog-large-image.html">Blog Large Image</a></li> <li><a href="blog-medium-image.html">Blog Medium Image</a></li> <li><a href="blog-timeline.html">Blog Timeline</a></li> <li><a href="blog-post.html">Single Post</a></li> </ul> </li> <li><a href="page-full-width.html">Full width</a></li> <li><a href="page-left-sidebar.html">Left sidebar</a></li> <li><a href="page-right-sidebar.html">Right sidebar</a></li> <li><a href="page-custom-header.html">Custom Header</a></li> <li><a href="page-404.html">404 Error</a></li> <li><a href="page-team.html">Team</a></li> <li><a href="page-services.html">Services</a></li> <li><a href="page-careers.html">Careers</a></li> <li><a href="page-faq.html">FAQ</a></li> <li><a href="page-login.html">Login / Register</a></li> <li><a href="sitemap.html">Sitemap</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" href="#"> Contact Us <i class="fa fa-angle-down"></i> </a> <ul class="dropdown-menu"> <li><a href="contact-us.html">Contact Us - Basic</a></li> <li><a href="contact-us-advanced.php">Contact Us - Advanced</a></li> </ul> </li> <li class="dropdown mega-menu-item mega-menu-signin signin" id="headerAccount"> <a class="dropdown-toggle" href="page-login.html"> <i class="fa fa-user"></i> Sign In <i class="fa fa-angle-down"></i> </a> <ul class="dropdown-menu"> <li> <div class="mega-menu-content"> <div class="row"> <div class="col-md-12"> <div class="signin-form"> <span class="mega-menu-sub-title">Sign In</span> <form action="" id="" method="post"> <div class="row"> <div class="form-group"> <div class="col-md-12"> <label>Username or E-mail Address</label> <input type="text" value="" class="form-control"> </div> </div> </div> <div class="row"> <div class="form-group"> <div class="col-md-12"> <a class="pull-right" id="headerRecover" href="#">(Lost Password?)</a> <label>Password</label> <input type="password" value="" class="form-control"> </div> </div> </div> <div class="row"> <div class="col-md-6"> <span class="remember-box checkbox"> <label for="rememberme"> <input type="checkbox" id="rememberme" name="rememberme">Remember Me </label> </span> </div> <div class="col-md-6"> <input type="submit" value="Login" class="btn btn-primary pull-right push-bottom" data-loading-text="Loading..."> </div> </div> </form> <p class="sign-up-info">Don't have an account yet? <a href="#" id="headerSignUp">Sign Up!</a></p> </div> <div class="signup-form"> <span class="mega-menu-sub-title">Create Account</span> <form action="" id="" method="post"> <div class="row"> <div class="form-group"> <div class="col-md-12"> <label>E-mail Address</label> <input type="text" value="" class="form-control input-lg"> </div> </div> </div> <div class="row"> <div class="form-group"> <div class="col-md-6"> <label>Password</label> <input type="password" value="" class="form-control input-lg"> </div> <div class="col-md-6"> <label>Re-enter Password</label> <input type="password" value="" class="form-control input-lg"> </div> </div> </div> <div class="row"> <div class="col-md-12"> <input type="submit" value="Create Account" class="btn btn-primary pull-right push-bottom" data-loading-text="Loading..."> </div> </div> </form> <p class="log-in-info">Already have an account? <a href="#" id="headerSignIn">Log In!</a></p> </div> <div class="recover-form"> <span class="mega-menu-sub-title">Reset My Password</span> <p>Complete the form below to receive an email with the authorization code needed to reset your password.</p> <form action="" id="" method="post"> <div class="row"> <div class="form-group"> <div class="col-md-12"> <label>E-mail Address</label> <input type="text" value="" class="form-control input-lg"> </div> </div> </div> <div class="row"> <div class="col-md-12"> <input type="submit" value="Submit" class="btn btn-primary pull-right push-bottom" data-loading-text="Loading..."> </div> </div> </form> <p class="log-in-info">Already have an account? <a href="#" id="headerRecoverCancel">Log In!</a></p> </div> </div> </div> </div> </li> </ul> </li> </ul> </nav> </div> </div> </header>add in your custom.css :
div.body { padding-top: 31px !important; } /* header changes */ #header { background: #f6f6f6; background: -webkit-linear-gradient( #f6f6f6, #ffffff); background: linear-gradient( #f6f6f6, #ffffff); clear: both; border-top: 5px solid #ededed; min-height: 70px; height: 70px; padding: 13px 0; } #header > .container { height: 70px; margin-bottom: 0px; position: relative; display: table; max-width: 1170px; } body.sticky-menu-active #header { top: 0; } /* custom header top */ #header .custom-top { height:0px !important; position:relative; } #header .custom-top .custom-logo{ position:absolute; } /* responsive */ @media (max-width: 991px) { /* nav button */ .btn-responsive-nav { background: none repeat scroll 0 0 #171717; color: #fff; display: block; position: absolute; right: 20px; top: 2px; z-index: 1; } #header .nav-main-collapse { top: 52px; position: relative; background: #171717; max-height: none; width: 100%; overflow: hidden; overflow-y: hidden; overflow-x: hidden; } } @media (max-width: 767px) { /* nav button */ .btn-responsive-nav { top: 2px; } body.sticky-menu-active .btn-responsive-nav { top: 2px; } }Was tested in latest FF, IE, Chrome, and Opera.
Original solution did not show up – http://www.okler.net/forums/topic/how-to-make-the-menu-always-sticky/
Hello @pongohops, thank you so much for sharing your solution, I tested it here too and worked great as well.
Kind Regards,
Jonas
Thanks for the kind words. I guess I am just looking for something a little ‘simpler’ than the current header options.
Viewing 5 posts - 1 through 5 (of 5 total)
This topic is marked as "RESOLVED" and can not rceive new replies.
