Ask coding questions

← Back to all posts
Navigation Bar
JoshuaBrown31 (6)

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

Comments
hotnewtop
19wintersp (1142)

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)

tussiez (1676)

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 :)

xxpertHacker (931)

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

xxpertHacker (931)

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

IntellectualGuy (848)

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;
}