NUIT Navbar Style

HTML

  <div class="dummy-body">
      <!-- Header -->
      <header class="nav8-header" id="nav8-header">
        <div class="nav-container">
          <div class="nav-wrap">
            <!-- Logo -->
            <div class="nav-logo">
              <a href="#">
                <img src="https://nuitwebtek.com/wp-content/uploads/2024/03/NUIT-Logo-2.svg" alt="" class="nav-logo-image" />
              </a>
            </div>
            <!-- Logo -->
  
            <!-- Left Menu -->
            <div class="nav-row nav-row-left">
              <nav class="nav-menu sm-none">
                <ul class="nav-list">
                  <li class="nav-items">
                    <a href="#" class="nb-item-link nb-btn-style-1 font-style-1">Home</a>
                  </li>

                  <!-- subnav desktop -->
                  <li class="nav-items">
                    <a href="#" class="nb-item-link nb-btn-style-1 font-style-1">Who We Are</a>
                    <div class="nb-subnav">
                      <ul class="nb-subnav-items">
                        <!-- 1st item -->
                        <li class="item-grid nb-hover-after">
                          <a href="#" class="nb-item-link-inner">
                            <div class="item-icon">
                              <i class="fa-solid fa-info nav-icon"></i>
                            </div>
                            <div class="font-style-2">About Us <br>
                              <span class="nav-span-content">Fueled with Creativity & Passion</span>
                            </div>
                          </a>
                        </li>

                        <!-- 2nd item -->
                        <li class="item-grid nb-hover-after">
                          <a href="#" class="nb-item-link-inner">
                            <div class="item-icon">
                              <i class="fa-solid fa-people-group nav-icon"></i>
                            </div>
                            <div class="font-style-2">Our Team <br>
                              <span class="nav-span-content">The NUIT Troupe</span>
                            </div>
                          </a>
                        </li>

                        <!-- 3th item -->
                        <li class="item-grid nb-hover-after">
                          <a href="#" class="nb-item-link-inner">
                            <div class="item-icon">
                              <i class="fa-solid fa-champagne-glasses nav-icon"></i>
                            </div>
                            <div class="font-style-2">Life at NUIT <br>
                              <span class="nav-span-content">Building Memories</span>
                            </div>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </li>

                  <!-- megamenu desktop -->
                  <li class="nav-items">
                    <a href="#" class="nb-item-link nb-btn-style-1 font-style-1">What We Offer</a>
                    <div class="nb-meganav">
                      <div class="">
                        
                        <div class="nb-meganav-items align-items-start">
                          <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">

                            <!-- Development -->
                            <button style="padding: 0;" class="nb-hover-after nav-link active" id="v-pills-development-tab" data-bs-toggle="pill" data-bs-target="#v-pills-development" type="button" role="tab" aria-controls="v-pills-development" aria-selected="false">
                              <a href="#" class="nb-item-link-inner">
                                <div class="item-icon">
                                  <i class="fa-solid fa-laptop-code nav-icon"></i>
                                </div>
                                <div class="font-style-2">Development<br>
                                  <span class="nav-span-content">Build Business on Our Canvas</span>
                                </div>
                              </a>
                            </button>
                            <!-- Designing -->
                            <button style="padding: 0;" class="nb-hover-after nav-link" id="v-pills-designing-tab" data-bs-toggle="pill" data-bs-target="#v-pills-designing" type="button" role="tab" aria-controls="v-pills-designing" aria-selected="false">
                              <a href="#" class="nb-item-link-inner">
                                <div class="item-icon">
                                  <i class="fa-solid fa-bezier-curve nav-icon"></i>
                                </div>
                                <div class="font-style-2">Designing<br>
                                  <span class="nav-span-content">Your Passion, Our Designs</span>
                                </div>
                              </a>
                            </button>
                            <!-- Digital Marketing -->
                            <button style="padding: 0;" class="nb-hover-after nav-link" id="v-pills-market-tab" data-bs-toggle="pill" data-bs-target="#v-pills-market" type="button" role="tab" aria-controls="v-pills-market" aria-selected="false">
                              <a href="#" class="nb-item-link-inner">
                              <div class="item-icon">
                                <i class="fa-solid fa-icons nav-icon"></i>
                              </div>
                              <div class="font-style-2">Digital Marketing<br>
                                <span class="nav-span-content"> Redefine Brand Through Social-Media</span>
                              </div>
                              </a>
                            </button>
                            <!-- Hosting -->
                            <button style="padding: 0;" class="nb-hover-after nav-link" id="v-pills-domain-tab" data-bs-toggle="pill" data-bs-target="#v-pills-domain" type="button" role="tab" aria-controls="v-pills-domain" aria-selected="false">
                              <a href="#" class="nb-item-link-inner">
                                <div class="item-icon">
                                  <i class="fa-solid fa-globe nav-icon"></i>
                                </div>
                                <div class="font-style-2">Domain and Hosting <br>
                                  <span class="nav-span-content">1 Liner Description comes here</span>
                                </div>
                              </a>
                            </button>
                            <!-- Content -->
                            <button style="padding: 0;" class="nb-hover-after nav-link" id="v-pills-content-tab" data-bs-toggle="pill" data-bs-target="#v-pills-content" type="button" role="tab" aria-controls="v-pills-content" aria-selected="false">
                              <a href="#" class="nb-item-link-inner">
                                <div class="item-icon">
                                  <i class="fa-solid fa-pen-to-square nav-icon"></i>
                                </div>
                                <div class="font-style-2">Content Optimization<br>
                                  <span class="nav-span-content">Impress Visitors with Words</span>
                                </div>
                              </a>
                            </button>
                            <!-- video -->
                            <button style="padding: 0;" class="nb-hover-after nav-link" id="v-pills-video-tab" data-bs-toggle="pill" data-bs-target="#v-pills-video" type="button" role="tab" aria-controls="v-pills-video" aria-selected="false">
                              <a href="#" class="nb-item-link-inner">
                                <div class="item-icon">
                                  <i class="fa-solid fa-film nav-icon"></i>
                                </div>
                                <div class="font-style-2">Video Editing<br>
                                  <span class="nav-span-content">Amplify Business Through Videos</span>
                                </div>
                              </a>
                            </button>
                            <!-- E-Commerce -->
                            <button style="padding: 0;" class="nb-hover-after nav-link" id="v-pills-ecommerce-tab" data-bs-toggle="pill" data-bs-target="#v-pills-ecommerce" type="button" role="tab" aria-controls="v-pills-ecommerce" aria-selected="false">
                              <a href="#" class="nb-item-link-inner">
                                <div class="item-icon">
                                  <i class="fa-solid fa-cart-shopping nav-icon"></i>
                                </div>
                                <div class="font-style-2">E-commerce Photography<br>
                                  <span class="nav-span-content">Help Buyers meet Sellers</span>
                                </div>
                              </a>
                            </button>
                          </div>

 
                          

                          <!-- Tabs -->
                          <div class="tab-content" id="v-pills-tabContent">
                            <div class="tab-pane fade show active" id="v-pills-development" role="tabpanel" aria-labelledby="v-pills-development-tab" tabindex="0">
                              <div class="mega-menu-links d-grid">
                                <a href="" class="subcat-link">Informative Website</a>
                                <a href="" class="subcat-link">E-Commerce</a>
                                <a href="" class="subcat-link">Landing Page</a>
                                <a href="" class="subcat-link">Custom Design</a>
                                <a href="" class="subcat-link">Website Enhancement</a>  
                                <a href="" class="subcat-link">Web Applications</a>
                              </div>
                            </div>

                            <div class="tab-pane fade" id="v-pills-designing" role="tabpanel" aria-labelledby="v-pills-designing-tab" tabindex="0">
                              <div class="mega-menu-links d-grid">
                                <a href="" class="subcat-link">Logo</a>
                                <a href="" class="subcat-link">Branding Kit</a>
                                <a href="" class="subcat-link">Social Media Creatives</a>
                                <a href="" class="subcat-link">Promotional Kit (Posters, Flyers, banners, Standees etc)</a>
                                <a href="" class="subcat-link">Brochure & Presentation</a>  
                                <a href="" class="subcat-link">Mock ups</a>
                                <a href="" class="subcat-link">Product Packaging</a>
                                <a href="" class="subcat-link">Reports</a>
                              </div>
                            </div>

                            <div class="tab-pane fade" id="v-pills-market" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">
                              <div class="mega-menu-links d-grid">
                                <a href="" class="subcat-link">SEO</a>
                                <a href="" class="subcat-link">SEM</a>
                                <a href="" class="subcat-link">SMM</a>
                                <a href="" class="subcat-link">SMO</a>
                                <a href="" class="subcat-link">Email Marketing</a>
                              </div>
                            </div>

                            <div class="tab-pane fade" id="v-pills-domain" role="tabpanel" aria-labelledby="v-pills-domain-tab" tabindex="0">
                              <div class="mega-menu-links d-grid">
                                <a href="" class="subcat-link">Web Hosting (Shared/Cloud)</a>
                                <a href="" class="subcat-link">Domain Registration</a>
                                <a href="" class="subcat-link">Email Setup</a>
                                <a href="" class="subcat-link">Email Migration</a>
                                <a href="" class="subcat-link">Website Migration</a>
                              </div>
                            </div>

                            <div class="tab-pane fade" id="v-pills-content" role="tabpanel" aria-labelledby="v-pills-content-tab" tabindex="0">
                              <div class="mega-menu-links d-grid">
                                <a href="" class="subcat-link">Website Pages</a>
                                <a href="" class="subcat-link">Blog</a>
                                <a href="" class="subcat-link">Social Posts Copy</a>
                                <a href="" class="subcat-link">Ad Copy</a>
                                <a href="" class="subcat-link">Book Editing</a>
                                <a href="" class="subcat-link">Brand Storytelling</a>
                                <a href="" class="subcat-link">Product Description Writting</a>
                                <a href="" class="subcat-link">Amazon A+ Content</a>
                              </div>
                            </div>

                            <div class="tab-pane fade" id="v-pills-video" role="tabpanel" aria-labelledby="v-pills-video-tab" tabindex="0">
                              <div class="mega-menu-links d-grid">
                                <a href="" class="subcat-link">Cropping</a>
                                <a href="" class="subcat-link">Merging</a>
                                <a href="" class="subcat-link">Retouching</a>
                                <a href="" class="subcat-link">Branding</a>
                              </div>
                            </div>

                            <div class="tab-pane fade" id="v-pills-ecommerce" role="tabpanel" aria-labelledby="v-pills-ecommerce-tab" tabindex="0">
                              <div class="mega-menu-links d-grid">
                                <a href="" class="subcat-link">Product</a>
                                <a href="" class="subcat-link">Product Mock ups</a>
                                <a href="" class="subcat-link">Product Re touching</a>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>

                  <!-- Portfolio -->
                  <li class="nav-items">
                    <a href="#" class="nb-item-link nb-btn-style-1 font-style-1">Portfolio</a>
                    <div class="nb-subnav">
                      <ul class="nb-subnav-items">
                        <!-- 1st item -->
                        <li class="item-grid nb-hover-after">
                          <a href="#" class="nb-item-link-inner">
                            <div class="item-icon">
                              <i class="fa-solid fa-laptop-code nav-icon"></i>
                            </div>
                            <div class="font-style-2">Website Development <br>
                              <span class="nav-span-content">Make Websites come alive</span>
                            </div>
                          </a>
                        </li>

                        <!-- 2nd item -->
                        <li class="item-grid nb-hover-after">
                          <a href="#" class="nb-item-link-inner">
                            <div class="item-icon">
                              <i class="fa-solid fa-icons nav-icon"></i>
                            </div>
                            <div class="font-style-2">Social Media Creatives<br>
                              <span class="nav-span-content">Grow With Your Audience</span>
                            </div>
                          </a>
                        </li>

                        <!-- 3th item -->
                        <li class="item-grid nb-hover-after">
                          <a href="#" class="nb-item-link-inner">
                            <div class="item-icon">
                              <i class="fa-solid fa-bezier-curve nav-icon"></i>
                            </div>
                            <div class="font-style-2">Logo Design<br>
                              <span class="nav-span-content">Create Brands to Inspire</span>
                            </div>
                          </a>
                        </li>

                        <!-- 4th item -->
                        <li class="item-grid nb-hover-after">
                          <a href="#" class="nb-item-link-inner">
                            <div class="item-icon">
                              <i class="fa-solid fa-book-open nav-icon"></i>
                            </div>
                            <div class="font-style-2">Business Stationary<br>
                              <span class="nav-span-content">Communicate Through Designs</span>
                            </div>
                          </a>
                        </li>

                        <!-- 5th item -->
                        <li class="item-grid nb-hover-after">
                          <a href="#" class="nb-item-link-inner">
                            <div class="item-icon">
                              <i class="fa-solid fa-film nav-icon"></i>
                            </div>
                            <div class="font-style-2">Video Creation <br>
                              <span class="nav-span-content">Bring Vision to Life</span>
                            </div>
                          </a>
                        </li>

                        <!-- 6th item -->
                        <li class="item-grid nb-hover-after">
                          <a href="#" class="nb-item-link-inner">
                            <div class="item-icon">
                              <i class="fa-solid fa-pen-to-square nav-icon"></i>
                            </div>
                            <div class="font-style-2">Content Writing<br>
                              <span class="nav-span-content">Influence with Words</span>
                            </div>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </li>

                  <!-- Clients -->
                  <li class="nav-items">
                    <a href="#" class="nb-item-link nb-btn-style-1 font-style-1">Clients</a>
                  </li>

                  <!-- Insights -->
                  <li class="nav-items">
                    <a href="#" class="nb-item-link nb-btn-style-1 font-style-1">Insights</a>
                    <div class="nb-subnav">
                      <ul class="nb-subnav-items">
                        <!-- 1st item -->
                        <li class="item-grid nb-hover-after">
                          <a href="#" class="nb-item-link-inner">
                            <div class="item-icon">
                              <i class="fa-brands fa-blogger-b nav-icon"></i>
                            </div>
                            <div class="font-style-2">Blogs <br>
                              <span class="nav-span-content">Information that matters</span>
                            </div>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </li>

                  <!-- Contact -->
                  <li class="nav-items">
                    <a href="#" class="nb-item-link nb-btn-style-1 font-style-1">Contact Us</a>
                  </li>
                </ul>
              </nav>
            </div>
            
            <!-- Left Menu End  -->
            <!-- right Menu -->
            <!-- Hamburger -->
            <div class="nav-mobile-btn sm-block lg-none">
              <button class="nb-toggler nb-collapsed lg-none sm-block" type="button">
                <div class="nbbar-toggler-icon">
                  <span class="toggler-bars"></span> 
                  <span class="toggler-bars"></span>
                  <span class="toggler-bars"></span>
                </div>
              </button>
            </div>
            <!-- Hamburger End -->
            <!-- right Menu End -->


            <!-- Mobile menu -->
             <!-- Navigation -->    
             <nav class="nav-7-nav nav-7-mobile">
              <ul class="nav-7-list">
                  <li class="nav-7-item nav-7-link"><a href="#"><span class="font-style-1">Home</span></a></li>

                  <li class="nav-7-item nav-7-link nav-7-item-has-child"><a href="#"><span>Who We Are</span></a>
                      
                    <!-- Sub menu -->
                    <ul class="nav-7-submenu">
                        <li class="nav-7-item nav-7-link">
                            <a href="#">
                              <div class="item-icon">
                                <i class="fa-solid fa-info nav-icon"></i>
                              </div>
                              <div class="font-style-2">About Us <br>
                                <span class="nav-span-content">Fueled with Creativity & Passion</span>
                              </div>
                            </a>
                            
                        </li>
                        <li class="nav-7-item nav-7-link">
                          <a href="#">
                            <div class="item-icon">
                              <i class="fa-solid fa-people-group nav-icon"></i>
                            </div>
                            <div class="font-style-2">Our Team <br>
                              <span class="nav-span-content">The NUIT Troupe</span>
                            </div>
                          </a>
                      </li>

                      <li class="nav-7-item nav-7-link">
                        <a href="#">
                          <a href="#" class="nb-item-link-inner">
                            <div class="item-icon">
                              <i class="fa-solid fa-champagne-glasses nav-icon"></i>
                            </div>
                            <div class="font-style-2">Life at NUIT <br>
                              <span class="nav-span-content">Building Memories</span>
                            </div>
                          </a>
                        </a>
                    </li>
                    </ul>
                    <!-- SUb menu End -->

                </li>

                  <li class="nav-7-item nav-7-link nav-7-item-has-child nav-7-item-has-mega-menu"><a href="#"><span class="font-style-1">What We Offer</span></a>
                  
                      <!-- Mega Menu -->
                      <ul class="nav-7-submenu">
                          <li class="nav-7-item nav-7-mega-menu">
                              <div class="nav-7-mega-menu-wrap">
                                  
                                  <div class="nav-7-mega-row">

                                      <!-- Col -->
                                      <div class="nav-7-mega-col nav-7-mega-col-25">
                                        <div class="item-icon">
                                          <i class="fa-solid fa-laptop-code nav-icon"></i>
                                        </div>
                                          <h3 class="nav-7-title font-style-2">Development
                                            <br>
                                            <span class="nav-span-content">Build Business on Our Canvas</span>
                                          </h3>
                                          <ul class="nav-7-mega-list">
                                              <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">Information Website</a></li>
                                              <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">E-Commerce</a></li>
                                              <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">Landing Page</a></li>
                                              <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">Custom Design</a></li>
                                              <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">Website Enhancement</a></li>
                                              <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">Web Applications</a></li>
                                          </ul>
                                      </div>
                                      <!-- Col End -->

                                      <!-- Col -->
                                      <div class="nav-7-mega-col nav-7-mega-col-25">
                                        <div class="item-icon">
                                          <i class="fa-solid fa-bezier-curve nav-icon"></i>
                                        </div>
                                          <h3 class="nav-7-title font-style-2">Designing
                                            <br>
                                            <span class="nav-span-content">Your Passion, Our Designs</span>
                                          </h3>
                                          <ul class="nav-7-mega-list">
                                              <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">Logo</a></li>
                                              <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">Branding Kit</a></li>
                                              <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">Social Media Creatives</a></li>
                                              <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">Promotional Kit (Posters, Flyers, banners, Standees etc)</a></li>
                                              <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">Brochure & Presentation</a></li>
                                              <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">Mock ups</a></li>
                                              <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">Product Packaging</a></li>
                                              <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">Reports</a></li>
                                          </ul>
                                      </div>
                                      <!-- Col End -->

                                      <!-- Col -->
                                      <div class="nav-7-mega-col nav-7-mega-col-25">
                                        <div class="item-icon">
                                          <i class="fa-solid fa-icons nav-icon"></i>
                                        </div>
                                          <h3 class="nav-7-title font-style-2">Digital Marketing
                                            <br>
                                            <span class="nav-span-content"> Redefine Brand Through Social-Media</span>
                                          </h3>
                                          <ul class="nav-7-mega-list">
                                              <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">SEO</a></li>
                                              <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">SEM</a></li>
                                              <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">SMM</a></li>
                                              <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">SMO</a></li>
                                              <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">Email Marketing</a></li>
                                          </ul>
                                      </div>
                                      <!-- Col End -->

                                      <!-- Col -->
                                      <div class="nav-7-mega-col nav-7-mega-col-25">
                                        <div class="item-icon">
                                          <i class="fa-solid fa-pen-to-square nav-icon"></i>
                                        </div>
                                          <h3 class="nav-7-title font-style-2">Domain and Hosting <br>
                                            <span class="nav-span-content">1 Liner Description comes here</span></h3>
                                          <ul class="nav-7-mega-list">
                                              <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">Web Hosting (Shared/Cloud)</a></li>
                                              <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">Domain Registration</a></li>
                                              <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">Email Setup</a></li>
                                              <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">Email Migration</a></li>
                                              <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">Website Migration</a></li>
                                          </ul>
                                      </div>
                                      <!-- Col End -->


                                      <!-- Col -->
                                      <div class="nav-7-mega-col nav-7-mega-col-25">
                                        <div class="item-icon">
                                          <i class="fa-solid fa-pen-to-square nav-icon"></i>
                                        </div>
                                        <h3 class="nav-7-title font-style-2">
                                          Content Optimization<br>
                                            <span class="nav-span-content">Impress Visitors with Words</span>
                                        </h3>
                                        <ul class="nav-7-mega-list">
                                            <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">Website Pages</a></li>
                                            <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">Blog</a></li>
                                            <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">Social Posts Copy</a></li>
                                            <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">Ad Copy</a></li>
                                            <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">Book Editing</a></li>
                                            <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">Brand Storytelling</a></li>
                                            <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">Product Description Writting</a></li>
                                            <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">Amazon A+ Content</a></li>
                                        </ul>
                                    </div>
                                    <!-- Col End -->


                                    <!-- Col -->
                                    <div class="nav-7-mega-col nav-7-mega-col-25">
                                      <div class="item-icon">
                                        <i class="fa-solid fa-film nav-icon"></i>
                                      </div>
                                      <h3 class="nav-7-title font-style-2">Video Editing<br>
                                        <span class="nav-span-content">Amplify Business Through Videos</span></h3>
                                      <a href="#" class="nb-item-link-inner">
                                        <div class="item-icon">
                                          <i class="fa-solid fa-film nav-icon"></i>
                                        </div>
                                        <div class="font-style-2">Video Editing<br>
                                          <span class="nav-span-content">Amplify Business Through Videos</span>
                                        </div>
                                      </a>
                                      <ul class="nav-7-mega-list">
                                          <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">Cropping</a></li>
                                          <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">Merging</a></li>
                                          <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">Retouching</a></li>
                                          <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">Branding</a></li>
                                      </ul>
                                  </div>
                                  <!-- Col End -->


                                  <!-- Col -->
                                  <div class="nav-7-mega-col nav-7-mega-col-25">
                                    <div class="item-icon">
                                      <i class="fa-solid fa-cart-shopping nav-icon"></i>
                                    </div>
                                    <h3 class="nav-7-title font-style-2">E-commerce Photography<br>
                                      <span class="nav-span-content">Help Buyers meet Sellers</span>
                                    </h3>
                                    <ul class="nav-7-mega-list">
                                        <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">Product</a></li>
                                        <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">Product Mock ups</a></li>
                                        <li class="nav-7-mega-menu-item nav-7-item subcat-link"><a href="#">Product Re touching</a></li>
                                    </ul>
                                </div>
                                <!-- Col End -->

                                  </div>

                              </div>
                          </li>
                      </ul>
                      <!-- Mega Menu End -->
                  
                  </li>
                  
                  <li class="nav-7-item nav-7-link"><a href="#"><span class="font-style-1">Portfolio</span></a>
                    <ul class="nav-7-submenu">
                      <li class="nav-7-item nav-7-link">
                        <a href="#" class="nb-item-link-inner">
                          <div class="item-icon">
                            <i class="fa-solid fa-laptop-code nav-icon"></i>
                          </div>
                          <div class="font-style-2">Website Development <br>
                            <span class="nav-span-content">Make Websites come alive</span>
                          </div>
                        </a>
                      </li>
                      <li class="nav-7-item nav-7-link">
                        <a href="#" class="nb-item-link-inner">
                          <div class="item-icon">
                            <i class="fa-solid fa-book-open nav-icon"></i>
                          </div>
                          <div class="font-style-2">Business Stationary<br>
                            <span class="nav-span-content">Communicate Through Designs</span>
                          </div>
                        </a>
                      </li>

                      <li class="nav-7-item nav-7-link">
                        <a href="#" class="nb-item-link-inner">
                          <div class="item-icon">
                            <i class="fa-solid fa-icons nav-icon"></i>
                          </div>
                          <div class="font-style-2">Social Media Creatives<br>
                            <span class="nav-span-content">Grow With Your Audience</span>
                          </div>
                        </a>
                      </li>

                      <li class="nav-7-item nav-7-link">
                        <a href="#" class="nb-item-link-inner">
                          <div class="item-icon">
                            <i class="fa-solid fa-book-open nav-icon"></i>
                          </div>
                          <div class="font-style-2">Business Stationary<br>
                            <span class="nav-span-content">Communicate Through Designs</span>
                          </div>
                        </a>
                      </li>

                      <li class="nav-7-item nav-7-link">
                        <a href="#" class="nb-item-link-inner">
                          <div class="item-icon">
                            <i class="fa-solid fa-film nav-icon"></i>
                          </div>
                          <div class="font-style-2">Video Creation <br>
                            <span class="nav-span-content">Bring Vision to Life</span>
                          </div>
                        </a>
                    </li>

                    <li class="nav-7-item nav-7-link">
                      <a href="#" class="nb-item-link-inner">
                        <div class="item-icon">
                          <i class="fa-solid fa-pen-to-square nav-icon"></i>
                        </div>
                        <div class="font-style-2">Content Writing<br>
                          <span class="nav-span-content">Influence with Words</span>
                        </div>
                      </a>
                  </li>
                  </ul>
                  </li>

                  <li class="nav-7-item nav-7-link"><a href="#"><span class="font-style-1">Clients</span></a></li>
                  
                  <li class="nav-7-item nav-7-link"><a href="#"><span class="font-style-1">Insights</span></a>
                   <!-- Sub menu -->
                    <ul class="nav-7-submenu">
                      <li class="nav-7-item nav-7-link">
                        <a href="#">
                          <div class="item-icon">
                            <i class="fa-brands fa-blogger-b nav-icon"></i>
                          </div>
                          <div class="font-style-2">Blogs <br>
                            <span class="nav-span-content">Information that</span>
                          </div>
                        </a>
                      </li>
                    </ul>
                     <!-- SUb menu End -->
                  </li>

                  <li class="nav-7-item nav-7-link"><a href="#"><span class="font-style-1">Contact</span></a></li>
              </ul>
          </nav>
          <!-- Navigation End -->
            <!-- Moble End -->
          </div>
      </header>
      <!-- Header End -->

    </div>

CSS

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.dummy-body {
    height: 200vh;
    background-size: cover;
    background-position: center;
    position: relative;
    background: #000434;
}
html {
    scroll-behavior: smooth;
  }


/* Required CSS */
.nav8-header#nav8-header {
    position: fixed;
    top: 40px;
    left: 0;
    width: 100%;
    font-family: 'Ubuntu';
    button:after{
    background: transparent;
    }
    .nav-menu .nav-list {
        /* overflow: hidden; */
        height: 100%;
        display: flex;
        list-style: none;
        padding: 0;
        flex-wrap: wrap;
        margin-bottom: 0;
    }
    a{
        color: inherit;
        text-decoration: none;
    }
    .nav-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: auto;
        max-width: 90%;
        width: 100%;
        border-radius: 20px;
    }
    .nav-items{
        position: relative;
        padding: 1.2rem;
    }
    
    .nav-logo-image{
        max-width:200px;
    }
    .nav-row {
        display: flex;
        align-items: center;
        
        &.nav-row-left{
            border-radius: 100px;
    background-color: rgb(0 0 0 / .3);
    backdrop-filter: blur(3px);
    padding-inline: 2em;
        }
        &.nav-row-right {
            justify-content: center;
            width: 20%;
            & .nav-right-bar {
                display: flex;
            }
        }
    }
    .nav-logo {
        width: 15%;
        text-align: center;
        padding: 1rem;
    }

    .lg-none {
        display: none;
    }
    .font-style-1 {
        font-size: 18px;
        color: #FFFFFF;
    }
    
    .font-style-2{
        color: #FF6D3B;
        font-weight: 600;
        text-align: start;
    }
    .nav-items{
        list-style-type: none;
    }
    .nb-btn-style-1::after{
        content: '';
        position: absolute;
        height: 1px;
        left: 10%;
        top: 50%;
        margin-top: 20px;
        width: 80%;
        background: transparent;
    }
    .nb-btn-style-1:hover::after{
        content: '';
        position: absolute;
        height: 1px;
        left: 10%;
        top: 50%;
        margin-top: 20px;
        width: 80%;
        background: #FF6D3B;
    }
    
    .nb-btn-style-1 {
        border: 1px solid transparent;
        outline: transparent;
        background: transparent;
        position: relative;
        margin-inline: 5px;
        transition: 0.5s;
    }
    
    .nb-btn-style-1:hover, .nb-btn-style-1.active{
       color: #FF6D3B;
    }
    .nb-hover-after{
        position: relative;
        transition: 0.4s;
        max-height: 72px;
    }
    .nb-hover-after::after {
        content: '';
        position: absolute;
        width: 80%;
        height: 100%;
        background-image: url(https://nuitwebtek.com/wp-content/uploads/2024/03/nav-after.png);
        background-size: contain;
        background-repeat: no-repeat;
        top: 24px;
        left: 40px;
        /* z-index: -1; */
        opacity: 0;
        transition: 0.4s;
    }
    .nb-hover-after:hover::after, .nb-hover-after.active::after{
        opacity: 1;
    }
        .item-grid.nb-hover-after::after {
            content: '';
            position: absolute;
            width: 85%;
            height: 100%;
            background-image: url(https://nuitwebtek.com/wp-content/uploads/2024/03/nav-after.png);
            background-size: contain;
            background-repeat: no-repeat;
            top: 17px;
            left: 40px;
            /* z-index: -1; */
            opacity: 0;
            transition: 0.4s;
        }
        .item-grid.nb-hover-after:hover::after{
            opacity: 1;
        }
        .nb-subnav:nth-child(2){
           width: 220%;
        }
    
    
    
    /* submenu css */
    .nb-subnav-items {
        background: #ffffff;
        padding: 1rem;
        border-radius: 15px;
        transition: 0.4s;
    }
    .nb-subnav {
        position: absolute;
        top: 50px;
        left: 0px;
        z-index: 1;
        transition: 0.4s;
        width: 180%;
        align-items: end;
        visibility: hidden;
        opacity: 0;
    }
    .nav-span-content{
        font-size: 12px;
        font-weight: 300;
        color: #000434;
    }
    .nav-items:hover .nb-subnav{
        top: 75px;
        visibility: visible;
        opacity: 1;
    }
    li.item-grid:nth-child(2), li.item-grid:nth-child(4) {
        margin-block: 25px;
    }
    li.item-grid:nth-child(6){
        margin-top:25px
    }
    .item-grid{
        list-style-type: none;
    }
    .nb-item-link-inner {
        display: grid;
        grid-template-columns: 20% 80%;
        align-items: center;
    }
    .item-icon{
        text-align: center;
    }
    .nav-icon{
        font-size: 20px;
        color: #000434;
    }
    /* submenu css ends here */
    
    /* meganav starts here */
    .nb-meganav-items {
        background-image: url(https://nuitwebtek.com/wp-content/uploads/2024/03/Section2_BG_2.png);
        padding-block: 1rem;
        background-blend-mode: soft-light;
        background-size: cover;
        display: grid;
        grid-template-columns: 40% 60%;
        transition: 0.3s;
        background-size: cover;
    }
    .nb-meganav {
        background: #ffffff;
        position: absolute;
        border-radius: 15px;
        top: 50px;
        left: -230px;
        z-index: -1;
        transition: 0.4s;
        width: 480%;
        align-items: end;
        visibility: hidden;
        opacity: 0;
    }
    .nb-meganav .nb-subnav-items{
        border-radius: 0%;
        border-right:1px solid #C6C6C6 ;
        background: transparent;
    }
    .nav-items:hover .nb-meganav{
        top: 75px;
        visibility: visible;
        opacity: 1;
        z-index: 2;
    }
    .nb-meganav-items .nav{
        border-right: 1px solid #bdbdbd;
    }
    .nav-pills .nav-link.active, .nav-pills .show>.nav-link{
        background-color: transparent;
    }
    .mega-menu-links{
        grid-template-columns: 50% 50%;
        row-gap: 15px;
        padding-left: 10px;
    }
    .subcat-link{
        font-size: 15px;
        font-weight: 500;
        color: #000434;
        transition: 0.2s linear;
    }
    .subcat-link:hover{
        color: #FF6D3B;
    }
    
    
    /* megamenu css ends here */
    
    @media only screen and (max-width:1200px) {
            
        /* code  */
        .sm-none {
            display: none;
        }
    
        .sm-block {
            display: block;
        }
        .nb-btn-style-2{
            transition: none;
        }
       
            .nav-wrap {
                width: 95%;
                margin: auto;
            }
    }
        .nbbar-toggler-icon{
            position: relative;
            width: 25px;
            height: 20px;
            display: grid;
        }
        .nbbar-toggler-icon .toggler-bars{
            width: 100%;
            height: 3px;
            border-radius: 10px;
            background-color: #FFF;
            transition: 0.6s ease-in;
        }
        .navclose .nbbar-toggler-icon span:nth-child(2){
            transform: translateX(-6px);
        }
        .navclose .nbbar-toggler-icon span:nth-child(3){
            transform: translateX(-12px);
        }
        .nb-toggler {
            background: transparent;
            outline: none;
            border: none;
            position: relative;
            z-index: 2;
        }
    
        /* submenu mob & megamenu mob */
    
    
    /* Tab + Moblie */
    @media only screen and (min-width:489px) and (max-width:1200px) {
        .nav-logo{
            width: 50%;
        }
        .nav-row {
            &.nav-row-right{
                width: 55%;
            }
        }
    }

}
    
    /* Tab + Moblie End */








.dummy-body {
    height: 200vh;
    background-size: cover;
    background-position: center;
    position: relative;
    background: #000434;
}
html {
    scroll-behavior: smooth;
  }


  .nav-7-header {
    max-width: 125px;
    background-color: #1F1F23;
    height: 100vh;
    position: fixed;
    transition: .5s;
    left: 0;
    top: 0;
    /* overflow: hidden; */
    z-index: 9999;
    font-family: var(--theme-font-primary);

    --theme-font-primary:'Montserrat', sans-serif;
}

.nav-7-row-style {
    background-color: #1F1F23;
}

.nav-7-logo {
    min-height: 90px;
    display: grid;
    align-content: center;
    padding-inline: 20px;

    & img {
        width: 100%;
        max-height: 90px;
        max-width: 150px;
        object-fit: contain;
    }
}

.nav-7-list {
    color: #fff;
    list-style: none;

    .nav-7-item a {
        color: #fff;
        text-decoration: none;
        display: flex;
        align-items: center;
        font-family: var(--theme-font-primary);
        transition: .15s;

        &:hover {
            color: #E04646;
        }
    }

    > .nav-7-item {
        min-height: 65px;
        margin-bottom: 1rem;
        display: flex;
        align-content: center;
        padding-right:50px;
        padding-left: 50px;
        justify-content: space-between;
    }

}

.nav-7-container, 
.nav-7-row,
.nav-7-nav {
    height: 100%;
}

.nav-7-link > a span {
    opacity: 0;
    transition: .25s;
    margin-left: 1rem;
}


.nav-7-header:hover .nav-7-link > a span {
    opacity: 1;
}

.nav-7-header:hover {
    max-width: 250px;
}

.nav-7-item-has-child:hover .nav-7-mega-menu {
    left: calc(0% + 200px);
}

.nav-7-mega-menu {
    position: fixed;
    width: calc(100% - 200px);
    background-color: rgba(59, 59, 66, 1);
    top: 0;
    z-index: -1;
    height: 100%;
    transition: 1s;
    left: -100%;
}

.nav-7-mega-row {
    display: flex;
    flex-wrap: wrap;
}

.nav-7-mega-col {
    width: 100%;
}

.nav-7-mega-col-25 {
    max-width: 25%;
}

.nav-7-item.nav-7-mega-menu {
    align-content: start;
    padding:3rem;
    padding-left: 100px;
}

.nav-7-mega-list {
    list-style: none;
    padding: 0;
}

.nav-7-mega-list li {
    margin-bottom: 1rem;
}

.nav-7-title {
    margin-bottom: 1.5rem;
    font-size: 18px;
    font-weight: 700;
    font-family: var(--theme-font-primary);
    color: #fff;
}

.nav-7-mega-col {
    margin-bottom: 1.5rem;
}

.nav-7-submenu {
    list-style: none;
}

.nav-7-item-has-child:not(.nav-7-item-has-mega-menu) {
    position: relative;

    .nav-7-submenu {
        position: absolute;
        left: -100%;
        list-style: none;
        background-color: rgba(59, 59, 66, 1);
        min-width: 250px;
        z-index: -1;
        transition: .5s;
    }

    &:hover .nav-7-submenu {
        left: 100%;
    }

    .nav-7-item {
        padding: 1rem;
    }
}

.nav-7-item-has-child {
    position: relative;
    display: flex;
    align-items: center;

    & .nav-7-arrow::after {
        position: absolute;
        content: "";
        width: 10px;
        height: 10px;
        background-image: url(https://nuitwebtek.com/wp-content/uploads/2023/12/arrow-right.svg);
        background-size: contain;
        background-repeat: no-repeat;
        right: -20px;
        background-position: center;
    }
}


.nav-7-header .nav-7-item-has-child .nav-7-arrow::after {
    opacity: 0;
    transition: .25s;
}

.nav-7-header:hover .nav-7-item-has-child .nav-7-arrow::after {
    opacity: 1;
}

.nav-7-mob-btn {
    display: none;
    background-color: transparent;
    border: none;
    padding: 1rem;
}

.nav-7-mob-btn span {
    background-color: #fff;
    height: 1.5px;
    border-radius: 10px;
    width: 40px;
    margin-bottom: 12px;
    display: block;
    transition: .5s;

    &:last-child {
        margin-bottom: 0;
    }
}

.nav-7-arrow {
    position: relative;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
}

.tab-content{
    padding-top: 10px;
}

@media only screen and (max-width:991px) {
    .nav-7-mob-btn {
        display: block;
    }

    .nav-7-header-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .nav-7-header:hover {
        max-width: 100%;
    }

    .nav-7-header {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .nav-7-link > a span {
        opacity: 1;
    } 

    .nav-7-header .nav-7-item-has-child .nav-7-arrow::after {
        opacity: 1;
        transition: .25s;
        width: 30px;
        height: 30px;
        background-size: 8px;
    }

    .nav-7-list > .nav-7-item {
        padding-inline:20px;
    }

    .nav-7-item-has-child .nav-7-arrow::after  {
        right: 0px;
    }

    .nav-7-mobile {
        right: 0%;
        transition: .25s;
        position: fixed;
        height: 100vh;
        background-color: #1F1F23;
        width: 100%;
    }

    .nav-7-mobile.navshow {
        right: 0;
    }

   .nav-7-mob-btn.active {
        & span:first-child {
            scale: 1.2;
        }

        & span:nth-child(2) {
            scale: 1;
        }
        & span:last-child {
            scale: 0.8;
        }
   
    }

    .nav-7-item-has-child:not(.nav-7-item-has-mega-menu):hover .nav-7-submenu {
        left: -100%;
    }

    .nav-7-item-has-child:hover .nav-7-mega-menu {
        left: calc(-100%);
    }


    .nav-7-item-has-child .nav-7-mega-menu {
        width: 100%;
        z-index: 1;
        transition: .5s;
    }

    .nav-7-item-has-child.active  .nav-7-mega-menu {
        left: 0;
        padding-left: 3rem;
    }

    .nav-7-item-has-child:not(.nav-7-item-has-mega-menu) .nav-7-submenu {
        width: 100%;
        height: 100vh;
        z-index: 1;
        top: 0;
        position: fixed;
    }



    .nav-7-item-has-child.active:not(.nav-7-item-has-mega-menu) .nav-7-submenu {
        left: 0;
    }

    .nav-7-mega-col-25 {
        max-width: 100%;
    }

    .nav-7-item-has-child .nav-7-mega-list {
        transition: .5s;
        overflow: hidden;
        height: 0;
    }

    .nav-7-item-has-child .nav-7-mega-list.active {
        height:200px;
    }

    .nav-7-item-has-child:not(.nav-7-item-has-mega-menu) .nav-7-submenu {
        padding: 3rem;
    }


}  

.menu-back {
    position: relative;
    font-size: 18px;
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
    display: flex;
    align-items: center;
    color: #fff;
}

.menu-back::before {
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    background-image: url(https://nuitwebtek.com/wp-content/uploads/2023/12/arrow-right.svg);
    background-size: contain;
    background-repeat: no-repeat;
    left: 0px;
    background-position: center;
    transform: rotate(180deg);
    margin-top: 2.5px;
}

JS

    

let aboutRemove = document.querySelector('.nav-7-mobile')
aboutRemove.remove();
console.log(aboutRemove);



// let body = document.querySelector('body')
// let navHeader = document.getElementById('nav8-header');
// let navToggler = navHeader.querySelector('.nb-toggler');
// let smNav = navHeader.querySelector('.nav-mobile-canvas');
// let open_sub = document.querySelector('.nb-subnav-mob')
// let mob_sub = document.getElementById("sm-sub")
// let open_mega = document.querySelector('.nb-meganav-mob')
// let mob_mega = document.getElementById("sm-mega")
// let open_lists = document.querySelectorAll('.nbmeg-list-mob')
// let mob_list = document.getElementById("sm-list")


// mob_sub.addEventListener('click', () => {
//     open_sub.classList.toggle ('nav-opened')
// })

// mob_mega.addEventListener('click', () => {
//     open_mega.classList.toggle ('nav-opened')
// })


// open_lists.forEach(open_list => {
//     open_list.addEventListener('click', () =>{
//         open_list.classList.toggle ('list-opened')
//     })
// });

// let body = document.querySelector('body')
// let navHeader = document.getElementById('nav8-header');
// let navToggler = navHeader.querySelector('.nb-toggler');
// let smNav = navHeader.querySelector('.nav-mobile-canvas');
// let open_sub = document.querySelector('.nb-subnav-mob')
// let mob_sub = document.getElementById("sm-sub")
// let open_mega = document.querySelector('.nb-meganav-mob')
// let mob_mega = document.getElementById("sm-mega")
// let open_lists = document.querySelectorAll('.nbmeg-list-mob')
// let mob_list = document.getElementById("sm-list")
// let sm_nav_show_btn = document.querySelector('.nb-toggler');


// mob_sub.addEventListener('click', () => {
//     open_sub.classList.toggle ('nav-opened')
// })

// mob_mega.addEventListener('click', () => {
//     open_mega.classList.toggle ('nav-opened')
// })


// open_lists.forEach(open_list => {
//     open_list.addEventListener('click', () =>{
//         open_list.classList.toggle ('list-opened')
//     })
// });


// sm_nav_show_btn.addEventListener('click', () => {
//     smNav.classList.toggle('sm-show-nav-items')
//     let navWrap = document.querySelector('.nav-wrap');
//     // console.log(navWrap)
//     if (smNav.classList.contains('sm-show-nav-items')){
//         sm_nav_show_btn.textContent = 'Close';
//         navWrap.style.cssText = 'border-radius:20px 20px 0px 0px';
//     }else{
//         sm_nav_show_btn.textContent = 'Menu';
//         navWrap.style.cssText = 'border-radius:20px 20px 20px 20px';
//     }
// })


let navToggler = document.querySelector('.nb-toggler');
let smNav = document.querySelector('.nav-mobile-canvas');
let navTogglerIcon = document.querySelector('.nb-toggler')

// show/hide Mobile Nav 
navToggler.addEventListener('click',  show_hide_Nav);

function show_hide_Nav(e){
    smNav.classList.toggle('navshow')
    navToggler.classList.toggle('navclose')
}



// // nav-6 menu code 
// jQuery(".nav-7-item-has-child .nav-7-submenu").after("<i class='nav-7-arrow'></i>");

//     //Mobile menu
//     jQuery('.nav-7-mob-btn').on('click', function () {

//         if (jQuery(this).hasClass('active')) {
//             jQuery(this).removeClass('active');

//         } else {
//             jQuery(this).addClass('active');
//         }

//         if (jQuery('.nav-7-mobile').hasClass('active')) {
//             jQuery('.nav-7-mobile').removeClass('active');

//         } else {
//             jQuery('.nav-7-mobile').addClass('active')
//         }

//     })

//     //Mobile disable Hover
//     if (jQuery(window).width() < 1100) {

//         jQuery(".nav-7-item-has-child .nav-7-submenu .nav-7-mega-menu-wrap").before("<h4 class='menu-back'>Back</h4>");

//         jQuery(".nav-7-item-has-child:not(.nav-7-item-has-mega-menu) .nav-7-submenu > li:first-child").before("<h4 class='menu-back'>Back</h4>");

//         //mobile Submenu click
//         jQuery('.nav-7-item-has-child .nav-7-arrow').on('click', function () {
//             jQuery(this).parent().addClass('active');
//             console.log('test')
//         })

//         //mobile Submenu click
//         jQuery('.nav-7-item-has-child .nav-7-title').on('click', function () {
//             jQuery('.nav-7-mega-list').removeClass('active');
//             jQuery(this).parent().find('.nav-7-mega-list').addClass('active');
//         })

//         jQuery('.nav-7-item-has-child.nav-7-item-has-mega-menu .menu-back').on('click', function () {
//             jQuery(this).parent().parent().parent().removeClass('active');
//         })

//         jQuery('.nav-7-item-has-child:not(.nav-7-item-has-mega-menu) .menu-back').on('click', function () {
//             jQuery(this).parent().parent().removeClass('active');
//         })

//     }

Links

<!-- font-ubuntu -->
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">

    <!-- fontawesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Scripts

 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js" integrity="sha512-ykZ1QQr0Jy/4ZkvKuqWn4iF3lqPZyij9iRv6sGqLRdTPkY69YX6+7wvVGmsdBbiIfN/8OdsI7HABjvEok6ZopQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

NUIT Navbar Style

Development
Build Business on Our Canvas

Designing
Your Passion, Our Designs

Digital Marketing
Redefine Brand Through Social-Media

Domain and Hosting
1 Liner Description comes here

Content Optimization
Impress Visitors with Words

Video Editing
Amplify Business Through Videos

E-commerce Photography
Help Buyers meet Sellers

HTML

CSS

JS

Links

Scripts