Kevin Powell - Community•13mo ago

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

...

9 Replies

MarkBoots•13mo ago

your .navbar is a <ul> that has default padding and margin. set those to 0

BoeroeOP•13mo 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•13mo 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;
    }
}

BoeroeOP•13mo ago

When i do that that navbar is getting on the whole page. So not like the first picture

C_7•13mo 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•13mo 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

BoeroeOP•13mo 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

C_7•13mo 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;
}

BoeroeOP•13mo ago

It worked, i used method 2. But what is fit-content really doing

Gaming

Programming

Mobile nav bar