Navbar 1

Mobile Full Nav

HAMBURGER: Uses clip-path to create a hamburger menu open effect. Description includes full screen property sizes for phone size navbar with slide out effects. (Preview on the side and see the source code of the navbar below on codepen.)

Tech stack : HTML/CSS

See Code


VaithiSniper's Navbar1 Navbar 2

Mobile Nav

Hamburger operated minimalistic navbar: Uses display CSS property to create a hamburger menu open effect. Description includes full screen property sizes for phone size navbar with slide out effects. (Preview on the side and see the source code of the navbar below on codepen.)

Tech stack : HTML/CSS/JS

See Code


thetribunalcode's navbar-1 Navbar 3

PC Nav

Gothic style navbar: A dark themed navbar with a login CTA button with on hover effects for the nav-links and the button (Preview on the side and see the source code of the navbar below on codepen.)

Tech stack : HTML/CSS

See Code


Priyanshi's Navbar2 Navbar 4

Sticky Navbar

This page include fixed navigation bar. The navigation bar will stay at the top of the page while scrolling. (Preview on the side and see the source code of the navbar below on codepen.)

Tech stack : HTML/CSS

See Code


VaithiSniper's Navbar2 Navbar 5

Gradient background nav

Animated-gradient background navbar: Uses CSS animation and gradients to create a gradient-animation effect. Description includes full screen property sizes for phone size navbar with slide out effects. (Preview on the side and see the source code of the navbar below on codepen.)

Tech stack : HTML/CSS

See Code


ShiviDev's Navbar1 Navbar 6

Full Screen Navbar

A professional navbar with dropdown section and brand. (Preview on the side and see the source code of the navbar below on codepen.)

Tech stack : HTML/CSS/Bootstrap

See Code