NedDev®
NL Get in touch
Home Work
Services
SaaS developmentAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOEcommerce development
Solutions
AI solutionsB2B platformsE-commerceHospitalityLead generationLogisticsEducationProcess automationSaaS platformsStartup MVPReal estateHealthcare
Industries
LegalHealthcareReal estateFinanceHospitality
Regions
The HagueRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
AboutProcessLabBlogContact

Navigatie met logo in het midden New

Symmetric navbar: centred logo, links on both sides and the phone number as a button; on mobile a panel opens. Suits hospitality and shops with a strong wordmark.

How to use it

  1. Paste the HTML where the page sections should appear.
  2. Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
  3. Add the JavaScript and call init() with the element that contains the HTML.
<!-- Navigatie met logo in het midden · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="nsl">
  <div class="nsl__bar" role="navigation" aria-label="Hoofdmenu">
    <ul class="nsl__links nsl__links--l">
      <li><a href="#">Menukaart</a></li>
      <li><a href="#">Lunch</a></li>
      <li><a href="#">Wijnen</a></li>
    </ul>
    <button class="nsl__burger" type="button" aria-expanded="false" aria-label="Menu openen"><span></span><span></span><span></span></button>
    <a href="#" class="nsl__logo" aria-label="Brasserie De Kade, naar de homepage">
      <span class="nsl__logo-top">Brasserie</span>
      <span class="nsl__logo-main">De Kade</span>
      <span class="nsl__logo-sub">Zwolle · sinds 1998</span>
    </a>
    <div class="nsl__right">
      <ul class="nsl__links">
        <li><a href="#">Groepen</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <a class="nsl__tel" href="tel:+31381234567"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.6a1 1 0 0 1-.25 1z" fill="currentColor"/></svg><span>038 123 4567</span></a>
    </div>
    <div class="nsl__panel" aria-hidden="true">
      <ul class="nsl__plinks">
        <li><a href="#">Menukaart</a></li>
        <li><a href="#">Lunch</a></li>
        <li><a href="#">Wijnen</a></li>
        <li><a href="#">Groepen</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <p class="nsl__hours">Dinsdag t/m zondag · 11:00 tot 23:00<br>Thorbeckegracht 12, Zwolle</p>
      <a class="nsl__tel nsl__tel--wide" href="tel:+31381234567">Bel 038 123 4567</a>
    </div>
  </div>
  <div class="nsl__hero">
    <span class="nsl__kicker">Vanavond aan de gracht</span>
    <p class="nsl__title">Seizoensmenu van drie gangen voor € 42,50</p>
    <a href="#" class="nsl__btn">Reserveer een tafel</a>
  </div>
</div>
</div>

More page sections

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →