→ java stories story
→ navbar white simple #1

navbar white simple #1

This bootstrap css example is contributed by java stories story, on 30-Jul-2025. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Header

Author java stories story

2.9k

v.5.3

Fork Fullscreen

<nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm fixed-top">
    <div class="container">
        <a class="navbar-brand logo" href="#">
            <img src="https://images.pexels.com/photos/170809/pexels-photo-170809.jpeg" alt="BrandName" width="50" height="50" class="me-1">
            BrandName
        </a>
        
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav1">
            <span class="navbar-toggler-icon"></span>
        </button>
        
        <div class="collapse navbar-collapse" id="navbarNav1">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
              
            </ul>
        </div>
    </div>
</nav>

More Examples

Hidden Search Widget
Hidden Search Widget

Author:
Rami AlAjo

11 months ago

1.3k

v.4.6
navbar gradient #1

Author:
java stories story

6 months ago

2.3k

v.5.3
about us #1

Author:
java stories story

6 months ago

2k

v.5.3
hero parallax

Author:
java stories story

6 months ago

3.7k

v.5.3
Responsive Bootstrap Navbar with Mobile Toggle and Remix Icons
This responsive Bootstrap 5 navbar features a clean and modern design, enhanced with Remix Icons for login and cart functionality. It includes a desktop navigation layout with a logo, links, search bar, and action buttons, while the mobile version adapts seamlessly with a toggle menu. Ideal for e-commerce or multipage websites seeking a sleek and user-friendly header layout.

Author:
Talha Abdullah Bangyal

8 months ago

2.9k

v.5.3
list navbar

Author:
java stories story

6 months ago

2.5k

v.5.3
Responsive Bootstrap Navbar with Mobile Toggle and Remix Icons
This responsive Bootstrap 5 navbar features a clean and modern design, enhanced with Remix Icons for login and cart functionality. It includes a desktop navigation layout with a logo, links, search bar, and action buttons, while the mobile version adapts seamlessly with a toggle menu. Ideal for e-commerce or multipage websites seeking a sleek and user-friendly header layout.

Author:
Anonymous

8 months ago

2.4k

v.5.3
Navbar Scrollspy

Author:
java stories story

5 months ago

1.5k

v.5.3
Sticky Table Headings Example

Author:
Anonymous

9 months ago

2.8k

v.5.3
Rotating Navigation Animation
Rotating Navigation Animation

Author:
Rami AlAjo

11 months ago

1.9k

v.4.6
HTML, CSS, and JavaScript for Multi-layer Dropdown Header
HTML: Added dropdown-submenu class to handle nested dropdowns. CSS: Dropdown Submenu: Positioned to the right of the parent dropdown. JavaScript: Event Listeners: Added to show and hide nested dropdowns on mouse enter and leave. How to Use: Create an header.html file and paste the updated code into it. Include Bootstrap and Font Awesome if needed for styling and icons.

Author:
zobaidul kaziex

1 year ago

2.6k

v.4.6
HTML and CSS for Hero Section
Explanation: HTML: Hero Section: Uses a background image with a gradient overlay. Hero Content: Centered with a title, subtitle, and a call-to-action button. CSS: Hero Section Styling: Full viewport height with a gradient overlay for better text readability and a background image. Hero Content Styling: Centered with responsive padding and font sizes. Button Styling: Custom button colors and hover effects. Background Image: Placeholder URL: Replace 'https://via.placeholder.com/1920x1080' with the actual URL of your hero image

Author:
zobaidul kaziex

1 year ago

2.9k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent