Hamburger Menu – Why is it moving my website logo when it opens?

by

I’m trying to create a hamburger menu for my website.

I’ve tried changing the position of the #logo and .topnav element.

Code Snippet source

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
html {
  height: 100%;
  width: 100%;
}

body {
  display: block;
  background-color: #000000;
}

.topnav {
  display: block;
  float: left;
  background-color: #000000;
  overflow: hidden;
}

.topnav a {
  float: none;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #fee238;
  color: white;
}

section {
  background-image: url("https://i.postimg.cc/kGdygTgL/background-image.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: block;
  width: 100%;
  top: 50%;
  text-align: center;
  line-height: 1.2em;
  position: relative;
  z-index: 2;
  font-weight: 500;
  color: #fff;
  letter-spacing: 5px;
  margin: 0px auto;
}

h1 {
  line-height: 85%;
  text-align: center;
  font-size: 40px;
  font-family: zeitung;
  color: #ffffff;
  margin-bottom: 30px;
}

.header_nav {
  margin: auto;
  width: 60%;
  text-align: center;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
  color: #ffe238;
  display: inline;
  justify-content: space-evenly;
}

.logo {
  display: inline-block;
}

#logo {
  width: 25%;
  height: auto;
  border: 5px solid #000000;
  background-color: #000000;
  ;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  margin: 0 auto;
  display: inline-block;
  z-index: 2;
}

@media screen and (max-width: 600px) {
  .topnav a:not(.icon) {
    display: none;
  }
  .topnav a.icon {
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    display: block;
    text-align: left;
  }
}

@media screen and (min-width:600px) {
  .topnav a {
    float: left;
    display: block;
  }
  .topnav .icon {
    display: none
  }
  #logo {
    width: 10%
  }
}

a:link {
  text-decoration: none;
  color: #ffffff;
}

a:visited {
  text-decoration: none;
  color: #ffffff;
}

.current {
  text-decoration: underline;
}

ul {
  list-style-type: none;
  display: inline-flex;
  justify-content: space-evenly;
  width: 90%;
}

header {
  text-align: center;
  position: fixed;
  height: 75px;
  background: #000;
  width: 100%;
  right: 0;
  top: 0;
  z-index: 9998;
  -webkit-transition: all ease-in 200ms;
  -moz-transition: all ease-in 200ms;
  -o-transition: all ease-in 200ms;
  transition: all ease-in 200ms;
}

.heading {
  position: absolute;
  width: 300px;
  height: 200px;
  z-index: 15;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -150px;
}
<header>
  <div class="topnav" id="myTopnav">
    <a href="https://stackoverflow.com/questions/77585005/javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
    <a href="index.html" class="active">Home</a>
    <a href="menus.html">Our Menus</a>
    <a href="about.html">About</a>
  </div>
  <div class="logo">
    <img src="https://i.postimg.cc/d0mpFZ6s/logo.png" alt="" id="logo">
  </div>
</header>

<section></section>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  • What hamburger menu? I’m not seeing one.

    – 

  • I tried the code snippet on latest Google Chrome on a Mac, I am not seeing the logo moving.

    – 

  • Matt, the important thing about posting minimal reproducible example code is that it must reproduce the problem you describe. If it doesn’t reproduce the problem, we can’t help you. So, please check that your snippet is accurate to your problem, or if there’s any steps we need to follow to encounter the issue.

    – 

  • 1

    Steps to reproduce the problem: Run the snippet, click “Full page”, resize browser window until hamburger menu appears. Click the hamburger and the logo is displaced horizontally.

    – 




You have to change the position of .topnav and .topnav.responsive to absolute, so it won’t move the logo, like so:

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
html {
  height: 100%;
  width: 100%;
}

body {
  display: block;
  background-color: #000000;
}

.topnav {
  display: block;
  float: left;
  background-color: #000000;
  overflow: hidden;
  position: absolute; /*new value*/
}

.topnav a {
  float: none;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #fee238;
  color: white;
}

section {
  background-image: url("https://i.postimg.cc/kGdygTgL/background-image.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: block;
  width: 100%;
  top: 50%;
  text-align: center;
  line-height: 1.2em;
  position: relative;
  z-index: 2;
  font-weight: 500;
  color: #fff;
  letter-spacing: 5px;
  margin: 0px auto;
}

h1 {
  line-height: 85%;
  text-align: center;
  font-size: 40px;
  font-family: zeitung;
  color: #ffffff;
  margin-bottom: 30px;
}

.header_nav {
  margin: auto;
  width: 60%;
  text-align: center;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
  color: #ffe238;
  display: inline;
  justify-content: space-evenly;
}

.logo {
  display: inline-block;
}

#logo {
  width: 25%;
  height: auto;
  border: 5px solid #000000;
  background-color: #000000;
  ;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  margin: 0 auto;
  display: inline-block;
  z-index: 2;
}

@media screen and (max-width: 600px) {
  .topnav a:not(.icon) {
    display: none;
  }
  .topnav a.icon {
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: absolute; /*was relative*/
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    display: block;
    text-align: left;
  }
}

@media screen and (min-width:600px) {
  .topnav a {
    float: left;
    display: block;
  }
  .topnav .icon {
    display: none
  }
  #logo {
    width: 10%
  }
}

a:link {
  text-decoration: none;
  color: #ffffff;
}

a:visited {
  text-decoration: none;
  color: #ffffff;
}

.current {
  text-decoration: underline;
}

ul {
  list-style-type: none;
  display: inline-flex;
  justify-content: space-evenly;
  width: 90%;
}

header {
  text-align: center;
  position: fixed;
  height: 75px;
  background: #000;
  width: 100%;
  right: 0;
  top: 0;
  z-index: 9998;
  -webkit-transition: all ease-in 200ms;
  -moz-transition: all ease-in 200ms;
  -o-transition: all ease-in 200ms;
  transition: all ease-in 200ms;
}

.heading {
  position: absolute;
  width: 300px;
  height: 200px;
  z-index: 15;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -150px;
}
<header>
  <div class="topnav" id="myTopnav">
    <a href="https://stackoverflow.com/questions/77585005/javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
    <a href="index.html" class="active">Home</a>
    <a href="menus.html">Our Menus</a>
    <a href="about.html">About</a>
  </div>
  <div class="logo">
    <img src="https://i.postimg.cc/d0mpFZ6s/logo.png" alt="" id="logo">
  </div>
</header>

<section></section>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

It’s because when it was relative the .topnav‘s width pushed the logo in “scope”, when absolute we moved it out of it.

Leave a Comment