Mobile nav bar

Hi guys i have a space between my header and navbar on small screens. How can i make it like the picture or whats going wrong? https://codepen.io/Boeroe/pen/xxMgrxz
Boeroe
CodePen
xxMgrxz
...
No description
No description
9 Replies
MarkBoots
MarkBoots13mo ago
your .navbar is a <ul> that has default padding and margin. set those to 0
Boeroe
Boeroe13mo ago
Margin to 0 did it yes. Sometimes it can be so easy haha. And why is my text horizontal and not vertical?
C_7
C_712mo ago
@media (max-width: 768px) {
.header {
background: rgb(36, 1, 58);
}

#menu-icon {
display: block;
}

.navbar {
position: absolute;
top: 100%;
left: 0;
width: 100%;
padding: 1rem 4%;
background: rgb(36, 1, 58);
box-shadow: 0 .5rem 1rem rgba (0, 0, 0, 2);
flex-direction: column; /* Key code */
}

.navbar a {
display: block;
font-size: 1.8rem;
margin: 3rem 0;
}
}
@media (max-width: 768px) {
.header {
background: rgb(36, 1, 58);
}

#menu-icon {
display: block;
}

.navbar {
position: absolute;
top: 100%;
left: 0;
width: 100%;
padding: 1rem 4%;
background: rgb(36, 1, 58);
box-shadow: 0 .5rem 1rem rgba (0, 0, 0, 2);
flex-direction: column; /* Key code */
}

.navbar a {
display: block;
font-size: 1.8rem;
margin: 3rem 0;
}
}
Boeroe
Boeroe12mo ago
When i do that that navbar is getting on the whole page. So not like the first picture
C_7
C_712mo ago
That's because you gave a big margin
.navbar a {
display: block;
font-size: 1.8rem;
/* margin: 3rem 0; */
}
.navbar a {
display: block;
font-size: 1.8rem;
/* margin: 3rem 0; */
}
MarkBoots
MarkBoots12mo ago
because your ul.navbar has display flex. by default flex has flex-direction: row, if you want to change it for mobile, do flex-direction: column in your media query
Boeroe
Boeroe12mo ago
It worked yes, i deleted the margin aswel so its not that big. Only my hover effect is all over the place now @C_7
No description
C_7
C_712mo ago
/* Method 1 */
.navbar a {
/* display: block; */
font-size: 1.8rem;
/* margin: 3rem 0; */
}


/* Method 2 */
.navbar a {
display: block;
font-size: 1.8rem;
/* margin: 3rem 0; */
width: fit-content;
}
/* Method 1 */
.navbar a {
/* display: block; */
font-size: 1.8rem;
/* margin: 3rem 0; */
}


/* Method 2 */
.navbar a {
display: block;
font-size: 1.8rem;
/* margin: 3rem 0; */
width: fit-content;
}
There is a difference between these two ways of writing. The reason for this problem is that the box element will occupy a full line by default. It is recommended to add this at the beginning of the code
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
Boeroe
Boeroe12mo ago
It worked, i used method 2. But what is fit-content really doing
Want results from more Discord servers?
Add your server