Skip to content
Sign upLog in
This post is read-only. Explore Repls and connect with other creators on Community.View Community
The info in this post might be out of date, check out our docs instead. View docs

Navigation Bar


I need help, or the exact code, for a horizontal nav bar in html.

2 years ago
You are viewing a single comment. View All

You can style a navigation bar with CSS:

nav { --main-colour: blue; /* change this */ --other-colour: white; /* change this */ display: flex; /* flexbox; easy layouting */ width: 100%; /* full width */ align-items: stretch; /* make everything fit */ background-color: var(--main-colour); /* background colour */ color: var(--other-colour); /* foreground colour */ box-shadow: 0px 0px 4px 0px black; /* shadow */ z-index: 2; /* higher than other elements */ } nav > * { /* navigation items */ color: inherit; /* make white */ padding: 8px; /* leave some space between items */ }

Put a <nav> element at the top of your HTML, and put links or whatever in it.

This creates a basic horizontal navigation bar.

If this is for school work, please do not simply ask for code. At least try to understand what is given (and be wary of some people copy-pasting from other sites)

2 years ago