[CSS2] Horizontal Navigation Bar

**dday9** · Dec 29th, 2016, 02:43 PM

The following code docks a <h1> element to the left of the navigation and all <a> elements to the right of the navigation. It displays correctly in Internet Explorer 6 on up, but I cannot guarantee anything before that.

HTML:

HTML Code:

<ul class="navigation">
  <li><h1>Logo</h1></li>
  <li>
    <ul>
      <li><a href="#bg-1">Link 1</a></li>
      <li><a href="#bg-2">Link 2</a></li>
      <li><a href="#bg-3">Link 3</a></li>
      <li><a href="#bg-4">Link 4</a></li>
    </ul>
  </li>
</ul>

CSS:

Code:

ul.navigation {
  color: #777;
  list-style-type: none;
  margin: 0;
  padding: .75em .25em;
  width: 100%;
}

ul.navigation li {
  display: inline;
  line-height: 2em;
  margin: 0;
  padding: 0;
}

ul.navigation h1 {display: inline;}

ul.navigation ul {
  display: inline;
  float: right;
}

ul.navigation a {
  color: inherit;
  font-size: 1.25em;
  padding: 0 .25em;
  text-decoration: none;
}

ul.navigation a:hover {color: #0074D9;}

Fiddle: http://codepen.io/anon/pen/VmoxwR

When put through the W3 Validation Service, it is successfully checked as XHTML 1.0 Strict.

**Sherin** · Jan 31st, 2021, 11:37 PM

Please try this code, To Horizontal Navigation Bar

Code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {margin: 0;}

ul.topnavigation {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

ul.topnavigation li {float: left;}

ul.topnavigation li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul.topnavigation li a:hover:not(.active) {background-color: #111;}

ul.topnavigation li a.active {background-color: #4CAF50;}

ul.topnavigation li.right {float: right;}

@media screen and (max-width: 600px) {
  ul.topnavigation li.right, 
  ul.topnavigation li {float: none;}
}
</style>
</head>
<body>

<ul class="topnavigation">
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li class="right"><a href="#about">About</a></li>
</ul>

<div style="padding:0 16px;">
  <h2>Responsive Topnav Example</h2>
  <p>This example use media queries to stack the topnav vertically when the screen size is 600px or less.</p>
  <p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
  <h4>Resize the browser window to see the effect.</h4>
</div>

</body>
</html>

I hope this code will be useful to you.
Thank you.

Thread: [CSS2] Horizontal Navigation Bar

Thread Tools

Display

[CSS2] Horizontal Navigation Bar

Re: [CSS2] Horizontal Navigation Bar

Posting Permissions