UI

Topbar Featuring Contact Info bootstrap 5

This is a beautiful navbar with a broad topbar to show all three modes of contact. Address, email and phone numbers in each column. Further more, add map link to the google address which triggers a map when clicked. Similarly do with email and phone number.

CSS

.nav-item {
        font-size:18px;
        text-transform:uppercase;
        height:82px;
        line-height:64px;
      }
      .flare {
        background:#ef662b;
      }
      .flare a.nav-link {
        color:#fff !important
      }
      .topbarElements > div:nth-of-type(1){
        font-size:48px;
        margin:12px 32px;
        color:#ef662b
      }
      @media screen and (min-width:1040px){
        .flare { margin-right:-15px; }
      }
      @media screen and (max-width:1029px){
        .navbar-nav {
          margin-bottom:15px;
          text-align:center
        }
        .nav-item {
          background : rgba(255,255,255,0.1);
          margin:2px;
        }
      }

HTML

<div class="row align-items-center text-center">
    <div class="col">
      <div class="topbarElements d-inline-flex align-items-center">
        <div>&#x27A4;</div>
        <div class="text-start d-md-block d-none">
          <h5 class="p-0 m-0 text-uppercase">Office</h5>
          <p class="p-0 m-0 text-secondary">123 Broad St, Cookeville, TN</p>
        </div>
      </div>
    </div>
    <div class="col border-start border-end">
      <div class="topbarElements d-inline-flex align-items-center">
        <div>&#x270E;</div>
        <div class="text-start d-md-block d-none">
          <h5 class="p-0 m-0 text-uppercase">Email</h5>
          <p class="p-0 m-0 text-secondary">example@email.com</p>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="topbarElements d-inline-flex align-items-center">
        <div>
          &#x260F;
        </div>
        <div class="text-start d-md-block d-none">
          <h5 class="p-0 m-0 text-uppercase">Phone</h5>
          <p class="p-0 m-0 text-secondary">+91 123 123 2323</p>
        </div>
      </div>
    </div>
  </div>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark p-0 m-0">
    <div class="container-fluid">
      <a class="navbar-brand" href="#"><img src="/static_files/images/logos/dbkLogo.png" alt="DBK Logo" height="72"></a>
      <button class="navbar-toggler" 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>
      </button>
  
      <div class=" collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav ms-auto ">
          <li class="nav-item">
            <a class="nav-link mx-2 active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link mx-2" href="#">Products</a>
          </li>
          <li class="nav-item">
            <a class="nav-link mx-2" href="#">Pricing</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link mx-2 dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Company
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <li><a class="dropdown-item" href="#">Blog</a></li>
              <li><a class="dropdown-item" href="#">About Us</a></li>
              <li><a class="dropdown-item" href="#">Contact us</a></li>
            </ul>
          </li>
          <li class="nav-item flare">
            <a class="nav-link mx-2" href="#">Get A Quote <span class="ms-2">&#x2192;</span></a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

 

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