Floating nav - underline

Floating nav
- underline

  1. Put the navbar in desired place with fixed positioning. Here I'm using 20px on the bottom.

  2. Change the variant to "Phone closed" on smaller breakpoints. Phone variants padding is adjusted with the components bottom padding, otherwise the opened menu wouldn't be able to span full height if it was set any amount of pixels from the bottom with the fixed positioning).

  1. Set the phone variants width to Relative = 100%.

  2. Set all the required nav links. In this step you need to create a variant for every link you want to have in this menu and then assign the variants to corresponding pages. The "current page" link will be highlighted with the underline (play with the underline and shape it to your own style - make it a circle, square or whatever you like).

  3. Change the links, colors, adjust opacity, style it to suit your own projects needs.

  4. Profit.