CODEWITHSUNDEEP
htmlcss
Albance
Albance

Reputation: 167

HTML/CSS Stay in header

Hey guys is it possible to make navigation bar stay in header no matter padding? Coz i want to make The Site title and menu in one line and i thought padding would do that...

enter image description here

#banner {
  background-color: #d3135a;
  height: 120px;
  margin-bottom: 4%;
}
h1 {
  float: left;
  padding-bottom: 6%;
}
#pav {
  font: Trebuchet MS;
  float: left;
  padding-left: 4%;
  margin-top: 4%;
}
#menu_virsut li {
  display: inline;
}
#menu_virsut {
  float: right;
  margin-top: 5%;
  padding-right: 4%;
  padding-bottom: 2%;
  padding-top: 1%;
}
<header id="banner">

  <h1>The Site</h1>

  <nav id="menu_virsut">
    <ul>
      <li><a href>menu link</a>
      </li>
      <li><a href>menu link</a>
      </li>
      <li><a href>menu link</a>
      </li>
    </ul>
  </nav>
</header>

Upvotes: 1

Views: 95

Answers (2)

Henry Zhu
Henry Zhu

Reputation: 2618

A simple way for alignment is to set the same line-height for the h1 tag and the container. Your href tags don't have a link. "#" is what you would put if you don't want the link to go anywhere.

JSFiddle: http://jsfiddle.net/9vwjbq8n/

#banner {
  background-color: #d3135a;
  height: 120px;
  margin-bottom: 4%;
}
h1 {
  float: left;
  line-height: 120px;
}
#pav {
  font: Trebuchet MS;
  float: left;
  padding-left: 4%;
  margin-top: 4%;
}
#menu_virsut li {
  display: inline;
}
#menu_virsut {
  float: right;
  line-height: 120px;
}

Upvotes: 1

odedta
odedta

Reputation: 2478

Yes, remove the margins from each element in your header, or more like it, fix their values.

e.g. remove margin-top: 5%; from menu_virsut

Your markup is wrong, as a general rule, if you're creating a navigation menu you should create a <ul> tag and put all the nav items inside, then you can use float: right; on that <ul> element. If you want a logo, create another <ul> element and give it property float: left;. Make sure all the margins are okay and you're done.

I have created an example jsfiddle to illustrate how to write a good header/ navigation menu. https://jsfiddle.net/akhzywag/

Upvotes: 0

Related Questions