UI

Local Business Navbar Bootstrap 5

Yet again, we have a beautiful navbar which has special emphasis on local business which is business hours, and contact info. The navbar has two sections. Logo, business info and a full width navbar in blue. The navbar collapses to icons for top section and expandable menu button at smaller screen sizes.

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- bootstrap css link -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
    <style>
        body {
            font-family: "Poppins", sans-serif;
        }

        .textColor {
            color: #030F27;
        }

        .navbarBgDark {
            background: #030F27;
        }

        .navbar-nav .nav-link.active {
            color: #EDA72F;
        }

        .nav-link:hover {
            color: #EDA72F;
        }

        .nav-link {
            color: #fff;
        }

        .getBtn {
            color: #fff;
        }

        .sideLine {
            border-right: 1px solid #030F27;
        }

        .iconHeight {
            height: 24px;
            width: 24px;
        }

        @media screen and (min-width: 992px) {
            .sideLine {
                border-right: none;
            }

            .iconHeight {
                height: 46px;
                width: 46px;
            }
        }
    </style>
</head>

<body>
    <nav>
        <div class="container-fluid p-0 bg-warning">
            <div class="container-fluid container-lg p-0">
                <div class="textColor">
                    <div class="row justify-content-center align-items-center mx-auto">
                        <div class="col-12 col-lg-3 p-0">
                            <div class="display-3 fw-bold py-2 text-center text-lg-start d-none d-lg-block">LOGO</div>
                            <!-- <hr class="d-block d-lg-none"> -->
                        </div>
                        <div class="col-4 col-lg-3 sideLine">
                            <div class="d-flex justify-content-center align-items-center">
                                <div class="me-3 p-2 py-3"><img class="iconHeight"
                                        src="/static_files/svgs5/building-check.svg" alt="building"></div>
                                <div class="d-none d-lg-block"><span class="fw-medium">Opening Hour</span> <br>
                                    Mon-Fri : 8:00 - 9:00</div>
                            </div>
                        </div>
                        <div class="col-4 col-lg-3 sideLine">
                            <div class="d-flex justify-content-center align-items-center">
                                <a href="#">
                                    <div class="me-3 p-2 py-3"><img class="iconHeight"
                                            src="/static_files/svgs5/telephone-inbound.svg" alt="telephone"></div>
                                </a>
                                <div class="d-none d-lg-block"><span class="fw-medium">Call Us</span><br> +1-800-123-1234</div>
                            </div>
                        </div>
                        <div class="col-4 col-lg-3">
                            <div class="d-flex justify-content-center align-items-center">
                                <a href="#">
                                    <div class="me-3 p-2 py-3"><img class="iconHeight"
                                            src="/static_files/svgs5/envelope.svg" alt=""></div>
                                </a>
                                <div class="d-none d-lg-block"><span class="fw-medium">Email Us</span><br> example@emmail.com</div>
                            </div>
                        </div>
                    </div>
                </div>
                <hr class="my-0 d-lg-none">
                <div class="text-center display-3 fw-bold mb-2 d-lg-none">LOGO</div>
                <div class="navbarBgDark" data-bs-theme="dark">
                    <nav class="navbar navbar-expand-lg justify-content-center justify-content-lg-between p-0">

                        <button class="navbar-toggler m-3 w-100" type="button" data-bs-toggle="collapse"
                            data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
                            aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                            Menu
                        </button>
                        <div class="collapse navbar-collapse justify-content-between" id="navbarNavDropdown">
                            <ul class="navbar-nav text-uppercase ps-3">
                                <li class="nav-item">
                                    <a class="nav-link active pe-3" aria-current="page" href="#">Home</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link px-lg-3" href="#">About</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link px-lg-3" href="#">Service</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link px-lg-3" href="#">Team</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link px-lg-3" href="#">Project</a>
                                </li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle px-lg-3" href="#" role="button"
                                        data-bs-toggle="dropdown" aria-expanded="false">
                                        Pages
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item" href="#">Action</a></li>
                                        <li><a class="dropdown-item" href="#">Another action</a></li>
                                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                                    </ul>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link px-lg-3" href="#">Contact</a>
                                </li>
                            </ul>
                            <div class="text-white m-1 p-3">
                                <button type="button" class="btn getBtn border border-white rounded-0">Get A
                                    Quote</button>
                            </div>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </nav>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

 

dylanu

A programmer who cares about programming matters for the web application, mobile application, and servers and their protection

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button