Narosundar

Author: Colorlib

Updated: October 2026 · v3.0.1

Credits: Images from Unsplash

Narosundar is a website template for barbershops and men’s grooming studios, built on Bootstrap 5. The layout is responsive and mobile-ready, with a sticky header, a back-to-top button and a menu panel on phones. There are eight pages: home, about, services, gallery, blog, blog post, elements and contact.

The home page has a split hero with the shop’s headline, an about block, a price list beside a photo grid, a services accordion, service cards on a photo band, a sliding photo strip and customer reviews. The inner pages add an about page, a services page with the price accordion, service cards and reviews, a photo gallery, a blog with a sidebar (search, categories, recent posts, tags, shop photos and a newsletter form), a blog post with the author, comments and a comment form, an elements page with typography, buttons, lists, a table, a gallery and form elements, and a contact page with a working contact form, contact details and a map that loads on click. Narosundar gives you a ready-made site to present your shop, its services and its prices.

What’s new in 3.0

• Now on Bootstrap 5.3.8 (the earlier release shipped a Bootstrap 5.0 beta and jQuery 1.12.4), compiled from Sass together with the theme, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel on the photo strip, PhotoSwipe replaces Magnific Popup on the elements gallery, a keyboard-friendly menu panel replaces SlickNav, the browser’s own selects replace Nice Select, and Slick, WOW, CounterUp, Waypoints, ajaxChimp, the form and validation plugins and Modernizr, which loaded on every page with little or nothing to do, are gone. Lucide SVG icons and a 1.6 KB social-logo subset replace Font Awesome 5 and Themify (the Twitter bird is now the X logo). npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: the home page went from 2.0 MB and 63 requests to 855 KB and 38 requests, and the contact page from 2.5 MB and 69 requests to 366 KB and 12 requests. Every photo has an AVIF version with the JPEG or PNG as the fallback, real dimensions and lazy loading below the first screen, the split hero photos are cropped instead of stretched, Swiper and PhotoSwipe load only on the pages that use them, and 77 unused WebP copies and other unused images are gone. The download is now 3.4 MB (it was 5.6 MB).
• No third-party requests: Chivo and Open Sans are self-hosted, the contact page map is an OpenStreetMap map (no API key needed) that loads only when a visitor clicks “Show map”, and a Google Analytics 4 snippet stays commented out until you add your own ID. Before, every page loaded its web fonts from Google Fonts and a leftover analytics tag, and the contact page loaded the Google Maps script, which failed with a console error.
• Working forms: the contact form, the blog comment form, the blog sidebar newsletter and the elements page form send through includes/send-email.php, with validation, a spam trap and an in-page message. Before, the contact form posted to a mail script that was never included, the newsletter and comment forms posted nowhere, and the elements form had no send button.
• Accessibility: a skip link and a main landmark on every page, one h1 per page, a labelled menu button, a mobile menu that keeps keyboard focus inside and closes with Esc, a Blog submenu that opens from the keyboard, names on icon-only links, labelled form fields, a visible focus ring, a photo strip that pauses on hover and focus and for visitors who prefer reduced motion, and WCAG AA text contrast: a darker red for small text and behind white text, darker greys, lighter footer text and readable elements page buttons.
• Fixed: on phones the menu was a plain grey bar, because the shipped stylesheet had lost the theme’s menu styles; it is now the design’s MENU button, which opens a menu panel. The photo strip on the home and about pages plays on its own and loops, now with Swiper. The elements page selects no longer show two arrows, the “Right Aligned” sample is right-aligned, placeholder links that pointed to “#” now go to real pages, and every page has its own title and description (every page had the same title), with Open Graph tags, a share image and barbershop structured data.
• Demo content: barbershop copy replaces lorem ipsum and off-topic filler, with named services and their own prices (four identical prices before), customer reviews, five blog posts and an article, a header button that books an appointment, and fictional names, an address, a phone number and an example email throughout. Photos that showed brand names are replaced with Unsplash photos or blurred, and the off-topic blog photos are now barbershop photos.