CODEWITHSUNDEEP
htmlcss
Ethical38
Ethical38

Reputation: 77

How would you fix the navigation bar that displays as a list?

When I try to make a navigation bar I want it to float right but when I do that the < li > elements display vertically when I want them horizontally.

#navigation ul{
  font-family: 'Roboto', sans-serif;
  float: right;
  overflow: hidden;
  line-height: 1px !important;
  /*position: fixed;*/
}
#navigation ul li h3 {
  font-weight: normal;
  font-size: 34px !important;
  color: #000;
  margin-right: auto;
  padding: 0;
  margin: auto;
  letter-spacing: 0.25px;
}
#navigation ul li {
  list-style: none;
  line-height: 40px !important;
}
#navigation a{
  text-align: center;
}
<header>
      <nav id="navigation">
        <ul>
          <li>
            <a href="./entry.html"><h3>Home</h3></a>
            <a href="#"><h3>About</h3></a>
            <a href="#"><h3>Timeline</h3></a>
            <a href="#"><h3>Video</h3></a>
          </li>
        </ul>
      </nav>
    </header>

Upvotes: 2

Views: 1066

Answers (4)

Bryce Howitson
Bryce Howitson

Reputation: 7690

You have a bunch of block elements that stack by default. So make the li's, a, h3 all display: inline or inline-block. Also, add a width to the UL since a "float" makes it collapse to the width of the content.

#navigation ul{
  font-family: 'Roboto', sans-serif;
  float: right;
  overflow: hidden;
  line-height: 1px !important;
  width: 100%;
  text-align: right;
}
#navigation ul li h3 {
  font-weight: normal;
  font-size: 34px !important;
  color: #000;
  margin-right: auto;
  padding: 0;
  margin: auto;
  letter-spacing: 0.25px;
}
#navigation ul li {
  list-style: none;
  line-height: 40px !important;
  display:inline-block;
}
#navigation a{
  text-align: center;
}
#navigation a, #navigation h3 {
  display:inline;
}
<header>
      <nav id="navigation">
        <ul>
          <li>
            <a href="./entry.html"><h3>Home</h3></a>
            <a href="#"><h3>About</h3></a>
            <a href="#"><h3>Timeline</h3></a>
            <a href="#"><h3>Video</h3></a>
          </li>
        </ul>
      </nav>
    </header>

Also, that's overly complicated from a markup standpoint. It used to be that putting navigation into an unordered list was a way to make it semantic but HTML5's Nav element can do that for you. A better way would look like this:

nav {
  font-size: 14px;
  font-family: sans-serif;
  text-align: right;
}
nav a {
  margin-left: 10px;
  padding: 5px;
  display: inline-block;
}
<nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Timeline</a>
    <a href="#">Video</a>
</nav>

Upvotes: 2

Yash009
Yash009

Reputation: 533

You need to create separate lines for these items.Changes your HTML to this 

<header>
    <nav id="navigation">
        <ul>
            <li class="menuItem">
                <a href="./entry.html">
                    <h3>Home</h3>
                </a>
            </li>
            <li class="menuItem">
                <a href="#">
                    <h3>About</h3>
                </a>
            </li>
            <li class="menuItem">
                <a href="#">
                    <h3>Timeline</h3>
                </a>
            </li>
            <li class="menuItem">
                <a href="#">
                    <h3>Video</h3>
                </a>
            </li>
        </ul>
    </nav>
</header>

And add this to your css

#navigation ul{
  display: flex;
  width:100%;
  font-family: 'Roboto', sans-serif;
  float: right;
  overflow: hidden;
  line-height: 1px !important;


  /*position: fixed;*/

    }
    .menuItem {
        padding: 10px;
    }

You can change the padding according to the way you like

Upvotes: 1

Flavio Caruso
Flavio Caruso

Reputation: 819

Try to insert a display: inline; on element.

#navigation ul li h3 {
 font-weight: normal;
 font-size: 34px !important;
 color: #000;
 margin-right: auto;
 float:right;
 padding: 0;
 margin: auto;
 letter-spacing: 0.25px;
 display:inline;

}

Upvotes: 3

John Positos
John Positos

Reputation: 11

The li items have a default display of list-item which stacks like block elements. If you add display: inline; to your li elements and display: inline-block; or display: inline; to your anchor tags inside the li it should display your menu items horizontally.

Upvotes: 1

Related Questions