How to Create a Simple HTML Page with a Floating Navbar

Simple HTML Page with a Floating Navbar

New floating navigation bar or fixed navigation bar Navigation links appear as users navigate your site. This simpler, more powerful resource improves usability and user experience. In this guide, I’ll walk you through the process of creating a simple HTML page with a flowing navigation bar. Complete with examples and responsive design guidelines.

Table Of Contents
  1. Vital Objectives of a Floating Navbar
  2. Getting Started: Basic Structure
  3. Code & Preview
  4. Conclusion

Vital Objectives of a Floating Navbar

The use of fluctuating navigation bars serves several important purposes:

  1. Fast navigation: Helps ensure important links remain accessible. Reduce user discomfort
  2. Ability to respond quickly: Adapts gently to different devices.
  3. Better user retention: Encourage users to explore more pages and reduce rejection rates.
  4. SEO Benefits: Helps you achieve user-friendly design. This results in better classification.

Getting Started: Basic Structure

HTML Template

Here’s the essential HTML for your project:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>html page floting navbar</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.2.0/remixicon.css"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- navbar -->
    <nav class="navigation">
      <a href="#" class="site__name">logo</a>
      <ul id="navigation-ul">
        <li><a href="#">home</a></li>
        <li><a href="#">about</a></li>
        <li><a href="#">services</a></li>
        <li><a href="#">blog</a></li>
        <li><a href="#">contact</a></li>
      </ul>
      <div id="toggle-btn" class="toggle__btn">
        <i class="ri-menu-line"></i>
        <span>menu</span>
      </div>
    </nav>

    <!-- banner section -->
     <section class="banner">
        <div>
            <h1>simple html page with <br> floating navbar</h1>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil in dolor laborum consectetur? <br> Enim, corporis. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus laudantium, incidunt ducimus hic illo sed.</p>
            <button>learn more</button>
        </div>
     </section>

    <!-- about section -->
    <section class="about__section">
      <div class="section__header">
        <h2>about</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo,
          <br />
          quasi eveniet! Delectus officia ipsum molestias.
        </p>
      </div>

      <div class="about__content">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </section>

    <!-- service section -->
    <section class="service__section">
      <div class="section__header">
        <h2>service</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo,
          <br />
          quasi eveniet! Delectus officia ipsum molestias.
        </p>
      </div>

      <div class="service__content">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </section>

    <!-- blog section -->
    <section class="blog__section">
      <div class="section__header">
        <h2>blog</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo,
          <br />
          quasi eveniet! Delectus officia ipsum molestias.
        </p>
      </div>

      <div class="blog__content">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </section>

    <!--* ================================ FOOTER SECTION ================================ -->
    <footer class="footer">
      <section class="copy__right">
        <div class="copy__right__inner">
          <p>Copy©right 2024 | SyntaxMart all right reserved</p>
          <ul>
            <li><a href="#">trems</a></li>
            <li><a href="#">privacy policy</a></li>
            <li><a href="#">compliances</a></li>
          </ul>
        </div>
      </section>
    </footer>

    <!-- javascript link -->
    <script src="script.js"></script>
  </body>
</html>

CSS Code

@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");

:root {
  --sixty-percent-clr: #f8f9fa;
  --thirty-percent-clr: #563a9c;
  --ten-percent-clr: #ff7d00;
  --pure-white-clr: #ffffff;
  --section-py: 70px;
  --section-px: 100px;
  --nav-line-height: 70px;
  --section-width-80: clamp(350px, 80%, 100vw);
  --section-width-90: clamp(350px, 90%, 100vw);
}

* {
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-family: "Jost", sans-serif;
}

html {
  scroll-behavior: smooth;
  height: 100%;
}

body {
  max-width: 100vw;
  position: relative;
  background-color: #ebeaff;
}

body::-webkit-scrollbar {
  width: 5px;
}

body::-webkit-scrollbar-thumb {
  background-color: var(--sixty-percent-clr);
  height: auto;
}

h2,
h3,
h4,
h5 {
  font-family: "Kanit", sans-serif;
  text-transform: capitalize;
}

h1,
h2,
h3 {
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: capitalize;
}

h4,
h5 {
  font-weight: 600;
}

a,
span,
li {
  text-transform: capitalize;
  font-family: "Kanit", sans-serif;
  font-size: 1rem;
}

.section__header {
  text-align: center;
  padding-block: 35px;
}

.section__header h2 {
  font-size: clamp(1.5rem, 2.5rem, 3rem);
  color: var(--thirty-percent-clr);
}

.section__header p {
  font-size: 1.2rem;
  color: var(--thirty-percent-clr);
}

/**  ================================ NAVIGATION BAR ================================ */
.navigation {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: var(--section-width-80);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--thirty-percent-clr);
  padding-inline: 3.125rem;
  line-height: 80px;
  z-index: 100;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.navigation .site__name {
  font-size: calc(0.8rem + 1vw);
  font-weight: 700;
  color: var(--ten-percent-clr);
}

.navigation ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.navigation ul li a {
  display: inline-block;
  color: var(--sixty-percent-clr);
  padding-inline: 15px;
  transition: 400ms;
}

.navigation ul li a:hover {
  color: var(--ten-percent-clr);
}

.toggle__btn {
  background-color: var(--ten-percent-clr);
  color: var(--sixty-percent-clr);
  font-size: 1.5rem;
  border: 2px solid var(--ten-percent-clr);
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border-radius: 10px;
  padding-inline: 10px;
  user-select: none;
  cursor: pointer;
}

.toggle__btn i,
.toggle__btn span {
  font-size: 1.1rem;
}

/**  ================================ BANNER SECTION ================================ */
.banner {
  position: relative;
  height: 100vh;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #6a42c2;
}

.banner div {
  text-align: center;
}

.banner div h1 {
  font-size: calc(1.6rem + 2vw);
  font-weight: 800;
  color: var(--sixty-percent-clr);
}

.banner div p {
  color: var(--sixty-percent-clr);
  font-size: 1.2rem;
  padding-inline: 10%;
  margin-block: 1.2rem;
}

.banner div button {
  background-color: var(--ten-percent-clr);
  padding: 1rem 2.3rem;
  text-transform: capitalize;
  font-size: 1.1rem;
  color: var(--pure-white-clr);
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/**  ================================ ABOUT SECTION ================================ */
.about__section {
  padding-block-start: 50px;
  width: var(--section-width-80);
  margin-inline: auto;
}

.about__content {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-template-rows: auto;
}

.about__content div {
  background-color: #d7d3bf;
  padding-block: 150px;
  border-radius: 10px;
}

/**  ================================ SERVICE SECTION ================================ */
.service__section {
  width: var(--section-width-80);
  margin-inline: auto;
}

.service__content {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: auto;
}

.service__content div {
  background-color: #d7d3bf;
  padding-block: 80px;
  border-radius: 10px;
}

/**  ================================ BLOG SECTION ================================ */
.blog__section {
  width: var(--section-width-80);
  margin-inline: auto;
  margin-block-end: 100px;
}

.blog__content {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-template-rows: auto;
}

.blog__content div:first-child {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

.blog__content div {
  background-color: #d8dbbd;
  padding-block: 80px;
  border-radius: 10px;
}

/**  ================================ FOOTER SECTION ================================ */
.footer {
  position: sticky;
  top: 100%;
  bottom: 0;
  background-color: var(--thirty-percent-clr);
}

.copy__right {
  background-color: #0e1624;
}

.copy__right__inner {
  width: var(--section-width-90);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  line-height: 90px;
}

.copy__right__inner p {
  color: var(--sixty-percent-clr);
  opacity: 0.8;
  text-transform: capitalize;
}

.copy__right__inner ul {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.copy__right__inner ul li a {
  color: var(--ten-percent-clr);
  font-size: 0.9rem;
  font-weight: 200;
}

Adding Responsive Features

/**  ================================ MEDIA QUERY FOR RESPONSIVE ================================ */
/** MAX-WIDTH: 1023 */
@media (max-width: 1023px) {
  .navigation {
    background-color: var(--thirty-percent-clr);
  }
  .navigation ul {
    position: absolute;
    display: block;
    top: var(--nav-line-height);
    left: 0;
    width: 0;
    height: 100vh;
    background-color: var(--thirty-percent-clr);
    text-align: center;
    padding-block-end: 5px;
    text-wrap: nowrap;
    transition: width 400ms;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
      rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
      rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  }

  .navigation ul.active {
    width: 100%;
  }

  .navigation ul li a {
    display: block;
    font-size: 1.3rem;
  }
}

/** MIN-WIDTH: 1024 */
@media (min-width: 1024px) {
  .navigation {
    width: var(--section-width-80);
    padding-inline: 40px;
    margin: 0 auto;
    border-radius: 5px;
  }

  .toggle__btn {
    display: none;
  }

  .navigation ul li:last-child a {
    background-color: var(--ten-percent-clr) !important;
    color: var(--sixty-percent-clr);
    height: 40px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
  }
}

/** MIN-WIDTH: 1280 */
@media (min-width: 1280px) {
  .navigation ul {
    gap: 15px;
  }

  .footer-box {
    width: var(--section-width-80);
  }
}

Toggle Button JavaScript

Add functionality for smaller screens:

// navigation controller
const toggleBtn = document.getElementById("toggle-btn");
const navigation = document.getElementById("navigation-ul");

toggleBtn.onclick = () => {
  navigation.classList.toggle("active");
};

Code & Preview

Conclusion

Creating a simple HTML page with a dynamic navigation bar is the best way to improve the usability and design of your website. This resource improves user navigation. Supports responsive design and SEO optimization whether creating personal projects or commercial sites. Skills required to use the fluctuating navigation bar

You can download the source file for free by clicking the Source File button. You can also edit and view a live demo by clicking the Edit with CodePen button below.

Source Code
edit with codepen

Related Posts

Scroll to Top