CODEWITHSUNDEEP
htmlcss
Hamza
Hamza

Reputation: 630

Cant remove padding between nav-bar and banner css

I ran into a small problem while creating my website where an anonymous padding appears between my banner and nav-bar:enter image description here

Here is my code:

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <style>
    @import 'https://fonts.googleapis.com/css?family=Work+Sans:400,500,900';
    nav {
      padding-top: 0px;
      position: fixed;
      width: 100%;
      transition: top 0.2s ease-out;
    }
    
    .banner {
      text-align: center;
      width: 100%;
      box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.13);
    }
    
    nav ul#menu {
      padding-left: 0;
      display: flex;
      padding-top: 0px;
    }
    
    nav ul li {
      flex-grow: 1;
    }
    
    .nav-bar {
      /* Rectangle 1: */
      background: #FFFFFF;
      box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.11), 0px 4px 6px 0px rgba(0, 0, 0, 0.11);
      width: 100%;
      text-align: center;
    }
    
    //-------------------------------------------------------
    /*Strip the ul of padding and list styling*/
    
    ul {
      list-style-type: none;
      margin: 0;
      position: absolute;
    }
    /*Create a horizontal list with spacing*/
    
    li {
      display: inline-block;
      float: center;
      margin-right: 1px;
    }
    /*Style for menu links*/
    
    li a {
      display: block;
      min-width: 140px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      color: #fff;
      background: #2f3036;
      text-decoration: none;
    }
    /*Hover state for top level links*/
    
    li:hover a {
      background: #19c589;
    }
    /*Style for dropdown links*/
    
    li:hover ul a {
      background: #f3f3f3;
      color: #2f3036;
      height: 40px;
      line-height: 40px;
    }
    /*Hover state for dropdown links*/
    
    li:hover ul a:hover {
      background: #19c589;
      color: #fff;
    }
    /*Hide dropdown links until they are needed*/
    
    li ul {
      display: none;
    }
    /*Make dropdown links vertical*/
    
    li ul li {
      display: block;
      float: none;
    }
    /*Prevent text wrapping*/
    
    li ul li a {
      width: auto;
      min-width: 100px;
      padding-left: 0px;
      padding-right: 0px;
    }
    /*Display the dropdown on hover*/
    
    ul li a:hover+.hidden,
    .hidden:hover {
      display: block;
    }
    /*Style 'show menu' label button and hide it by default*/
    
    .show-menu {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      text-decoration: none;
      color: #fff;
      background: #19c589;
      text-align: center;
      padding-left: 0px;
      padding-right: 0px;
      display: none;
    }
    /*Hide checkbox*/
    
    input[type=checkbox] {
      display: none;
    }
    /*Show menu when invisible checkbox is checked*/
    
    input[type=checkbox]:checked~#menu {
      display: block;
    }
    /*Responsive Styles*/
    
    @media screen and (max-width: 760px) {
      /*Make dropdown links appear inline*/
      nav ul#menu {
        position: static;
        display: none;
      }
      /*Create vertical spacing*/
      li {
        margin-bottom: 1px;
      }
      /*Make all menu links full width*/
      ul li,
      li a {
        width: 100%;
      }
      /*Display 'show menu' link*/
      .show-menu {
        display: block;
      }
    }
    
    .hero-image {
      /* The image used */
      /* Set a specific height */
      height: 50%;
      width: 100%;
      /* Position and center the image to scale nicely on all screens */
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
    }
  </style>
</head>

<body>

  <nav>
    <div class="banner animated"><img class="hero-image" src="https://picsum.photos/1080/200/?random"></div>
    <div class="nav-bar"> <label for="show-menu" class="show-menu">Show Menu</label>
      <input type="checkbox" id="show-menu" role="button">
      <ul id="menu">
        <li><a href="#">Home</a></li>
        <li>
          <a href="#">About</a>
        </li>
        <li>
          <a href="#">Portfolio</a>
        </li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </nav>
</body>

</html>

*View in full screen to see it.

Is there a way I can fix this? Thank you in advance! As I have tried adding padding-top: 0px; to the nav bar so it could stick to the banner but it didn't work. My question is not a duplicate as the other questions problem is under a different circumstance.

Upvotes: 1

Views: 219

Answers (4)

Rahul R.
Rahul R.

Reputation: 6461

ul is the culprit. You need to add margin-top to 0 to your ul menu selector.

 nav ul#menu {
        padding-left: 0;
        display: flex;
        padding-top: 0px;
        margin-top: 0;
    }

To remove the tiny gap, as @j08691 mentioned, add the vertical-align: top; to your hero-image class.

Upvotes: 1

j08691
j08691

Reputation: 207901

You need to do two things. 1) set the vertical alignment on your image to top so it removes the gap reserved for descender text elements, and 2) remove the margin on your <ul>

@import 'https://fonts.googleapis.com/css?family=Work+Sans:400,500,900';
nav {
  padding-top: 0px;
  position: fixed;
  width: 100%;
  transition: top 0.2s ease-out;
}

.banner {
  text-align: center;
  width: 100%;
  box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.13);
}

nav ul#menu {
  padding-left: 0;
  display: flex;
  padding-top: 0px;
}

nav ul li {
  flex-grow: 1;
}

.nav-bar {
  /* Rectangle 1: */
  background: #FFFFFF;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.11), 0px 4px 6px 0px rgba(0, 0, 0, 0.11);
  width: 100%;
  text-align: center;
}

//-------------------------------------------------------

/*Strip the ul of padding and list styling*/

ul {
  list-style-type: none;
  margin: 0;
  position: absolute;
}


/*Create a horizontal list with spacing*/

li {
  display: inline-block;
  float: center;
  margin-right: 1px;
}


/*Style for menu links*/

li a {
  display: block;
  min-width: 140px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  background: #2f3036;
  text-decoration: none;
}


/*Hover state for top level links*/

li:hover a {
  background: #19c589;
}


/*Style for dropdown links*/

li:hover ul a {
  background: #f3f3f3;
  color: #2f3036;
  height: 40px;
  line-height: 40px;
}


/*Hover state for dropdown links*/

li:hover ul a:hover {
  background: #19c589;
  color: #fff;
}


/*Hide dropdown links until they are needed*/

li ul {
  display: none;
}


/*Make dropdown links vertical*/

li ul li {
  display: block;
  float: none;
}


/*Prevent text wrapping*/

li ul li a {
  width: auto;
  min-width: 100px;
  padding-left: 0px;
  padding-right: 0px;
}


/*Display the dropdown on hover*/

ul li a:hover+.hidden,
.hidden:hover {
  display: block;
}


/*Style 'show menu' label button and hide it by default*/

.show-menu {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: #fff;
  background: #19c589;
  text-align: center;
  padding-left: 0px;
  padding-right: 0px;
  display: none;
}


/*Hide checkbox*/

input[type=checkbox] {
  display: none;
}


/*Show menu when invisible checkbox is checked*/

input[type=checkbox]:checked~#menu {
  display: block;
}


/*Responsive Styles*/

@media screen and (max-width: 760px) {
  /*Make dropdown links appear inline*/
  nav ul#menu {
    position: static;
    display: none;
  }
  /*Create vertical spacing*/
  li {
    margin-bottom: 1px;
  }
  /*Make all menu links full width*/
  ul li,
  li a {
    width: 100%;
  }
  /*Display 'show menu' link*/
  .show-menu {
    display: block;
  }
}

.hero-image {
  /* The image used */
  /* Set a specific height */
  height: 50%;
  width: 100%;
  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  vertical-align:top;
}

#menu {
margin:0;
}
<nav>
  <div class="banner animated"><img class="hero-image" src="https://picsum.photos/1080/200/?random"></div>
  <div class="nav-bar"> <label for="show-menu" class="show-menu">Show Menu</label>
    <input type="checkbox" id="show-menu" role="button">
    <ul id="menu">
      <li><a href="#">Home</a></li>
      <li>
        <a href="#">About</a>
      </li>
      <li>
        <a href="#">Portfolio</a>
      </li>
      <li><a href="#">News</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

Upvotes: 2

sP_
sP_

Reputation: 1866

Add this to your styling to remove default margins and padding.

* {
    padding: 0px;
    margin: 0px;
}

Upvotes: 1

caramba
caramba

Reputation: 22480

You can add

img.hero-image {
    float: left;
}


img.hero-image {
    float: left;
}
<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <style>
    @import 'https://fonts.googleapis.com/css?family=Work+Sans:400,500,900';
    nav {
      padding-top: 0px;
      position: fixed;
      width: 100%;
      transition: top 0.2s ease-out;
    }
    
    .banner {
      text-align: center;
      width: 100%;
      box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.13);
    }
    
    nav ul#menu {
      padding-left: 0;
      display: flex;
      padding-top: 0px;
    }
    
    nav ul li {
      flex-grow: 1;
    }
    
    .nav-bar {
      /* Rectangle 1: */
      background: #FFFFFF;
      box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.11), 0px 4px 6px 0px rgba(0, 0, 0, 0.11);
      width: 100%;
      text-align: center;
    }
    
    //-------------------------------------------------------
    /*Strip the ul of padding and list styling*/
    
    ul {
      list-style-type: none;
      margin: 0;
      position: absolute;
    }
    /*Create a horizontal list with spacing*/
    
    li {
      display: inline-block;
      float: center;
      margin-right: 1px;
    }
    /*Style for menu links*/
    
    li a {
      display: block;
      min-width: 140px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      color: #fff;
      background: #2f3036;
      text-decoration: none;
    }
    /*Hover state for top level links*/
    
    li:hover a {
      background: #19c589;
    }
    /*Style for dropdown links*/
    
    li:hover ul a {
      background: #f3f3f3;
      color: #2f3036;
      height: 40px;
      line-height: 40px;
    }
    /*Hover state for dropdown links*/
    
    li:hover ul a:hover {
      background: #19c589;
      color: #fff;
    }
    /*Hide dropdown links until they are needed*/
    
    li ul {
      display: none;
    }
    /*Make dropdown links vertical*/
    
    li ul li {
      display: block;
      float: none;
    }
    /*Prevent text wrapping*/
    
    li ul li a {
      width: auto;
      min-width: 100px;
      padding-left: 0px;
      padding-right: 0px;
    }
    /*Display the dropdown on hover*/
    
    ul li a:hover+.hidden,
    .hidden:hover {
      display: block;
    }
    /*Style 'show menu' label button and hide it by default*/
    
    .show-menu {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      text-decoration: none;
      color: #fff;
      background: #19c589;
      text-align: center;
      padding-left: 0px;
      padding-right: 0px;
      display: none;
    }
    /*Hide checkbox*/
    
    input[type=checkbox] {
      display: none;
    }
    /*Show menu when invisible checkbox is checked*/
    
    input[type=checkbox]:checked~#menu {
      display: block;
    }
    /*Responsive Styles*/
    
    @media screen and (max-width: 760px) {
      /*Make dropdown links appear inline*/
      nav ul#menu {
        position: static;
        display: none;
      }
      /*Create vertical spacing*/
      li {
        margin-bottom: 1px;
      }
      /*Make all menu links full width*/
      ul li,
      li a {
        width: 100%;
      }
      /*Display 'show menu' link*/
      .show-menu {
        display: block;
      }
    }
    
    .hero-image {
      /* The image used */
      /* Set a specific height */
      height: 50%;
      width: 100%;
      /* Position and center the image to scale nicely on all screens */
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
    }
  </style>
</head>

<body>

  <nav>
    <div class="banner animated"><img class="hero-image" src="https://picsum.photos/1080/200/?random"></div>
    <div class="nav-bar"> <label for="show-menu" class="show-menu">Show Menu</label>
      <input type="checkbox" id="show-menu" role="button">
      <ul id="menu">
        <li><a href="#">Home</a></li>
        <li>
          <a href="#">About</a>
        </li>
        <li>
          <a href="#">Portfolio</a>
        </li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </nav>
</body>

</html>

Upvotes: 1

Related Questions