Skip to main content

Pure Css Sticky Navigation Bar | Rustcode

Pure-CSS-Sticky-Navigation-Bar-Rustcode

Pure Css Sticky Navigation Bar Design

A sticky navigation bar is a popular design element that gives a website a premium look. In our daily browsing, we come across numerous websites, each featuring different types of navigation bars or menus that enhance their visual appeal and usability. If you're interested in exploring various navigation bar designs, you can check out our related articles for inspiration.

In this article, we will learn how to create a sticky navigation bar using only HTML and CSS. A sticky navbar ensures that while the website content scrolls, the menu remains fixed at the top of the browser screen, improving accessibility and user experience. Although this effect can also be achieved using JavaScript and jQuery, this guide focuses solely on HTML and CSS. We will cover JavaScript-based navigation bars in a separate article.

Read Also:

01. HTML Code:

<!DOCTYPE html>
<html>
<head>
    <title>Pure Css Sticky Navigation Bar | Rustcode</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <strong>main content.</strong>
</body>
</html>

We are also including an image in the blog card design. You can download that image from this github link.

02. Navigation Bar Structure:

<!DOCTYPE html>
<html>
<head>
    <title>Pure Css Sticky Navigation Bar | Rustcode</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-- Header Section -->
    <div class="header">
        <h3>Sticky Navigation Bar</h3>
    </div>

    <!-- Navigation Menu -->
    <div class="menu">
        <a href="#">HOME</a>
        <a href="#">FEATURES</a>
        <a href="#">BLOG</a>
        <a href="#">ABOUT</a>
        <a href="#">CONTACT</a>
    </div>

    <!-- Image Container -->
    <div class="image-container">
        <img src="image.jpg" class="image" alt="Navigation Bar Image"/>
    </div>

    <!-- Content Section -->
    <div class="content">
        <h2>Sticky Navigation Bar</h2>
        <p>
            Proin eget tristique arcu. Duis at metus laoreet, mattis dolor vel, pulvinar odio. 
            Integer ornare nisi ultrices tellus elementum ultricies. Interdum et malesuada fames 
            ac ante ipsum primis in faucibus. Duis vel tristique ipsum, in tempor lectus. Praesent 
            id odio ut ligula auctor ultrices nec eget ligula. Praesent varius nisi lacus, ut pretium 
            ligula pellentesque eu. Phasellus porttitor quis ipsum a venenatis. Mauris lobortis maximus 
            massa a congue.
        </p>
    </div>

</body>
</html>

Code Explanation:

  • <!DOCTYPE html> - Declares that the document is an HTML5 file.
  • <head> Section - Defines metadata and includes an external CSS file (style.css) for styling.
  • <body> Section - Contains the entire page content.
  • Header (.header) - Displays the website title as <h3> inside a div to ensure styling flexibility.
  • Navigation Menu (.menu) - Contains multiple <a> (anchor) links for navigation.
  • Image Section (.image-container) - Holds an image (image.jpg) related to the content.
  • Content Section (.content) - Displays a heading (<h2>) and a paragraph (<p>) for additional information.

Output:

html-code-output

Read Also:

03. CSS Styling:

body {
    padding: 0;
    margin: 0;
    background: #e1e1e1;
}

/* Header Styling */
.header {
    background: rgba(0, 0, 0, 0.9);
    padding: 6px 24px;
    text-align: left;
    color: white;
    letter-spacing: 1px;
    font-size: 24px;
    text-transform: uppercase;
}

/* Sticky Navigation Bar */
.menu {
    position: sticky;
    top: 0;
    background-color: black;
    margin: 0;
    overflow: hidden;
}

/* Navigation Links */
.menu a {
    font-family: Arial, sans-serif;
    text-decoration: none;
    font-size: 18px;
    letter-spacing: 1px;
    box-sizing: border-box;
    float: left;
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 16px 24px;
}

/* Navigation Hover Effect */
.menu a:hover {
    background: #ff9f1c;
    color: black;
}

/* Image Container */
.image-container {
    position: relative;
    z-index: -1;
    top: 0;
}

/* Image Styling */
.image-container img {
    max-width: 100%;
    max-height: 100vh;
}

/* Content Section */
.content {
    padding: 0 24px;
    text-align: justify;
    font-size: 20px;
}

Code Explanation:

  • Global Styles (body) - Removes default margin & padding and sets a light grey background (#e1e1e1).
  • Header (.header) - Uses a dark background (rgba(0,0,0,0.9)) for a sleek look, with white, uppercase, left-aligned text.
  • Navigation Bar (.menu) - Sticks to the top (top: 0) and matches the header with a black background.
  • Navigation Links (.menu a) - Uses Arial font for clarity, with spacing, alignment, and hover effects (color: #f2f2f2 → #ff9f1c).
  • Image Container (.image-container) - Ensures images are fully responsive (max-width: 100%) and prevents overflowing (max-height: 100vh).
  • Content (.content) - Adds padding and justified text for a neat layout, with font-size: 20px for readability.

Output:

css-code-output

Read Also:

Output Preview:

Live Preview of the Sticky Navigation Bar

pure-css-sticky-navigation-bar-html-and-css

Read Also:

04. Youtube Video

To enhance your understanding of this topic, we have included a YouTube video from our Rustcode channel. This tutorial provides a step-by-step guide on creating a sticky navigation bar using pure CSS.

If you're passionate about web development and UI design, we invite you to explore more videos on our YouTube channel. We regularly share high-quality tutorials to help you refine your frontend skills and stay updated with the latest trends.

After going through this article and watching the YouTube video, you can download the complete source code and experiment with different styles, layouts, and features to tailor it to your project needs. This will help reinforce your understanding and allow you to create a fully customized sticky navigation bar for your website.

Read Also:


Comments

Post a Comment