Header and footer not as clingy as advertised

I have created a basic bootstrap 4, flex page where the navigation and footer should be sticky, but for some reason they are not behaving as expected. I need help troubleshooting this issue:

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">


  <!-- <link href="css/style.css" rel="stylesheet"> -->
  <link href="site.webmanifest" rel="manifest">
  <link href="icon.png" rel="apple-touch-icon">

  <title>company</title>

  <style>
    html,
    body {
      height: 100%;
    }

    #page-content {
      flex: 1 0 auto;
    }

    #sticky-footer {
      flex-shrink: none;
    }

    /* Other Classes for Page Styling */

    body {
      background: #007bff;
      background: linear-gradient(to right, #0062E6, #33AEFF);
    }
  </style>
</head>

<body class="d-flex flex-column">

  <header>

    <div class="container">

      <nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top font-weight-light ">
        <div class="container">
          <a class="navbar-brand" href="/">Logo</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link" href="/">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">About us</a>
              </li>
            </ul>
            <ul class="navbar-nav ml-auto">
              <li class="nav-item dropdown">
                <a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
                  id="navbarDropdownMenuLink">Products</a>
                <div class="dropdown-menu">
                  <a href="#" class="dropdown-item">Product 1</a>
                  <a href="#" class="dropdown-item">Product 2</a>
                </div>
              </li>

              <li class="nav-item dropdown">
                <a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
                  id="navbarDropdownMenuLink">Services</a>
                <div class="dropdown-menu">
                  <a href="#" class="dropdown-item">Service 1</a>
                  <a href="#" class="dropdown-item">Service 2</a>
                </div>
              </li>

              <li class="nav-item">
                <a href="#" class="nav-link">Contacts</a>
              </li>
              <li class="nav-item">
                <a href="#" class="nav-link">Register</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>

    </div>

  </header>



  <div id="page-content">
    <div class="container text-center">
      <div class="row justify-content-center">
        <div class="col-md-7">
          <h1 class="font-weight-light mt-4 text-white">Sticky Footer using Flexbox</h1>
          <p class="lead text-white-50">Use just two Bootstrap 4 utility classes and three custom CSS rules and you will
            have a flexbox enabled sticky footer for your website!</p>
        </div>
      </div>
    </div>

    <div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam, urna a molestie ornare, ligula lorem tristique nisi, at tempor ante ipsum a turpis. Donec pellentesque aliquet mauris, et laoreet nibh laoreet ut. In a turpis id eros commodo laoreet...
      </p>
    </div>


  </div>

  <footer id="sticky-footer" class="py-4 bg-dark text-white-50">
    <div class="container text-center">
      <small>Copyright &copy; Your Website</small>
    </div>
  </footer>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
  </script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e1918e91918493cf8b92a1d0cfd0d7cfd1">[email protected]</a>/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
  </script>
</body class="d-flex flex-column">

</html>

Although I used the .sticky-top class, the top menu bar is not sticking as expected. Can anyone help me identify why both the top menu bar and footer in my simple webpage are not staying sticky?

htmlcsstwitter-bootstrapbootstrap-4flexbox

Answer №1

When implementing a sticky header, remember to apply the class to header rather than nav as shown below:

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">


  <!-- <link href="css/style.css" rel="stylesheet"> -->
  <link href="site.webmanifest" rel="manifest">
  <link href="icon.png" rel="apple-touch-icon">

  <title>company</title>

  <style>
    html,
    body {
      height: 100%;
    }

    #page-content {
      flex: 1 0 auto;
    }

    #sticky-footer {
      flex-shrink: none;
    }

    /* Other Classes for Page Styling */

    body {
      background: #007bff;
      background: linear-gradient(to right, #0062E6, #33AEFF);
    }
  </style>
</head>

<body class="d-flex flex-column">

  <header class="sticky-top ">

    <div class="container">

      <nav class="navbar navbar-expand-md navbar-dark bg-dark font-weight-light ">
        <div class="container">
          <a class="navbar-brand" href="/">Logo</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link" href="/">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">About us</a>
              </li>
            </ul>
            <ul class="navbar-nav ml-auto">
              <li class="nav-item dropdown">
                <a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
                  id="navbarDropdownMenuLink">Products</a>
                <div class="dropdown-menu">
                  <a href="#" class="dropdown-item">Product 1</a>
                  <a href="#" class="dropdown-item">Product 2</a>
                </div>
              </li>

              <li class="nav-item dropdown">
                <a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
                  id="navbarDropdownMenuLink">Services</a>
                <div class="dropdown-menu">
                  <a href="#" class="dropdown-item">Service 1</a>
                  <a href="#" class="dropdown-item">Service 2</a>
                </div>
              </li>

              <li class="nav-item">
                <a href="#" class="nav-link">Contacts</a>
              </li>
              <li class="nav-item">
                <a href="#" class="nav-link">Register</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>

    </div>

  </header>

  <div id="page-content">
    <div class="container text-center">
      <div class="row justify-content-center">
        <div class="col-md-7">
          <h1 class="font-weight-light mt-4 text-white">Sticky Footer using Flexbox</h1>
          <p class="lead text-white-50">Use just two Bootstrap 4 utility classes and three custom CSS rules to create a flexbox enabled sticky footer for your website!</p>
        </div>
      </div>
    </div>

    <div>
      <p>
        Unique content goes here.
      </p>
    </div>


  </div>

  <footer id="sticky-footer" class="py-4 bg-dark text-white-50">
    <div class="container text-center">
      <small>Copyright &copy; Your Website</small>
    </div>
  </footer>

  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
  </script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d4d524d4d584f13574e7d0c130c0b130d">[email protected]</a>/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
  </script>
</body class="d-flex flex-column">

</html>

While there isn't a sticky-bottom class available, you can find tutorials on setting up a sticky footer, like this one.

Answer №2

If you want an alternative solution, consider simply including the following CSS properties to make your footer sticky at the bottom: position: sticky; bottom: 0 within the <footer> tag

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">


  <!-- <link href="css/style.css" rel="stylesheet"> -->
  <link href="site.webmanifest" rel="manifest">
  <link href="icon.png" rel="apple-touch-icon">

  <title>company</title>

  <style>


    #sticky-footer {
      flex-shrink: none;
    }

    /* Other Classes for Page Styling */

    body {
      background: #007bff;
      background: linear-gradient(to right, #0062E6, #33AEFF);
    }
    #sticky-footer {
      position: sticky;
      bottom: 0;
    }
  </style>
</head>

<body class="d-flex flex-column">

  <header class="sticky-top">

    <div class="container">

      <nav class="navbar navbar-expand-md navbar-dark bg-dark font-weight-light ">
        <div class="container">
          <a class="navbar-brand" href="/">Logo</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link" href="/">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">About us</a>
              </li>
            </ul>
            <ul class="navbar-nav ml-auto">
              <li class="nav-item dropdown">
                <a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
                  id="navbarDropdownMenuLink">Products</a>
                <div class="dropdown-menu">
                  <a href="#" class="dropdown-item">Product 1</a>
                  <a href="#" class="dropdown-item">Product 2</a>
                </div>
              </li>

              <li class="nav-item dropdown">
                <a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
                  id="navbarDropdownMenuLink">Services</a>
                <div class="dropdown-menu">
                  <a href="#" class="dropdown-item">Service 1</a>
                  <a href="#" class="dropdown-item">Service 2</a>
                </div>
              </li>

              <li class="nav-item">
                <a href="#" class="nav-link">Contacts</a>
              </li>
              <li class="nav-item">
                <a href="#" class="nav-link">Register</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>

    </div>

  </header>


...


</footer>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
  </script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4c3c233c3c293e62263f0c7d627d7a627c">[email protected]</a>/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
  </script>
</body class="d-flex flex-column">

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to ensure the navbar expands to full width on smaller screens?

When viewed on mobile browsers, the navbar shifts to center alignment. I prefer it to be spread out as it is on larger viewports with the logo on the left and menu icon on the right. Is there a specific CSS class or method to achieve this design layout? h ...

bootstrap-4twitter-bootstrap-4

Applying dynamic CSS changes to HTML content using JavaScript

Here's the scenario: I am working with a select element in my HTML code, which includes many options. One of these options is "Other." What I aim to achieve is to display an input element right below the select element when I choose "Other," without ...

javascripthtmldynamichtml-select

Extracting text from a JSON file and populating text fields: A step-by-step guide

Utilizing this JSFIDDLE to duplicate text fields has been quite helpful. I am now looking to create JSON data based on the input from all the text fields. When it comes to updating a page, I need to extract the JSON data and accurately populate the corresp ...

javascriptjqueryhtmljson

The local HTTP server is having trouble establishing a connection with the Firebase user

Utilizing Visual Studio Code editor and a node js HTTP server, I have developed a simple login page and created a user in firebase. However, I encountered an issue with logging in using the username. The code for the webpage was written in HTML and bootstr ...

htmlnode.jsfirebasefirebase-authenticationsimplehttpserver

Element not found: {"method":"xpath","selector":"//*[@id='content container']

The error is occurring despite having the correct xpath in the code: Unable to locate element: {"method":"xpath","selector":"//*[@id='content column']... It seems like there might be multiple xpaths in the field. Here is the code snippet: dr ...

javahtmlxpathselenium-webdrivercss-selectors

Issue with Google Chart overlapping drop down menu in CSS紿orizontal scrollingyan

I've exhausted all my options. I've experimented with positioning and z-indexes, but no matter what I try, the drop-down menu remains hidden behind the google chart. It functions properly on Firefox, but not on Chrome or IE. Any helpful advice wo ...

htmlcsspositioningz-indexgoogle-visualization

The ul element is not being wrapped in a div tag for the header section

Struggling to create a transparent header for my website, I encountered an issue where the ul element is positioned below the div. Any solutions or advice would be greatly appreciated. Here's the code snippet: <!DOCTYPE html> <html lang="en" ...

htmlcssweb

What is the best way to incorporate the :after pseudo-element in JavaScript code

HTML: This is my current code snippet <div class="one"> Apple </div> I am looking to dynamically add the word "juice" using JavaScript with the .style property. Is there an equivalent of :: after in CSS, where I can set the content in JavaS ...

javascripthtml

What are the steps to enable the tab button feature?

Instead of using the ul and li tags, I have implemented three tabs with buttons. My goal is to automatically make the first button active or change its color to green. Despite using the active class in bootstrap, it does not seem to work as expected. How ...

cssvue.jsbootstrap-4

The lightbox is triggered by clicking on a different div to display its content

Great news - my lightbox is up and running! Each image on my website corresponds to a different organization, and clicking on the image opens a specific lightbox. My question is: how can I have a lightbox configured so that only the trigger image is displ ...

javascripthtmlcsslightbox2

Preventing Line Breaks in CSS Grid Autofil Experiment: A Guide

My journey in grasping the concepts of CSS Grid starts with this exploration. As you adjust the display width, observe how the text "Client code" switches between being displayed on one line and then breaking onto a new line repeatedly. .grid-container ...

htmlcsscss-grid

The main div on my website appears completely chaotic when viewed in IE versions 7 and 8

On my website, the main div appears floated left on some pages and right on others. In certain pages, it seems to be scattered all over in IE 7 and 8 - I didn't even bother checking in IE6. However, oddly enough, it displays perfectly in IE 6. I need ...

css

Steps to redirect to an external page after successful login, even if it's not hosted on the server

I have developed an HTML5 app on my phone. Once the correct username and password are entered, the app is supposed to connect to an external server, authenticate the credentials in the database, and then redirect me to another page (Home Page) within the a ...

javascriptphpjqueryajaxhtml

What is the best way to align various types of content within a div container

I'm struggling with aligning a label next to a checkbox in my HTML code using Vue.js. Here's how it looks: <div style="margin-bottom: 15px;"> <input id="newsletterRegister" type="checkbo ...

htmlcssvue.js

Troublesome button appearance

I set up two sections to gather user information using buttons. My goal is for the button styles to change when clicked, making it clear to users which option they have selected, even if they switch between sections. However, I encountered an issue where ...

javascripthtmlcss

Pictures are loading fine on a Chrome tab, but are showing a 403 error in the React code

I've been working on a React project that includes images using the img tag. Some of these images are failing to load with a 403 error: https://i.sstatic.net/AmgkF.png Interestingly, these same images load perfectly fine in another tab on Chrome: h ...

javascripthtmlreactjshttp-status-code-403

Utilize flex to position content at the bottom

My layout features a fixed header and footer, positioned at the top and bottom respectively. The content section in between fills the remaining space, with a scrollbar available if the content extends beyond the area. <div id="app"> <d ...

cssflexbox

Automate: Traverse hyperlinks within a div container

Is there a way to make Mechanize follow links (br.follow_link) that are located inside a specific div in the most pythonic way? I am familiar with using BeautifulSoup for this purpose, but can it be achieved solely with Mechanize? Here is an example of th ...

pythonhtmlmechanize

Tips for creating a header.php and footer.php integrated with CSS files

I am in the process of constructing my website using HTML files. I want to make sure that my header and footer sections are dynamic so I can easily modify them without having to update numerous files each time. While I've attempted a few methods based ...

phphtmlcssheaderfooter

Obscure all elements (images, text, divs, etc.) that appear after a div tag

Can you assist me with this issue? I have designed a static semi-opaque banner that remains at the top of a website. As the user scrolls through the website, all container objects move underneath the banner. I am looking to add a blurry effect to these ob ...

javascriptjquerycss