Clever Geek Handbook

Bridging the gap between HTML elements

I'm trying to get this dropdown to work, but there is a space between the title and the menu bar.

http://codepen.io/xdtrammell/pen/zneDa

Here is my css for two containers:

.menu-bar {
  width:100%;
  background-color: #f50057;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
}

.menu-drop {
  background-color:#212121;
  border-style: solid;
  border-color:#f50057;
  border-top:0px;
  border-width: 2px;
  border-bottom-left-radius:5px;
  border-bottom-right-radius:5px;
  width:99.6%;
  height:80px;
}

EDIT: We've fixed the items whitespace, but when using the switch, the gap still appears.

+3


source to share


3 answers


your .navicon is just a problem;) here's the Codepen fix and demo 



.navicon {
  /*float: right;*/
  height: 6px;
  width: 34px;
  margin-right:50px;
  border-top: 15px double #212121;
  border-bottom: 5px solid #212121;
  font-size: 0;
  /*position:relative;*/
  position:absolute; /* added */
  /*bottom:55px;*/
  right:6px; /* added */
  top:38px; /* added */
  cursor:pointer;
  transition: all .3s ease-in-out;
}
+2


source


Your h1 and your .button have margins at tops and bottoms.

I would suggest some kind of reset to set the margin to just 0 (this way only the margins in the game are defined by you).



I added the following code. Here's the updated Codepen

* {
    margin: 0;
}
0


source


Here is the updated code, remove margin:10px

from the body or make it likemargin:0

CSS

* {
  margin: 0;
  paddin:0;

}

body {
  font-family: 'Roboto', sans-serif;
  margin:0px;
}
0


source






More articles: