Navbar - Navigation bar, Menu and Burger Menu

Includes Navbar strip, dropdown menus, burgermenu, Company home icon

Introduction

Header section includes many different components as a bundled section. This requires responsiveness. If the screen size is too small for the menu the main menubar is hidden and make it pop up using burger menu bar.

Code

This is the navbar section with the codes for html,css,js below.

Menubar Navbar - Full Width

Menubar Navbar - Responsive

Menubar Navbar Code

HTML
CSS
Javascript
Copy

                <div class="nav-row">
  <div class="nav-row-main">
    <div class="menu-logo">
      <a href="">
      <i class="ph-fill ph-leaf"></i>
      NeonUI
      </a>
    </div>
    <span class="highlight-pill">
      <a href="">Home</a>
    </span>
    <span class="highlight-pill">
      <a href="">
         Products
        <i class="fa-solid fa-angle-down"></i>
      </a>
    </span>
    <span class="highlight-pill">
      <a href="">
        Services
        <i class="fa-solid fa-angle-down"></i>
      </a>
    </span>
    <span class="highlight-pill">
      <a href="">About</a>
    </span>
  </div>
  <div class="nav-row-right">                
    <span class="button-black">
        <a href="">
           Download
          <i class="ph-bold ph-download-simple"></i>
        </a>
    </span>
    <span class="highlight-pill">Login</span>
  </div>
</div>
                .thulasi {
    font-family: "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Roboto",
    "Oxygen",
    "Ubuntu",
    "Cantarell",
    "Fira Sans",
    "Droid Sans",
    "Helvetica Neue",
    sans-serif;
}
                async function copyToClipboard(clipboardText) {
    try {
        await navigator.clipboard.writeText(clipboardText);
        if (test) console.log("Copy to Clipboard Successful: ", clipboardText);
    } catch (error) {
        if (test) console.log("Copy to Clipboard Error ", error);
    }
}

              

Previous Topic

Next Topic