Auf Thema antworten

Beitrag

[QUOTE="Gast3326, post: 11847"]
Hallo,
ich brauche ganz dringend Hilfe. Ich muss für meine Abschlussprüfung eine Website programmieren. Uns wurde das auf der Arbeit erst sehr spät gezeigt, weshalb wird noch nicht so gut sind. Ich weiß leider nicht mehr weiter und bin kurz vorm verzweifeln.
In meinem oberen Teil der Seite ist rechts ein Burger Button. Leider läuft dieser rechts über die eigentlich Seite hinaus. Ich habe keine Ahnung, wie ich das Problem lösen kann. Habe schon alles versucht. overflow:hidden geht leider nicht, da der Button sticky sein muss und das dann nicht mehr möglich ist.
Ich hoffe mir kann jmd helfen, ich weiß mir keinen Rat mehr.
Hier mein Code:
HTML:

    <div class="container sticky-header">
        <div class="row">
            <div class="col-md-2 col-md-offset-1 col-sm-3 col-sm-offset-1 col-xs-2 col-xs-offset-1 social">
                <a href="[URL]https://www.instagram.com/[/URL]" target="_blank"><img class="social-icon" src="images/instagram.png" width="40px" height="40px" alt="Instagram Icon"></a>
                <a href="[URL]https://de-de.facebook.com/[/URL]" target="_blank"><img class="social-icon" src="images/facebook.png" width="40px" height="40px" alt="Facebook Icon"></a>
                <a href="[URL]https://www.youtube.com/[/URL]" target="_blank"><img class="social-icon" src="images/youtube.png" width="40px" height="40px" alt="YouTube Icon"></a>
                <a href="[URL]https://accounts.snapchat.com/accounts/login?continue=https%3A%2F%2Faccounts.snapchat.com%2Faccounts%2Fwelcome[/URL]" target="_blank"><img class="social-icon" src="images/snapchat.png" width="40px" height="40px" alt="Snapchat Icon"></a>
            </div>
            <div class="col-md-2 col-md-offset-2 col-sm-2 col-sm-offset-1 col-xs-2 col-xs-offset-2 logo">
                <img class="img-responsive" src="images/logo-weiss.png" width="85px" height="100px" alt="Logo">
            </div>
            <div class="col-md-1 col-md-offset-2 col-sm-1 col-sm-offset-1 col-xs-1 col-xs-offset-1">
                <p class="menu">MENU</p>
            </div>
            <div class="col-xs-1">
               <nav role="navigation">
                  <div id="menuToggle">
                    <input type="checkbox" />
                    <span></span>
                    <span></span>
                    <span></span>
                        <ul id="menu">
                          <a href="#Jubiläum"><li>Jubiläum</li></a>
                          <a href="#Chronologie"><li>Chronologie</li></a>
                          <a href="#Leistungen"><li>Leistungen</li></a>
                          <a href="#Maßschuhe"><li>Maßschuhe</li></a>
                          <a href="#Stimmen"><li>Stimmen</li></a>
                          <a href="#Pflegetipps"><li>Pflegetipps</li></a>
                          <a href="#Öffnungszeiten und Kontakt"><li>Öffnungszeiten und Kontakt</li></a>
                          <a href="#Impressum"><li>Impressum</li></a>
                        </ul>
                  </div>
                </nav>
            </div>
        </div>  
    </div>

CSS:
body {
    background: #fff;
    margin: 0;
}
.container {
  margin: 0px auto;
  background-color:#fff;
}
/* Header */
    /* Burger Button */
#menuToggle {
  display: block;
  position: relative;
  top: 55px; /* Abstand Button */
  left: 45px; /* Abstand Button */
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}
#menuToggle a {
  text-decoration: none;
  color: #ffffff; /* Farbe Nav-Elemente */
  transition: color 0.3s ease;
}
#menuToggle a:hover {
  color: #88A27B; /* Farbe Link */
}
#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0; /* verstecken */
  z-index: 2; /* über Hamburger legen */
  -webkit-touch-callout: none;
}
#menuToggle span {
  display: block;
  width: 33px; /* Breite Button */
  height: 4px; /* Höhe Button */
  margin-bottom: 5px;
  position: relative;
  background: #ffffff;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}
#menuToggle span:first-child {
  transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}
#menuToggle input:checked ~ span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #ffffff; /* Farbe X */
}
#menuToggle input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}
#menu {
  position: absolute;
  width: 500px; /* Breite Kasten */
  height: 800px;
  margin: -100px 0 0 -100px;
  padding: 50px;
  padding-top: 125px;
  background: #282828;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  transform-origin: 0% 0%;
  transform: translate(80%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li {
  padding: 10px 0;
  font-size: 22px;
}
#menuToggle input:checked ~ ul {
  transform: none;
}

.menu {
    color: #ffffff;
    font-size: 14px;
    font-family: 'Open Sans', 'Arial', sans-serif;
    font-weight: normal;
    margin-top: 55px;
    padding-left: 90px;
}

Ich bin dankbar für JEDE Hilfe!
Danke!!

[ATTACH type="full"]165[/ATTACH][ATTACH type="full"]166[/ATTACH]
[/QUOTE]

Authentifizierung