Create Sticky Bottom Navbar using HTML and CSS

By Faraz - August 29, 2024

Learn how to create a sticky bottom navbar using HTML and CSS with this easy-to-follow guide.

Join us on Telegram

Read Also Designing a Modern Fitness App Interface with HTML and CSS.webp

Designing a Modern Fitness App Interface with HTML and CSS (Source Code)

Creating a sticky bottom navbar using HTML and CSS is a great way to enhance the user experience on your website. A sticky navbar stays at the bottom of the page even when you scroll, making it easy for users to navigate. In this guide, we’ll show you how to create a sticky bottom navbar step by step. This tutorial is perfect for beginners who want to learn basic web development skills.

Source Code

Step 1 (HTML Code):

Start by creating a simple HTML file. This will be the structure for your navbar. You can use any text editor, like Notepad or VSCode, to create the file.

Here’s an explanation of each part:

`<!DOCTYPE html>`

This is the document type declaration, which tells the browser that the document is an HTML5 document.

`<html lang="en">`

The <html> tag represents the root of the HTML document. The lang="en" attribute specifies that the language of the document is English.

`<head>`

The <head> element contains meta-information about the document, like the character encoding, title, and links to stylesheets.

`<meta charset="UTF-8" />`

This meta tag specifies the character encoding for the document, which is set to UTF-8, a standard encoding that supports most characters.

`<meta name="viewport" content="width=device-width, initial-scale=1.0" />`

This meta tag is used to control the page's dimensions and scaling on different devices. It ensures the page is responsive, making it look good on both mobile and desktop screens.

`<title>Sticky Bottom Navbar</title>`

The <title> element sets the title of the webpage, which is displayed in the browser tab.

`<link rel="stylesheet" href="https://fonts.googleapis.com/...">`

This link tag imports the "Poppins" font from Google Fonts, with various font weights (400, 500, 600, 700).

`<link rel="stylesheet" href="styles.css" />`

This link tag connects an external CSS file named styles.css to style the webpage. The CSS file should be in the same directory as the HTML file.

`<body>`

The <body> element contains all the content that will be displayed on the webpage.

`<div class="content_section">`

This <div> element is a container for the main content of the page. It has a class content_section which can be styled using CSS.

Content inside `<div class="content_section">`

The content includes an <h1> header and several paragraphs (<p>). The text inside the paragraphs is placeholder text, commonly known as "Lorem ipsum," used to simulate real content.

`<header class="navbar-container">`

This <header> element represents the navigation bar section. It has a class navbar-container which can be styled using CSS.

`<div class="nav_wrapper">`

This <div> is a wrapper for the navigation bar content.

`<div class="nav_section">`

This <div> is a container for the navigation section.

`<nav class="menu_items">`

The <nav> element contains the actual navigation menu items. It has a class menu_items for styling purposes.

`<div class="menu_item-wrapper">`

This <div> wraps around all the individual menu items.

Navigation Links

The navigation links (<a> elements) are used to create menu items like "Services," "About Us," "Support," "Resources," and "Blogs." These links currently do not point to any URL, as they use href="javascript:void(0)", which is a placeholder that prevents the link from doing anything when clicked.
Inside each link, there’s a <div> with the class menu_item-text that contains the text of the menu item. This structure allows for more flexible styling.

Closing Tags

The closing </nav>, </div>, </header>, and </body> tags close the respective elements, wrapping up the structure of the webpage.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sticky Bottom Navbar</title>
    <link rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap">
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="content_section">
      <h1>Welcome to Our Website</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
        imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae
        scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec
        congue eget, auctor vitae massa.
      </p>
      <p>
        Fusce ut placerat orci nulla pellentesque dignissim enim. Mauris blandit
        aliquet elit, eget tincidunt nibh pulvinar a. Vivamus magna justo,
        lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula
        sed magna dictum porta.
      </p>
      <p>
        Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Proin
        eget tortor risus. Proin eget tortor risus. Vivamus suscipit tortor eget
        felis porttitor volutpat.
      </p>
    </div>

    <header class="navbar-container">
      <div class="nav_wrapper">
        <div class="nav_section">
          <nav class="menu_items">
            <div class="menu_item-wrapper">
              <a href="javascript:void(0)" class="menu_item-link">
                <div class="menu_item-text">Services</div>
              </a>
              <a href="javascript:void(0)" class="menu_item-link">
                <div class="menu_item-text">About Us</div>
              </a>
              <a href="javascript:void(0)" class="menu_item-link">
                <div class="menu_item-text">Support</div>
              </a>
              <a href="javascript:void(0)" class="menu_item-link">
                <div class="menu_item-text">Resources</div>
              </a>
              <a href="javascript:void(0)" class="menu_item-link">
                <div class="menu_item-text">Blogs</div>
              </a>
            </div>
          </nav>
        </div>
      </div>
    </header>
  </body>
</html>

Read Also create a responsive customer review using HTML and CSS.webp

Create a Responsive Customer Review Using HTML and CSS

Step 2 (CSS Code):

Next, create a CSS file named styles.css and link it to your HTML file. In this CSS file, we'll add basic styles for the navbar and the content.

Here's a breakdown of each part:

`body`

body {
  height: 200vh;
  background-color: #f0f4f7;
  font-family: 'Poppins', Arial, sans-serif;
  color: #333;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

height: 200vh;: The body's height is set to 200% of the viewport height, making the page twice as tall as the screen.
background-color: #f0f4f7;: The background color is a light grayish blue (#f0f4f7).
font-family: 'Poppins', Arial, sans-serif;: The text on the page uses the "Poppins" font, with Arial and sans-serif as fallbacks.
color: #333;: The default text color is dark gray (#333).
margin: 0; padding: 0;: Both margin and padding are removed, making the content fill the entire viewport.
display: flex;: The body uses flexbox layout.
flex-direction: column;: Flexbox items are arranged in a column (top to bottom).
justify-content: space-between;: The space between flex items is evenly distributed, pushing the content section to the top and the navbar to the bottom.

`.navbar-container`

.navbar-container {
  z-index: 10;
  position: fixed;
  inset: auto 0% 0%;
}

z-index: 10;: This ensures the navbar stays on top of other elements with lower z-index values.
position: fixed;: The navbar is fixed in place, meaning it stays in the same position even when the page is scrolled.
inset: auto 0% 0%;: This shorthand property positions the element. It means "auto" for the top and bottom, "0%" for left and right, effectively sticking the navbar to the bottom of the page.

`.nav_wrapper`

.nav_wrapper {
  z-index: 1000;
  position: relative;
}

z-index: 1000;: This ensures that the wrapper is above almost everything else on the page.
position: relative;: The wrapper is positioned relative to its normal position, allowing for positioning adjustments if needed.

`.nav_section`

.nav_section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
}

display: flex;: Flexbox is used for layout.
justify-content: center;: The content within the nav section is centered horizontally.
align-items: center;: The items are centered vertically.
padding: 1rem 0;: There is padding of 1 rem (relative to font size) on the top and bottom, creating space around the content.

`.menu_items`

.menu_items {
  gap: 0.5rem;
  align-items: center;
}

gap: 0.5rem;: The gap between child elements (menu items) is 0.5 rem.
align-items: center;: Aligns menu items vertically at the center.

`.menu_item-wrapper`

.menu_item-wrapper {
  border: 2px solid #e3f1ff;
  background-color: #2e3c54;
  color: #e3f1ff;
  letter-spacing: 0.1px;
  border-radius: 1rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 400;
  display: flex;
  transition: background-color 0.3s;
}

border: 2px solid #e3f1ff;: A solid border with a light blue color (#e3f1ff).
background-color: #2e3c54;: The background color is a dark blue-gray (#2e3c54).
color: #e3f1ff;: The text color inside the wrapper is light blue.
letter-spacing: 0.1px;: Slightly increases the space between letters.
border-radius: 1rem;: The corners of the wrapper are rounded with a radius of 1 rem.
padding: 0.5rem 1rem;: Padding is 0.5 rem on top/bottom and 1 rem on the sides.
font-size: 1rem;: The font size is set to 1 rem.
font-weight: 400;: The font weight is normal (400).
display: flex;: Uses flexbox to arrange items within the wrapper.
transition: background-color 0.3s;: Smoothly transitions the background color over 0.3 seconds when it changes.

`.menu_item-link`

.menu_item-link {
  z-index: 2;
  border-radius: 0.75rem;
  align-items: center;
  padding: 0.75rem 1rem;
  font-weight: 500;
  transition: all 0.2s;
  display: flex;
  position: relative;
  text-decoration: none;
  color: inherit;
}

z-index: 2;: Ensures the link appears above other elements with a lower z-index.
border-radius: 0.75rem;: Rounds the corners of the link with a radius of 0.75 rem.
align-items: center;: Aligns items inside the link vertically at the center.
padding: 0.75rem 1rem;: Padding is 0.75 rem on top/bottom and 1 rem on the sides.
font-weight: 500;: Sets the font weight to medium (500).
transition: all 0.2s;: Applies a smooth transition effect to all properties over 0.2 seconds.
display: flex;: Uses flexbox to layout items within the link.
position: relative;: The link is positioned relative to its normal position, allowing for adjustment.
text-decoration: none;: Removes the underline from the link text.
color: inherit;: Inherits the text color from its parent element.

`.menu_item-link:hover`

.menu_item-link:hover {
  border-radius: 0.75rem;
  transform: translateY(-3px);
  color: #ffcc00;
}

border-radius: 0.75rem;: Maintains the border radius when hovered.
transform: translateY(-3px);: Moves the link up by 3 pixels when hovered, creating a "lift" effect.
color: #ffcc00;: Changes the text color to yellow (#ffcc00) when hovered.

`.content_section`

.content_section {
  padding: 2rem;
  flex: 1;
}

padding: 2rem;: Adds padding of 2 rem around the content section.
flex: 1;: Allows the content section to expand and fill the available space, pushing the footer/navbar to the bottom.

`.content_section h1`

.content_section h1 {
  font-size: 2.3rem;
  margin-bottom: 1rem;
}

font-size: 2.3rem;: Sets the font size of the <h1> element to 2.3 rem.
margin-bottom: 1rem;: Adds a bottom margin of 1 rem to separate the heading from the content below.

`.content_section p`

.content_section p {
  font-size: 1.2rem;
  line-height: 1.6;
}

font-size: 1.2rem;: Sets the font size of paragraphs to 1.2 rem.
line-height: 1.6;: Sets the line height to 1.6, improving readability by adding space between lines.

`.content_section p:last-of-type`

.content_section p:last-of-type {
  margin-bottom: 0;
}

margin-bottom: 0;: Removes the bottom margin from the last paragraph, preventing extra space after it.

body {
  height: 200vh;
  background-color: #f0f4f7;
  font-family: 'Poppins', Arial, sans-serif;
  color: #333;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.navbar-container {
  z-index: 10;
  position: fixed;
  inset: auto 0% 0%;
}

.nav_wrapper {
  z-index: 1000;
  position: relative;
}

.nav_section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
}

.menu_items {
  gap: 0.5rem;
  align-items: center;
}

.menu_item-wrapper {
  border: 2px solid #e3f1ff;
  background-color: #2e3c54;
  color: #e3f1ff;
  letter-spacing: 0.1px;
  border-radius: 1rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 400;
  display: flex;
  transition: background-color 0.3s;
}

.menu_item-link {
  z-index: 2;
  border-radius: 0.75rem;
  align-items: center;
  padding: 0.75rem 1rem;
  font-weight: 500;
  transition: all 0.2s;
  display: flex;
  position: relative;
  text-decoration: none;
  color: inherit;
}

.menu_item-link:hover {
  border-radius: 0.75rem;
  transform: translateY(-3px);
  color: #ffcc00;
}

.content_section {
  padding: 2rem;
  flex: 1;
}

.content_section h1 {
  font-size: 2.3rem;
  margin-bottom: 1rem;
}

.content_section p {
  font-size: 1.2rem;
  line-height: 1.6;
}

.content_section p:last-of-type {
  margin-bottom: 0;
}

Final Output:

Read Also Create Neumorphism Video Player using HTML, CSS, and JavaScript.webp

Create Neumorphism Video Player using HTML, CSS, and JavaScript (Source Code)

Conclusion:

Now you know how to create a sticky bottom navbar using HTML and CSS! This simple feature enhances navigation on your website, making it more user-friendly. With a few lines of code, you can add this essential element to your projects. Keep practicing and experimenting with different styles to improve your web development skills.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊