intro

👉 This is a super simple mobile focused navbar.

👉 Understand your navigation, avoid unwanted bugs.

👉 Auto scroll to sections on mobile without having to build weird interactions.

👉 Easily integrate it into your favourite build method ( client-first, wizardry )

get started

1.) Copy the entire nav__bar into your project

2.) Make sure to keep the embedded CSS in it! ( or put the code your own CSS )

3.) Copy this and paste this jQuery code into the before <body></body>

4.) Don't forget to put it into a <script></script> tag 🙃

 
// ".nav trigger" removes/adds the ".nav__closed" class
$('.nav__trigger').on('click', function() {
  $(this).toggleClass('nav__closed');
});
// ".nav__link" adds the ".nav__closed" class so you can autoscroll to the next section
$('.nav__link').on('click', function() {
  $('.nav__trigger').addClass('nav__closed');
});

copy

how it works

👉 We basically just remove / add the ".nav__closed" class on the ".nav__trigger"

👉 But how is this possible? With good ol' CSS inheritance.

👉 These two lines ".nav__line" have simple CSS transforms on them

👉 Their initial state is determined by the ".nav__closed" combo class on their parent ".nav__trigger"

👉 Okay so far, it's nothing special, but here's the kicker that changed my life,
the magic wave symbol "~" ❤️

👉 This one is called General sibling combinator and it does exactly what it says, it targets an elements sibling. BUT in order to get it two work make sure that it's above the ".nav__wrapper"

👉 Okay you might say, nice but this version is super lame I want the menu to come in from the top or from the bottom or from the the right instead of the left and so on... just change the transform value in the nav__css

👉 You can also change the easing of the ".nav__wrapper" in the transform panel

intro

get started

how it works

one

two

three

four