Question 254986 in CSS Question posted in
Some basic documentation can be found here.

Css – Navbar button doesn't show on small and tall devices

@media screen and (max-width: 1023px) {
  .nav__menu {
    position: fixed;
    top: -100%;
    left: 0;
    background-color: var(--body-color);
    width: 100%;
    box-shadow: 0 1px 16px hsla(210, 55%, 24%, .1);
    padding-block: 3.5rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: right; 
    row-gap: 2.5rem;
    transition: top .4s;
  }


  .nav__toggle {
    display: flex;
    flex-direction: column;
    align-items: right; 
    font-size: 1.25rem;
    color: var(--title-color);
    cursor: pointer;
  }

Here is my code for my navbar button for my website, for some reason the navbar button does not show for small and tall devices. It does show for the iPad air dimension but not for anything smaller than that. You can check my full website at www.yangbenernih.com . Help is very much appreciated!

I tried justifying the nav button so that it centers, that didnt work. I tried aligning it to the left instead of the right, that didnt work. I really dont understand the issue, probably just a dumb silly mistake on my part lol.

Tags:

2

Answers


  1. 0

    The problem is in .container class.
    If you have added any breakpoint for mobile devices than follow the code below:

    @media screen and (max-width: 600px) {
  .container {
    width: auto;
  }
}

    As you can see, you have put width: 100%; for .container class/ .nav class.
    You Just have to add a breakpoint for mobile devices and change width to auto.
    I hope this will solve the issue you are facing…

    Login or Signup to reply.
  2. 0

    A couple of things to add:

    The .nav__menu is positioned off-screen with top: -100%;. If you’re toggling the visibility by changing this property, make sure that the value is being updated correctly.

    The value "right" is not a valid value for the align-items property. You can use "flex-end" to align items to the end of the container.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search