How to center burger icon responsive in navbar?-CodePudding

I tried to center the burger icon in the navbar. it's kinda centered for small mobile devices but when it gets to bigger devices like tablets, the icon goes upper way. it doesn't stay centered. how can I do this responsively for different screens?


<!DOCTYPE html>
<html>
<head>
<style>

.centerBurger {
    display: flex;
    justify-content: center;
}


.centerBurger {
    width: 100%;
    text-align: center;
}


.centerBurger {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 56.5%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
       height: 100%;
    width: 100%;
 
} 

.centerBurger  {
 display:block;  
 cursor:pointer;
 max-width:100%;
 height:auto;
}

.burgerCenter{
margin:0 auto;
 left: 50%;
 position: relative;
transform: translateX(-50%);
}


</head>
<body>
<!-- Top Navigation Menu -->
        <div >
            
        <a href="index.html" ><img src="header.png" width="25%"></a>
            
        <!-- Navigation links (hidden by default) -->
        <div id="myLinks">
            
            <a href="index.html">Startseite</a>
            <a href="ueber-uns.html">Über uns</a>
            <a href="leistungen.html">Leistungen</a>
            <a href="referenzen.html">Referenzen</a>
            <a href="kontakt.html">Kontakt</a>
            <a href="datenschutz.html">Datenschutz</a>
            
        </div>
            
        <!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
        
        <a href="javascript:void(0);"  onclick="myFunction()">
            
            
                
           <i ></i> 
            
        </a>
        </div>
        
                  <script>
          function myFunction() {
          var x = document.getElementById("myLinks");
          if (x.style.display === "block") {
              x.style.display = "none";
          } else {
              x.style.display = "block";
          }
          }
</script>
</body>
</html>

I tried to center it different ways. I used this css rules one after one. one time directly for the attribute and after that I gave the icon a parent div like this:

<div >
a href="javascript:void(0);"  onclick="myFunction()">
            
            
                
           <i ></i> 
</div>

and tried to set the rules to the parent div. but sadly it didn't work.

I expected the burger icon would be centered. i'm pretty new to coding and my English isn't the best as well. so i wanna apologize for this first. If anyone could tell me what my fault was or how I could solve this I would appreciate it very much.

Thank you very much!

CodePudding user response：

Try the following:

<style type="text/css">
.topnav *:not(.centerBurger) { float: left; }
.topnav .centerBurger { display: block; width: fit-content;
                        margin-left: auto; margin-right: auto; }
.topnav #myLinks { display: none; }
</style>

The first rule lets all navigation bar elements other than the .centerBurger float (to the left) in the navigation bar. Without it, the .centerBurger would appear on a row beneath the <a href="index.html">.

The second rule makes the .centerBurger a centered block within the navigation bar. Instead of width: fit-content, you can also use the width of the burger image in px (which I assume is known).

CodePudding user response：

Add align-items: center; to your very first .centerBurger