Search code examples
javascripthtmlcssresponsive-design

I need Help at making a responsive menu

So i want to make this responsive menu. On Desktop it looks like this:

enter image description here

And on Mobile it should look stacked overlapping everything under it but not pushing it down. So not like this:

(Before button pressed)

enter image description here

(After button pressed)

enter image description here

You can see that the Slideshow below is pushed down and the obvious misplacement of the menu on the button in general.

Plese help me to fix this, im a poor backend dev. Here is my code:

function myFunction() {
    var x = document.getElementById("menu");
    if (x.className === "menu") {
        x.className += " responsive";
    } else {
        x.className = "menu";
    }
}
.menu .icon {
    display: none;
}

@media screen and (max-width: 965px) {
    .menu a {display: none;}
    .menu a.icon {
      float: right;
      display: block;
    }
  }
  
  /* The "responsive" class is added to the menu with JavaScript when the user clicks on the icon */
@media screen and (max-width: 965px) {
    .menu.responsive {
        background-color: white;
        position: relative;
    }
    .menu.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
        }
    .menu.responsive a {
        float: none;
        display: block;
        text-align: left
    }
}
<div class="mainheader">
                    <div class="logo">
                        <img src="../bilder/Logo_Koeln_Fliesen_Esch.jpg">
                    </div>
                    <div id="menu" class="menu">
                        <a href="start.html">Unternehmen</a>
                        <a href="start.html">Leistungen</a>
                        <a href="referenzen.html">Referenzen</a>
                        <a href="start.html">Kontakt</a>
                        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
                            <img class="bigicon"  src="../bilder/menu.png">
                        </a>    
                    </div>
                </div>

Solution

  • So the anwer to fix the issue was to set the responsive menu class to absolute, also you have to use right: 0; so it stays in place. After that i figured out that i could just move the menu links down since they are also absolute now in order to prevent them from overlapping the button.

    Thanks for the effort of helping everyone ;)