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

Fullscreen navbar

Professional fullscreen navbar with navlinks in center and dropdown menu for more options on the right. (Preview on the side and see the source code of the navbar below on codepen.)

Tech stack : HTML/CSS+Bootstrap

See Code


Deepak's Navbar7 Navbar 7

Mobile Nav

This page includes an hamburger style nav-bar. When the screen width becomes much smaller then the required screen then the navigation bar hides in the hamburger icon and it can be seen by clicking on it. (Preview on the side and see the source code of the navbar below on codepen.)

Tech stack : HTML/CSS/JS

See Code


ShiviDev's Navbar2 Navbar 8

Fullscreen navbar with icons for account-related actions

Fullscreen navbar with navlinks on the left and account-related actions (account,notifications and logout) on the right. (Preview on the side and see the source code of the navbar below on codepen.)

Tech stack : HTML/CSS+Bootstrap

See Code


thetribunalcode's navbar_2 Navbar 9

Animated hamburger Nav

A hamburger style nav-bar navbar with animation on open-up. (Preview on the side and see the source code of the navbar below on codepen.)

Tech stack : HTML/CSS

See Code


ShiviDev's Navbar2 Navbar 10

Classic bootstrap responsive navbar

A basic responsive navbar that changes to hamburger style on smaller viewports (Preview on the side and see the source code of the navbar below on codepen.)

Tech stack : HTML/CSS+Bootstrap

See Code


thetribunalcode's navbar_3 Navbar 11

Responsive nav

A responsive bootstrap navbar. (Preview on the side and see the source code of the navbar below on codepen.)

Tech stack : HTML/CSS+Bootstrap

See Code


Ritika Navbar Navbar 12

Sticky Navigable Desktop Navbar

A sticky navbar for desktopwith componenet of navbar linked to their respective sections on the page.

Tech stack : HTML/CSS

See Code


Full Screen Navbar Navbar 13

Full Screen Navigation Bar

A full screen navbar with social media icons that opens when user click to icon on top right corner

Tech stack : HTML/CSS/JS

See Code