3

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

Works

Mobile Size Fails

Wont Stick

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><a href="checkout.html">Checkout</a></li>
                                            <li><a href="login.html">Sign in</a></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><a href="http://123globalelecronicsllc.com/en"><img src="images/1.jpg" alt=""> English</a></li>
                                            <li><a href="http://123globalelecronicsllc.com/sp"><img src="images/2.jpg" alt=""> Spanish</a></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>
                                        <a href="tel:+7276230753">+727-623-0753</a>
                                    </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">
                                                        <a href="cart.html"><img src="images/cart-1.jpg" alt="product"></a>
                                                        <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">
                                            <a href="checkout.html" class="main-btn">Send RFQ</a>
                                        </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">
                                        <a href="products.html?cat=semiconductor">Semiconductor </a>
                                       
                                    </li>
                                    <li class="menu-item">
                                        <a href="products.html?cat=semiconductor">Passives </a>
                                     
                                    </li>
                                    <li class="menu-item"><a href="products.html?cat=semiconductor">ElectroMechanical</a></li>
                                    <li class="menu-item"><a href="products.html?cat=semiconductor">Power & Circuit</a></li>
                                    <li class="menu-item"><a href="products.html?cat=semiconductor">Automation</a></li>
                                    <li class="menu-item"><a href="products.html?cat=semiconductor">Connectors</a></li>
                                    <li class="menu-item"><a href="products.html?cat=semiconductor">Cables & Wires</a></li>
                                    <li class="menu-item"><a href="products.html?cat=semiconductor">Test</a></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"><a href="index.html">Home </a>
                                    
                                    </li> <li class="position-static"><a href="products.html?cat=all">Products <i class="fal fa-chevron-down"></i></a>
                                        <ul class="mega-sub-menu d-flex flex-wrap">
                                            <li>
                                                <a class="menu-title" href="#">Shop Grid</a>
                                                <ul class="submenu-item">
                                                    <li><a href="shop-3-column.html">Shop Grid Column 3</a></li>
                                                    <li><a href="shop-4-column.html">Shop Grid Column 4</a></li>
                                                    <li><a href="shop-left-sidebar.html">Shop Grid left sidebar</a></li>
                                                    <li><a href="shop-right-sidebar.html">Shop Grid Right sidebar</a></li>
                                                </ul>
                                            </li>
                                            <li>
                                                <a class="menu-title" href="#">Shop List</a>
                                                <ul class="submenu-item">
                                                    <li><a href="shop-list.html">Shop List</a></li>
                                                    <li><a href="shop-list-left-sidebar.html">Shop List Left sidebar</a></li>
                                                    <li><a href="shop-list-right-sidebar.html">Shop List Right sidebar</a></li>
                                                </ul>
                                            </li>
                                            <li>
                                                <a class="menu-title" href="#">Shop Single</a>
                                                <ul class="submenu-item">
                                                    <li><a href="single-product.html">Shop Single</a></li>
                                                    <li><a href="single-product-variable.html">Shop Variable</a></li>
                                                    <li><a href="single-product-affiliate.html">Shop Affiliate</a></li>
                                                    <li><a href="single-product-group.html">Shop Group</a></li>
                                                    <li><a href="single-product-tabstyle2.html">Shop Tabs 2</a></li>
                                                    <li><a href="single-product-tabstyle3.html">Shop Tabs 3</a></li>
                                                </ul>
                                            </li>
                                            <li>
                                                <a class="menu-title" href="#">Shop Single</a>
                                                <ul class="submenu-item">
                                                    <li><a href="single-product-slider.html">Shop Slider</a></li>
                                                    <li><a href="single-product-gallery-left.html">Shop Gallery Left sidebar</a></li>
                                                    <li><a href="single-product-gallery-right.html">Shop Gallery Right sidebar</a></li>
                                                    <li><a href="single-product-sticky-left.html">Shop Sticky Left sidebar</a></li>
                                                    <li><a href="single-product-sticky-right.html">Shop Sticky Right sidebar</a></li>
                                                </ul>
                                            </li>
                                            <li class="custom-banner">
                                                <a href="shop-4-column.html"><img src="images/custom_banner.jpg" alt="" class="img-responsive"></a>
                                            </li>
                                        </ul>
                                    </li>
                                   
                                    <li><a href="#">Services <i class="fal fa-chevron-down"></i></a>
                                        <ul class="sub-menu">
                                            <li><a href="about.html">About</a></li>
                                           
                                        </ul>
                                    </li>
                                   
                                  
                                    <li><a href="#">Resources <i class="fal fa-chevron-down"></i></a>
                                        <ul class="sub-menu">
                                            <li><a href="#">BOM Upload Tool</a></li>
                                            <li><a href="#">Global Learning Lab</a></li>
                                            <li><a href="#">Product Advisor</a></li>
                                            <li><a href="#">Articles</a></li>
                                </ul>
                                    <li><a href="about.html">About</a></li>
                                    <li><a href="contact.html">Contact</a></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><a href="#">My account</a></li>
                                                <li><a href="#">Checkout</a></li>
                                                <li><a href="#">Sign in</a></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">
                                                            <a href="single-product.html"><img src="images/cart-1.jpg" alt="product"></a>
                                                            <span class="product-quantity">1x</span>
                                                        </div>
                                                        <div class="cart-item-content media-body">
                                                            <h5 class="product-name"><a href="single-product.html">New Balance Fresh Foam LAZR</a></h5>
                                                            <span class="product-price">€18.90</span>
                                                            <span class="product-color"><strong>Color:</strong> White</span>
                                                            <a href="#" class="product-close"><i class="fal fa-times"></i></a>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="single-cart-item d-flex">
                                                        <div class="cart-item-thumb">
                                                            <a href="single-product.html"><img src="images/cart-2.jpg" alt="product"></a>
                                                            <span class="product-quantity">3x</span>
                                                        </div>
                                                        <div class="cart-item-content media-body">
                                                            <h5 class="product-name"><a href="single-product.html">New Balance Fresh Foam LAZR</a></h5>
                                                            <span class="product-price">€18.90</span>
                                                            <span class="product-color"><strong>Color:</strong> White</span>
                                                            <a href="#" class="product-close"><i class="fal fa-times"></i></a>
                                                        </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">
                                                <a href="checkout.html" class="main-btn">Checkout</a>
                                            </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 &amp; Coats</option>
                                <option value="21">- - - - Sweaters</option>
                                <option value="22">- - - - Jeans</option>
                                <option value="23">- - - - Blouses &amp; 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><a href="compare.html"><i class="fal fa-repeat"></i> Compare (0)</a></li>
                        <h6 class="custom-title">Women is Clothes &amp; 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">
                                    <a href="#"><span>Outerwear & Jackets</span></a>
                                
                                        <li><a href="shop-left-sidebar.html">Bags & Cases</a></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.

3
  • 3
    Questions on Stack Overflow must be self-contained so you need to include all the relevant code, as external links can change or break over time and make the question unhelpful to other users. Please edit your question to include a minimal,reproducible example that also has the relevant HTML, so we can see what might be going wrong and be able to help. Aug 17, 2020 at 1:08
  • The problem is not in html rather than it has to do with js dom.i suggest you to write own templates so u can understand and edit them.
    – ino
    Aug 17, 2020 at 1:12
  • ok, posting the code here. @djangotic, as I stated, I inherited this project. The client wants this particular template.
    – John S.
    Aug 17, 2020 at 1:13

2 Answers 2

5

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;
}
2
  • This is a great solution to the mobile viewport. It doesn't cover the desktop version, but I see what you were doing. Thanks for helping, @sergey . I wonder, why the high z index though?
    – John S.
    Aug 17, 2020 at 2:26
  • I was glad to answer you :) In general, it is not necessary to set such a high z-index. This value was provided as an example. And by the way, the value 9999 is the highest. Aug 17, 2020 at 3:28
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:

Mobile header

3
  • YES! A couple tiny modifications and your code did it! Thanks. @media screen and (max-width: 600px) { /* Target only devices below 600px / .header-area { width: 100%; 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 */ } }
    – John S.
    Aug 17, 2020 at 2:18
  • May I ask, is it 'cheating" to simply bypass existing CSS rules, and at the bottom pop in an @media rule that may or may not override an existing rule? I ask that because, it did occur to me to add a new rule at the end (after adding a new classname) that would force the fixed position. I am referring to my idea, not your solution btw.
    – John S.
    Aug 17, 2020 at 2:22
  • It is not cheating but fixing our problem. This is a way to until you have a framework where they give you readymade utility classes to fix. Even then cheating is fine.
    – m4n0
    Aug 17, 2020 at 3:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.