How to make header sticky on mobile? - html

Question

The Goal
To make the header sticky when this responsive HTML5 template is resized to mobile phone dimensions.
The Problem
I cannot seem to find the correct element to add the CSS position property to. No matter what DIV I add the 'sticky' class to, it just won't stay fixed to the top of the screen.
In Action
Desktop Mode Works Fine
Mobile Size Fails
Failed Attempts
I have tried to attach a class, like this...
.makeSticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
...to every element even remotely close to the header. I just can't find the right one, and get it working.
Live
Here is the page running on a server: http://stpete.epizy.com/en/index.html
Code
<header class="header-area header-3">
<div class="desktop-nav d-none d-lg-block">
<div class="header-nav">
<div class="container-fluid custom-container">
<div class="header-nav-wrapper d-flex justify-content-between">
<div class="header-static-nav">
<p>Get FREE Shipping with <span class="text">$35!</span> Code: FREESHIPPING</p>
</div>
<div class="header-menu-nav">
<ul class="menu-nav">
<li>
<div class="dropdown">
<button type="button" id="setting" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Setting <i class="icon ion-chevron-down"></i></button>
<ul class="dropdown-menu" aria-labelledby="setting">
<li>Checkout</li>
<li>Sign in</li>
</ul>
</div>
</li>
<li>
<div class="dropdown">
<button type="button" id="langue" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="images/1.jpg" alt=""> English <i class="icon ion-chevron-down"></i></button>
<ul class="dropdown-menu" aria-labelledby="langue">
<li><img src="images/1.jpg" alt=""> English</li>
<li><img src="images/2.jpg" alt=""> Spanish</li>
</ul>
</div>
</li>
</ul>
</div> <!-- header menu nav -->
</div> <!-- header nav wrapper -->
</div> <!-- container -->
</div> <!-- header nav -->
<div class="header-middle">
<div class="container-fluid custom-container">
<div class="row">
<div class="col-lg-3">
<div class="header-logo-contact d-flex ">
<div class="desktop-logo">
<a href="index.html">
<img src="images/logo-white.png" alt="Global Eletronics, LLC">
</a>
</div> <!-- desktop logo -->
</div>
</div>
<div class="col-lg-9">
<div class="header-search-cart d-flex align-items-center">
<div class="header-contact d-flex align-items-center">
<i class="icon ion-ios-telephone-outline"></i>
<div class="phone media-body">
<p>24/7 Support</p>
[phone]
</div>
</div>
<div class="header-search media-body">
<form action="#">
<div class="search-category">
<select>
<option value="">All categories</option>
<option value="audio">Audio Parts</option>
<option value="accessories">- - Accessories</option>
<option value="buzzers">- - Buzzers</option>
<option value="batteries">Battery Products</option>
<option value="batteries">- - Primary Batteries</option>
</select>
</div>
<input id="search-box" type="text" placeholder="Part #">
<button><i class="icon ion-android-search"></i></button>
</form>
</div>
<div class="header-cart">
<div class="cart-btn">
<a href="cart.html">
<i class="icon ion-calculator"></i>
<span class="text">RFQ Parts :</span>
<span class="count">0</span>
</a>
</div>
<!--
<div class="mini-cart">
<ul class="cart-items">
<li>
<div class="single-cart-item d-flex">
<div class="cart-item-thumb">
<img src="images/cart-1.jpg" alt="product">
<span class="product-quantity">1x</span>
</div>
</div>
</li>
</ul>
<div class="price_content">
<div class="cart-subtotals">
</div>
<div class="cart-total price_inline">
<span class="label"># Items</span>
<span class="value">12</span>
</div>
</div>
<div class="checkout text-center">
Send RFQ
</div>
</div>
-->
</div>
</div> <!-- header search cart -->
</div>
</div> <!-- row -->
</div> <!-- container -->
</div> <!-- header middle -->
<div class="header-menu">
<div class="container-fluid custom-container">
<div class="row">
<div class="col-lg-3">
<div class="header-menu-vertical">
<h4 class="menu-title">
<span>Parts by</span>
Category
</h4>
<ul class="menu-content menu-expand">
<li class="menu-item">
Semiconductor
</li>
<li class="menu-item">
Passives
</li>
<li class="menu-item">ElectroMechanical</li>
<li class="menu-item">Power & Circuit</li>
<li class="menu-item">Automation</li>
<li class="menu-item">Connectors</li>
<li class="menu-item">Cables & Wires</li>
<li class="menu-item">Test</li>
</ul> <!-- menu content -->
</div> <!-- header menu vertical -->
</div>
<div class="col-lg-9 position-static">
<div class="header-horizontal-menu">
<ul class="menu-content">
<li class="active">Home
</li> <li class="position-static">Products <i class="fal fa-chevron-down"></i>
<ul class="mega-sub-menu d-flex flex-wrap">
<li>
<a class="menu-title" href="#">Shop Grid</a>
<ul class="submenu-item">
<li>Shop Grid Column 3</li>
<li>Shop Grid Column 4</li>
<li>Shop Grid left sidebar</li>
<li>Shop Grid Right sidebar</li>
</ul>
</li>
<li>
<a class="menu-title" href="#">Shop List</a>
<ul class="submenu-item">
<li>Shop List</li>
<li>Shop List Left sidebar</li>
<li>Shop List Right sidebar</li>
</ul>
</li>
<li>
<a class="menu-title" href="#">Shop Single</a>
<ul class="submenu-item">
<li>Shop Single</li>
<li>Shop Variable</li>
<li>Shop Affiliate</li>
<li>Shop Group</li>
<li>Shop Tabs 2</li>
<li>Shop Tabs 3</li>
</ul>
</li>
<li>
<a class="menu-title" href="#">Shop Single</a>
<ul class="submenu-item">
<li>Shop Slider</li>
<li>Shop Gallery Left sidebar</li>
<li>Shop Gallery Right sidebar</li>
<li>Shop Sticky Left sidebar</li>
<li>Shop Sticky Right sidebar</li>
</ul>
</li>
<li class="custom-banner">
<img src="images/custom_banner.jpg" alt="" class="img-responsive">
</li>
</ul>
</li>
<li>Services <i class="fal fa-chevron-down"></i>
<ul class="sub-menu">
<li>About</li>
</ul>
</li>
<li>Resources <i class="fal fa-chevron-down"></i>
<ul class="sub-menu">
<li>BOM Upload Tool</li>
<li>Global Learning Lab</li>
<li>Product Advisor</li>
<li>Articles</li>
</ul>
<li>About</li>
<li>Contact</li>
</ul>
</div> <!-- header horizontal menu -->
</div>
</div> <!-- row -->
</div> <!-- container -->
</div> <!-- header menu -->
</div> <!-- desktop nav -->
<div class="mobile-nav d-lg-none">
<div class="container-fluid">
<div class="mobile-nav-top">
<div class="row align-items-center">
<div class="col-sm-4 col-3">
<div class="mobile-toggle">
<a class="mobile-menu-open" href="javascript:;"><i class="fal fa-bars"></i></a>
</div>
</div>
<div class="col-sm-4 col-5">
<div class="mobile-logo text-center">
<a href="index.html">
<img src="images/logo-white.png" alt="Logo">
</a>
</div> <!-- mobile logo -->
</div>
<div class="col-sm-4 col-4">
<div class="mobile-account-cart">
<ul class="account-cart text-right">
<li>
<div class="dropdown">
<button type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fal fa-user"></i></button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li>My account</li>
<li>Checkout</li>
<li>Sign in</li>
</ul>
</div>
</li>
<li class="header-cart">
<a href="#">
<i class="fal fa-envelope-open-dollar"></i>
<span>0</span>
</a>
<div class="mini-cart">
<ul class="cart-items">
<li>
<div class="single-cart-item d-flex">
<div class="cart-item-thumb">
<img src="images/cart-1.jpg" alt="product">
<span class="product-quantity">1x</span>
</div>
<div class="cart-item-content media-body">
<h5 class="product-name">New Balance Fresh Foam LAZR</h5>
<span class="product-price">€18.90</span>
<span class="product-color"><strong>Color:</strong> White</span>
<i class="fal fa-times"></i>
</div>
</div>
</li>
<li>
<div class="single-cart-item d-flex">
<div class="cart-item-thumb">
<img src="images/cart-2.jpg" alt="product">
<span class="product-quantity">3x</span>
</div>
<div class="cart-item-content media-body">
<h5 class="product-name">New Balance Fresh Foam LAZR</h5>
<span class="product-price">€18.90</span>
<span class="product-color"><strong>Color:</strong> White</span>
<i class="fal fa-times"></i>
</div>
</div>
</li>
</ul>
<div class="price_content">
<div class="cart-subtotals">
<div class="products price_inline">
<span class="label">Subtotal</span>
<span class="value">€30.80</span>
</div>
<div class="shipping price_inline">
<span class="label">Shipping</span>
<span class="value">€7.00</span>
</div>
<div class="tax price_inline">
<span class="label">Taxes</span>
<span class="value">€0.00</span>
</div>
</div>
<div class="cart-total price_inline">
<span class="label">Total</span>
<span class="value">€37.80</span>
</div>
</div> <!-- price content -->
<div class="checkout text-center">
Checkout
</div>
</div> <!-- mini cart -->
</li>
</ul>
</div>
</div>
</div> <!-- row -->
</div> <!-- mobile nav top -->
<div class="header-search">
<form action="#">
<div class="search-category">
<select>
<option value="0">All categories</option>
<option value="12">Laptop</option>
<option value="13">- - Hot Categories</option>
<option value="19">- - - - Dresses</option>
<option value="20">- - - - Jackets & Coats</option>
<option value="21">- - - - Sweaters</option>
<option value="22">- - - - Jeans</option>
<option value="23">- - - - Blouses & Shirts</option>
</select>
</div>
<input type="text" placeholder="Enter your search key ... ">
<button><i class="icon ion-android-search"></i></button>
</form>
</div>
</div> <!-- container -->
<div class="mobile-off-canvas-menu">
<div class="mobile-canvas-menu-top">
<ul class="menu-nav">
<li><i class="fal fa-repeat"></i> Compare (0)</li>
<h6 class="custom-title">Women is Clothes & Fashion</h6>
<p>Shop women is clothing and accessories and get inspired by the latest fashion trends.</p>
</div>
</div>
<div class="col-lg-4 col-md-12">
<div class="menu-block">
<h6 class="custom-title">Simple Style</h6>
<p>A new flattering style with all the comfort of our linen.</p>
</div>
</div>
<div class="col-lg-4 col-md-12">
<div class="menu-block">
</ul>
</li>
<li class="menu-item-has-children">
<span>Outerwear & Jackets</span>
<li>Bags & Cases</li>
</ul> <!-- menu content -->
</div> <!-- mobile main menu -->
</div> <!-- mobile off canvas menu -->
<div class="overlay"></div>
</div> <!-- mobile nav -->
</header>
CSS
/*===== header 3 =====*/
.header-3 {
background-color: #1c2454; }
.header-3 .header-nav {
background-color: #000;
border-bottom: 0; }
.header-3 .header-nav .header-nav-wrapper .header-static-nav p {
color: #fff; }
.header-3 .header-nav .header-nav-wrapper .header-static-nav p .text {
color: #fff; }
.header-3 .header-nav .header-nav-wrapper .header-menu-nav .menu-nav li + li {
margin-left: 30px; }
#media only screen and (min-width: 992px) and (max-width: 1199px) {
.header-3 .header-nav .header-nav-wrapper .header-menu-nav .menu-nav li + li {
margin-left: 20px; } }
.header-3 .header-nav .header-nav-wrapper .header-menu-nav .menu-nav li + li::before {
color: rgba(255, 255, 255, 0.4); }
.header-3 .header-nav .header-nav-wrapper .header-menu-nav .menu-nav li a {
color: #fff; }
.header-3 .header-nav .header-nav-wrapper .header-menu-nav .menu-nav li .dropdown button {
color: #fff; }
.header-3 .header-contact i {
color: #fff; }
.header-3 .header-contact .phone p {
color: #fff; }
.header-3 .mobile-toggle a {
color: #fff; }
.header-3 .mobile-account-cart .account-cart li .dropdown button {
color: #fff; }
.header-3 .mobile-account-cart .account-cart li .dropdown button i {
font-size: 24px; }
.header-3 .mobile-account-cart .account-cart li a {
color: #fff; }
.header-3 .header-menu {
background-color: #1c2454;
border-top: 1px solid rgba(255, 255, 255, 0.4); }
.header-3 .header-menu.sticky {
border-top: 0; }
I inherited this project, and the HTML was purchased from some template company. I didn't write the HTML - so any help would be greatly appreciated.
Thank you.

Answer 1

The sticky position needs space, and for that to work, the .header-area class needs to be sticky. Only add this rule to your media query! I just tried it, and sticky position worked like this:
.header-area {
position: sticky;
top: 0;
z-index: 9999;
}

Answer 2

You need to specify position: fixed to mobile navigation. The desktop nav has the same property but also has a custom animation sticky. You may also want to adjust the element below it because the menu is now fixed.
#media and (max-width: 600px) { /* Target only devices below 600px */
.header-area {
position: fixed;
z-index: 999; /* So that it is not under the other elements */
background: #1c2454; /* It was transparent */
}
.slider-area {
top: 85px; /* Can change according to your liking */
}
}
Output: