CODEWITHSUNDEEP
htmlcss
NOUR NUR
NOUR NUR

Reputation: 35

How do I fix the header?

I've changed my header, and I'm pretty happy with the results but my h1 isn't on top of the header but right below it.

I've changed the z-index, top, margin-top, padding, etc. but it still isn't on top of the header but sticks right below it.

#banner {
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    width: 100%;
    height: 70px;
    z-index: 99999;
    position: fixed;
    top: 0;
    left: 0;
}
header {
    position: relative;
    width: 100%;
    height: 70px;
    margin: 0 auto;
}
header hgroup {
    position: absolute;
    display: block;
    top: 5px;
    left: 20px;
}
header hgroup h1 {
	  font-size: 50px;
    display: block;
    height: 100px;
    width: 610px;
}
nav {
	float: right;
}
nav ul li:hover > ul {
	display: block;
}
nav ul {
	margin-top: 10px;
	padding: 0 20px;  
	list-style: none;
	position: relative;
	display: inline-table;

}
nav ul:after {
	content: ""; 
	clear: both; 
	display: block;
}
nav ul li {
	float: left;
}

nav ul li a {
	display: block; 
	padding: 15px 15px;		
  font-family: 'Crimson Text', sans-serif;
	text-decoration: none;
}

body {
  background: #dcdcdc;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  margin: 0px;
}

p, h1 {
	font-family: 'Crimson Text', Serif;
}

ul, li {
  list-style-type: none;
}

ul li {
  display: inline-block;
  box-sizing: border-box;
  text-align: left;
}

.main-button {
  display: inline-block;
  width: 79px;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  font-size: 16px;
}

.main-button:hover {
  background: rgba(255, 255, 255, 0.1);
  transition: 1s;
  cursor: pointer;
}

h3 {
  text-align: center;
  font-size: 44px;
}

.container {
  box-sizing: border-box;
  margin: auto;
  max-width: 70%;
  padding: 20px;
}

.button {
  display: inline-block;
  width: 130px;
  margin: 10px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
}

.button:hover {
  background: rgb(0, 105, 242);
  transition: 0.25s;
  color: white;
  cursor: pointer;
}

a {
  text-decoration: none;
}

a:hover {
  color: white;
  transition: 0.5s;
}

.content1 {
  background: rgba(255, 255, 255, 0.15);
}

.content2 {
  background: rgba(255, 255, 255, 0.1);
}

@keyframes example {
    0%   {color: #e91e63;}
    14%  {color: #e74c3c;}
    28%  {color: #f1c40f;}
    42% {color: #2ecc71;}
    56% {color: #3498db;}
    72% {color: #71368a;}
    86% {color: #9b59b6;}
    100%   {color: #91e63;}
}

body, a {
    color: red;
    animation-name: example;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

.menu-list {
  list-style-type: disc;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
}

.menu-list .li {
  margin: auto;
  display: flex;
  width: 60%;
  /* 'justify-content: space-between;' does the trick of
  separating the two items in the li */
  justify-content: space-between;
  border-bottom: 1px dotted;
}

.menu-list .li .title,
.menu-list .li .price {
  display: flex;
}

.menu-list .li .title {
  font-size: 18px;
  align-self: flex-end;
}

.menu-list .li .price {
  font-size: 30px;
}
<html>
  <head>
  <link rel="stylesheet" type="text/css" href="website.css">
  <link href="https://fonts.googleapis.com/css?family=Crimson+Text|Montserrat" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
  </head>
  <body>
<div id="banner">
    <header>
        <hgroup>
            <h1>Silver · Spoon</h1>
        </hgroup>
        <nav>
	        <ul>
		        <li class="main-button home-button"><a class='page-button' data-page_num='1' href='javascript:voide(0)'>Home</a></li>
		        <li class="main-button menu1-button"><a class='page-button' data-page_num='2' href='javascript:voide(0)'>Drinks</a></li>
			    <li class="main-button menu2-button"><a class='page-button' data-page_num='3' href='javascript:voide(0)'>Snacks</a></li>
		        <li class="main-button about-button"><a class='page-button' data-page_num='4' href='javascript:voide(0)'>About</a></li>
            </ul>
       </nav>
    </header>
    </div>
    <div class="page">
  <div id="Home">
  <div class="content1">
  <div class="container">
  <a class='page-button' data-page_num='2' href='javascript:voide(0)'>
      	<h3>Drinks Menu</h3>
    </a>
    <h4>Buy one, get 50% off.</h4>
    <p>Silver Spoon has high-quality drinks that will quench your thirst at an affordable price. Find out more on the drinks menu.</p>
  </div>
  </div>
    <div class="content2">
      <div class="container">
      <a class='page-button' data-page_num='3' href='javascript:voide(0)'>
      	<h3>Snacks Menu</h3>
      </a>
        <h4>Now introducing edible food.</h4>
        <p>Silver Spoon has a high-quality snacks menu with affordable prices. Find out more on the food menu page.</p>
      </div>
      <div class="content1">
        <div class="container">
          <h3>About</h3>
          <p>Read more about Silver Spoon on our about page.</p>
        </div>
      </div>
    </div>
  </div>
  </div>
  <div class="page">
    <div id="Drinks">
    <ul class="menu-list">
  <li class="li"><span class="title">Cafe Americano</span><span class="price">3<sup>99</sup></span></li>
  <li class="li"><span class="title">Iced Latte</span><span class="price">4<sup>99</sup></span></li>
  <li class="li"><span class="title">Caramel Macchiato</span><span class="price">5<sup>50</sup></span></li>
      <li class="li"><span class="title">Espresso</span><span class="price">4<sup>50</sup></span></li>
      <li class="li"><span class="title">Blonde Roast</span><span class="price">3<sup>00</sup></span></li>
      <li class="li"><span class="title">Iced Coffee w/ Milk</span><span class="price">4<sup>00</sup></span></li>
      <li class="li"><span class="title">Cold Brew w/ Foam</span><span class="price">4<sup>50</sup></span></li>
      <li class="li"><span class="title">Dark Roast</span><span class="price">3<sup>00</sup></span></li>
      <li class="li"><span class="title">Hot Chocolate</span><span class="price">4<sup>00</sup></span></li>
    </div>
  </div>
  </div>
  <div class="page">
    <div id="About">
      <div class="content1">
        <div class="container">
          <h3>About Us</h3>
          <p>Silver Spoon is dedicated to producing affordable but exquisite food that will satisfy our customers. </p>
        </div>
      </div>
    </div>
</div>    
</body>
</html>

I want the h1 to be on top of the header, instead of below it.

Upvotes: 1

Views: 85

Answers (4)

Pritesh Bhoi
Pritesh Bhoi

Reputation: 1096

Add margin:0; to header hgroup h1

#banner {
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    width: 100%;
    height: 70px;
    z-index: 99999;
    position: fixed;
    top: 0;
    left: 0;
}
header {
    position: relative;
    width: 100%;
    height: 70px;
    margin: 0 auto;
}
header hgroup {
    position: absolute;
    display: block;
    top: 5px;
    left: 20px;
}
header hgroup h1 {
    margin: 0;
	  font-size: 40px;
    display: block;
    height: 100px;
    width: 610px;
}
nav {
	float: right;
}
nav ul li:hover > ul {
	display: block;
}
nav ul {
	margin-top: 10px;
	padding: 0 20px;  
	list-style: none;
	position: relative;
	display: inline-table;

}
nav ul:after {
	content: ""; 
	clear: both; 
	display: block;
}
nav ul li {
	float: left;
}

nav ul li a {
	display: block; 
	padding: 15px 15px;		
  font-family: 'Crimson Text', sans-serif;
	text-decoration: none;
}

body {
  background: #dcdcdc;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  margin: 0px;
}

p, h1 {
	font-family: 'Crimson Text', Serif;
}

ul, li {
  list-style-type: none;
}

ul li {
  display: inline-block;
  box-sizing: border-box;
  text-align: left;
}

.main-button {
  display: inline-block;
  width: 79px;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  font-size: 16px;
}

.main-button:hover {
  background: rgba(255, 255, 255, 0.1);
  transition: 1s;
  cursor: pointer;
}

h3 {
  text-align: center;
  font-size: 44px;
}

.container {
  box-sizing: border-box;
  margin: auto;
  max-width: 70%;
  padding: 20px;
}

.button {
  display: inline-block;
  width: 130px;
  margin: 10px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
}

.button:hover {
  background: rgb(0, 105, 242);
  transition: 0.25s;
  color: white;
  cursor: pointer;
}

a {
  text-decoration: none;
}

a:hover {
  color: white;
  transition: 0.5s;
}

.content1 {
  background: rgba(255, 255, 255, 0.15);
}

.content2 {
  background: rgba(255, 255, 255, 0.1);
}

@keyframes example {
    0%   {color: #e91e63;}
    14%  {color: #e74c3c;}
    28%  {color: #f1c40f;}
    42% {color: #2ecc71;}
    56% {color: #3498db;}
    72% {color: #71368a;}
    86% {color: #9b59b6;}
    100%   {color: #91e63;}
}

body, a {
    color: red;
    animation-name: example;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

.menu-list {
  list-style-type: disc;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
}

.menu-list .li {
  margin: auto;
  display: flex;
  width: 60%;
  /* 'justify-content: space-between;' does the trick of
  separating the two items in the li */
  justify-content: space-between;
  border-bottom: 1px dotted;
}

.menu-list .li .title,
.menu-list .li .price {
  display: flex;
}

.menu-list .li .title {
  font-size: 18px;
  align-self: flex-end;
}

.menu-list .li .price {
  font-size: 30px;
}
<html>
  <head>
  <link rel="stylesheet" type="text/css" href="website.css">
  <link href="https://fonts.googleapis.com/css?family=Crimson+Text|Montserrat" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
  </head>
  <body>
<div id="banner">
    <header>
        <hgroup>
            <h1>Silver · Spoon</h1>
        </hgroup>
        <nav>
            <ul>
                <li class="main-button home-button"><a class='page-button' data-page_num='1' href='javascript:voide(0)'>Home</a></li>
                <li class="main-button menu1-button"><a class='page-button' data-page_num='2' href='javascript:voide(0)'>Drinks</a></li>
                <li class="main-button menu2-button"><a class='page-button' data-page_num='3' href='javascript:voide(0)'>Snacks</a></li>
                <li class="main-button about-button"><a class='page-button' data-page_num='4' href='javascript:voide(0)'>About</a></li>
            </ul>
       </nav>
    </header>
    </div>
    <div class="page">
  <div id="Home">
  <div class="content1">
  <div class="container">
  <a class='page-button' data-page_num='2' href='javascript:voide(0)'>
        <h3>Drinks Menu</h3>
    </a>
    <h4>Buy one, get 50% off.</h4>
    <p>Silver Spoon has high-quality drinks that will quench your thirst at an affordable price. Find out more on the drinks menu.</p>
  </div>
  </div>
    <div class="content2">
      <div class="container">
      <a class='page-button' data-page_num='3' href='javascript:voide(0)'>
        <h3>Snacks Menu</h3>
      </a>
        <h4>Now introducing edible food.</h4>
        <p>Silver Spoon has a high-quality snacks menu with affordable prices. Find out more on the food menu page.</p>
      </div>
      <div class="content1">
        <div class="container">
          <h3>About</h3>
          <p>Read more about Silver Spoon on our about page.</p>
        </div>
      </div>
    </div>
  </div>
  </div>
  <div class="page">
    <div id="Drinks">
    <ul class="menu-list">
  <li class="li"><span class="title">Cafe Americano</span><span class="price">3<sup>99</sup></span></li>
  <li class="li"><span class="title">Iced Latte</span><span class="price">4<sup>99</sup></span></li>
  <li class="li"><span class="title">Caramel Macchiato</span><span class="price">5<sup>50</sup></span></li>
      <li class="li"><span class="title">Espresso</span><span class="price">4<sup>50</sup></span></li>
      <li class="li"><span class="title">Blonde Roast</span><span class="price">3<sup>00</sup></span></li>
      <li class="li"><span class="title">Iced Coffee w/ Milk</span><span class="price">4<sup>00</sup></span></li>
      <li class="li"><span class="title">Cold Brew w/ Foam</span><span class="price">4<sup>50</sup></span></li>
      <li class="li"><span class="title">Dark Roast</span><span class="price">3<sup>00</sup></span></li>
      <li class="li"><span class="title">Hot Chocolate</span><span class="price">4<sup>00</sup></span></li>
    </div>
  </div>
  </div>
  <div class="page">
    <div id="About">
      <div class="content1">
        <div class="container">
          <h3>About Us</h3>
          <p>Silver Spoon is dedicated to producing affordable but exquisite food that will satisfy our customers. </p>
        </div>
      </div>
    </div>
</body>
</div>
</body>
</html>

Upvotes: 2

Nisharg Shah
Nisharg Shah

Reputation: 19522

Add margin: 0 in your code and for looking nice, I decrease your font size by 10px

#banner {
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    width: 100%;
    height: 70px;
    z-index: 99999;
    position: fixed;
    top: 0;
    left: 0;
}
header {
    position: relative;
    width: 100%;
    height: 70px;
    margin: 0 auto;
}
header hgroup {
    position: absolute;
    display: block;
    top: 5px;
    left: 20px;
}
header hgroup h1 {
    margin: 0;
	  font-size: 40px;
    display: block;
    height: 100px;
    width: 610px;
}
nav {
	float: right;
}
nav ul li:hover > ul {
	display: block;
}
nav ul {
	margin-top: 10px;
	padding: 0 20px;  
	list-style: none;
	position: relative;
	display: inline-table;

}
nav ul:after {
	content: ""; 
	clear: both; 
	display: block;
}
nav ul li {
	float: left;
}

nav ul li a {
	display: block; 
	padding: 15px 15px;		
  font-family: 'Crimson Text', sans-serif;
	text-decoration: none;
}

body {
  background: #dcdcdc;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  margin: 0px;
}

p, h1 {
	font-family: 'Crimson Text', Serif;
}

ul, li {
  list-style-type: none;
}

ul li {
  display: inline-block;
  box-sizing: border-box;
  text-align: left;
}

.main-button {
  display: inline-block;
  width: 79px;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  font-size: 16px;
}

.main-button:hover {
  background: rgba(255, 255, 255, 0.1);
  transition: 1s;
  cursor: pointer;
}

h3 {
  text-align: center;
  font-size: 44px;
}

.container {
  box-sizing: border-box;
  margin: auto;
  max-width: 70%;
  padding: 20px;
}

.button {
  display: inline-block;
  width: 130px;
  margin: 10px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
}

.button:hover {
  background: rgb(0, 105, 242);
  transition: 0.25s;
  color: white;
  cursor: pointer;
}

a {
  text-decoration: none;
}

a:hover {
  color: white;
  transition: 0.5s;
}

.content1 {
  background: rgba(255, 255, 255, 0.15);
}

.content2 {
  background: rgba(255, 255, 255, 0.1);
}

@keyframes example {
    0%   {color: #e91e63;}
    14%  {color: #e74c3c;}
    28%  {color: #f1c40f;}
    42% {color: #2ecc71;}
    56% {color: #3498db;}
    72% {color: #71368a;}
    86% {color: #9b59b6;}
    100%   {color: #91e63;}
}

body, a {
    color: red;
    animation-name: example;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

.menu-list {
  list-style-type: disc;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
}

.menu-list .li {
  margin: auto;
  display: flex;
  width: 60%;
  /* 'justify-content: space-between;' does the trick of
  separating the two items in the li */
  justify-content: space-between;
  border-bottom: 1px dotted;
}

.menu-list .li .title,
.menu-list .li .price {
  display: flex;
}

.menu-list .li .title {
  font-size: 18px;
  align-self: flex-end;
}

.menu-list .li .price {
  font-size: 30px;
}
<html>
  <head>
  <link rel="stylesheet" type="text/css" href="website.css">
  <link href="https://fonts.googleapis.com/css?family=Crimson+Text|Montserrat" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
  </head>
  <body>
<div id="banner">
    <header>
        <hgroup>
            <h1>Silver · Spoon</h1>
        </hgroup>
        <nav>
	        <ul>
		        <li class="main-button home-button"><a class='page-button' data-page_num='1' href='javascript:voide(0)'>Home</a></li>
		        <li class="main-button menu1-button"><a class='page-button' data-page_num='2' href='javascript:voide(0)'>Drinks</a></li>
			    <li class="main-button menu2-button"><a class='page-button' data-page_num='3' href='javascript:voide(0)'>Snacks</a></li>
		        <li class="main-button about-button"><a class='page-button' data-page_num='4' href='javascript:voide(0)'>About</a></li>
            </ul>
       </nav>
    </header>
    </div>
    <div class="page">
  <div id="Home">
  <div class="content1">
  <div class="container">
  <a class='page-button' data-page_num='2' href='javascript:voide(0)'>
      	<h3>Drinks Menu</h3>
    </a>
    <h4>Buy one, get 50% off.</h4>
    <p>Silver Spoon has high-quality drinks that will quench your thirst at an affordable price. Find out more on the drinks menu.</p>
  </div>
  </div>
    <div class="content2">
      <div class="container">
      <a class='page-button' data-page_num='3' href='javascript:voide(0)'>
      	<h3>Snacks Menu</h3>
      </a>
        <h4>Now introducing edible food.</h4>
        <p>Silver Spoon has a high-quality snacks menu with affordable prices. Find out more on the food menu page.</p>
      </div>
      <div class="content1">
        <div class="container">
          <h3>About</h3>
          <p>Read more about Silver Spoon on our about page.</p>
        </div>
      </div>
    </div>
  </div>
  </div>
  <div class="page">
    <div id="Drinks">
    <ul class="menu-list">
  <li class="li"><span class="title">Cafe Americano</span><span class="price">3<sup>99</sup></span></li>
  <li class="li"><span class="title">Iced Latte</span><span class="price">4<sup>99</sup></span></li>
  <li class="li"><span class="title">Caramel Macchiato</span><span class="price">5<sup>50</sup></span></li>
      <li class="li"><span class="title">Espresso</span><span class="price">4<sup>50</sup></span></li>
      <li class="li"><span class="title">Blonde Roast</span><span class="price">3<sup>00</sup></span></li>
      <li class="li"><span class="title">Iced Coffee w/ Milk</span><span class="price">4<sup>00</sup></span></li>
      <li class="li"><span class="title">Cold Brew w/ Foam</span><span class="price">4<sup>50</sup></span></li>
      <li class="li"><span class="title">Dark Roast</span><span class="price">3<sup>00</sup></span></li>
      <li class="li"><span class="title">Hot Chocolate</span><span class="price">4<sup>00</sup></span></li>
    </div>
  </div>
  </div>
  <div class="page">
    <div id="About">
      <div class="content1">
        <div class="container">
          <h3>About Us</h3>
          <p>Silver Spoon is dedicated to producing affordable but exquisite food that will satisfy our customers. </p>
        </div>
      </div>
    </div>
</div>    
</body>
</html>

Upvotes: 3

KamLet
KamLet

Reputation: 92

You set height with 100px on your h1 tag and forgot about built-in margin for h1-h6 tags. The fastest way to remove unnecessary padding and margin is add to your css code:

* {
   margin: 0;
   padding: 0;
 }

Upvotes: 1

JamieT
JamieT

Reputation: 1187

Add a class in your css with properties margin-top: 0px; margin-bottom: 0px and apply it to your h1 tag . Ex)

CSS:

.header-fix {
    margin-top: 0px;
    margin-bottom: 0px;
}

Then in your html:

<h1 class="header-fix">Silver · Spoon</h1>

I was able to quickly find this by using the element inspector (F12 in most browsers) and applying some styling that achieved the desired result. Helps quickly identify fixes to style issues in cases like this.

plunker here: https://plnkr.co/edit/sCN7ZO5Ndn3Cm2HG0LNd?p=preview

Upvotes: 1

Related Questions