Skip to content
Sign upLog in
← Back to Community

Navigation Bar

Profile icon
JoshuaBrown31

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

Voters
Profile icon
PuppyGirl0000
Profile icon
lizambeigel
Profile icon
EricGonzales
Profile icon
Sk4p1on
Profile icon
jaszyO
Profile icon
ANGELJOHNSON3
Profile icon
GLENDELLJONES
Profile icon
AnaClemente
Profile icon
MaiKayla
Profile icon
MayaBuenaventur
Comments
hotnewtop
Profile icon
IntellectualGuy

Here's the HTML code

<nav> <ul> <li>Home</li> <li>About Us</li> <li>Out Services</li> <!--Change the text based on your website, and if you want links just add anchor elements--> </ul> </nav>

And here's the CSS

nav li { /*Change the values to whatever you want*/ list-style-type:none; display:inline-flex; margin-right:50px; } nav li:last-child { margin-right:0px; } nav { background-color:black; color:white; padding:4px; }
Profile icon
RYANTADIPARTHI

Link

here's a link on how to make one.

https://www.w3schools.com/css/css_navbar.asp

Profile icon
19wintersp

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)

Profile icon
Coder100
Profile icon
tussiez

This appears to be a school assignment. I understand you need help, but asking for the exact code isn't a good way to learn..

However, this w3schools page will teach you how to make one, and show you the code :)

Profile icon
xxpertHacker

Why does it have to be horizontal? Is this a school assignment or something?

Profile icon
JoshuaBrown31

@xxpertHacker
yes

Profile icon
xxpertHacker

@JoshuaBrown31
You should learn to do it yourself, not ask for direct source code...