Question 353691 in Html Question posted in
Some basic documentation can be found here.

Html – beginner with a problem in responsive sites

enter image description here
I NEED HELP! I am new in development and trying responsive sites and when I use the toggle devices toggle it doesnt hide the links it just kinda expands the page, please refer to the image for a better description of what im referring to.

P.S I was just practicing, I apologize for the bad layout 🙂

Here is the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

    <nav>
        <div class="logo">
            <h4>Wew</h4>
        </div>
        <ul class="links">
            <li><a href=""></a>hehehh</li>
            <li><a href=""></a>hehehh</li>
            <li><a href=""></a>hehehh</li>
            <li><a href=""></a>hehehh</li>
        </ul>
        <div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
    </nav>
    
    <script src="index.js"></script>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    width: 100%;
    overflow-x: hidden;
  }
nav {
    align-items: center;
    background-color: red;
    display: flex;
    padding: 0 5rem;
    justify-content: space-between;
    height: 90px;
}
nav ul {
    display: flex;
    gap: 40px;
}
nav li {
    list-style: none;
}
.burger div {
    width: 25px;
    height: 3px;
    margin: 4px;
    background-color: black;
}
.burger {
    display: none;
}

@media screen and (max-width: 940px) {
    body {
        overflow-x: hidden;
    }
    .burger {
        display: block;
    }
    .links {
        position: absolute;
        right: -100%;
        top: 5.6rem;
        height: 300px;
        width: 200px;
        flex-direction: column;
        background-color: red;
        transition: all 0.50s ease;
    }
    .links li {
        position: relative;
        left: 30px;
        width: 100px;
        top: 20px;
    }
    .burger {
        z-index: 1;
    }
}

.nav-active {
    right: 0%;
}

const Navslide = () => {
    const burger = document.querySelector(".burger")
    const links = document.querySelector(".links")

    burger.addEventListener("click", () => {
        links.classList.toggle("nav-active")
    })
}

Navslide()
Tags:

2

Answers


  1. 0

    It seems you’re having an issue with creating a responsive navigation menu that hides the links and shows them when a ‘burger’ icon is clicked. From your provided code, you’re on the right track. However, the JavaScript function that adds the ‘nav-active’ class to your links appears correct, but ensure that it is indeed included and properly linked in your index.js file.

    Also, the ‘nav-active’ class should be defined in your CSS to override the right: -100% property of your .links class. This change will move the navigation links into view when the ‘nav-active’ class is applied.

    Here’s how the ‘nav-active’ class should look in your CSS:

    .nav-active {
    right: 0;
}

    And your JavaScript seems fine. Make sure it is not inside a script tag with the type="module" attribute unless you intend to use modules.

    Furthermore, the a elements inside the li tags don’t have any text between the opening and closing tags. Instead, you should put the "hehehh" text inside the a tags like so:

    <li><a href="#">hehehh</a></li>

    After making sure that your JavaScript file is properly linked and loaded after the HTML body (as it seems from your code), clicking the burger should toggle the ‘nav-active’ class, causing the menu to slide in and out of view.

    If you make these changes and it still doesn’t work, there might be an issue with how the JavaScript is being loaded or an error in the script execution. Check the browser’s console for any JavaScript errors, as they can provide clues about what’s going wrong.

    Lastly, ensure you include the viewport meta tag in the head of your document if you haven’t already. This is necessary for responsive designs to work properly on mobile devices:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    If you have already included this tag, you should be good to go with the rest of the changes suggested.

    Login or Signup to reply.
  2. 0

    Here you will give the position absolute into the links but you cannot specify the relative section so when you click on the toggle button, the menu links go to the outside of the div and show to horizontal scroll on the screen. so give the position:relative on the navigation tag and so the scrollbar is not showing.

    currently only header is available on screen not the other content on screen so outside links are not showing so we just add screen height into the body tag so menu is showing properly and not show the horizontal scrollbar and we got the output as per your requirement.

    const Navslide = () => {
    const burger = document.querySelector(".burger")
    const links = document.querySelector(".links")

    burger.addEventListener("click", () => {
        links.classList.toggle("nav-active")
    })
}

Navslide()
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    width: 100%;
    overflow-x: hidden;
}

nav {
    align-items: center;
    background-color: red;
    display: flex;
    padding: 0 5rem;
    justify-content: space-between;
    height: 90px;
    position: relative;
}

nav ul {
    display: flex;
    gap: 40px;
}

nav li {
    list-style: none;
}

.burger div {
    width: 25px;
    height: 3px;
    margin: 4px;
    background-color: black;
}

.burger {
    display: none;
}

@media screen and (max-width: 940px) {
    body {
        overflow-x: hidden;
        height: 100vh;
    }

    .burger {
        display: block;
    }

    .links {
        position: absolute;
        right: -100%;
        top: 5.6rem;
        height: 300px;
        width: 200px;
        flex-direction: column;
        background-color: red;
        transition: all 0.50s ease;
    }

    .nav-active {
        right: 0%;
    }

    .links li {
        position: relative;
        left: 30px;
        width: 100px;
        top: 20px;
    }

    .burger {
        z-index: 1;
    }
}
    <nav>
    <div class="logo">
        <h4>Wew</h4>
    </div>
    <ul class="links">
        <li><a href="">hehehh</a></li>
        <li><a href="">hehehh</a></li>
        <li><a href="">hehehh</a></li>
        <li><a href="">hehehh</a></li>
    </ul>
    <div class="burger">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
    </div>
</nav>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search