How to center burger icon responsive in navbar?
Question
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 class="topnav">
<a href="index.html" class="active"><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);" class="icon centerBurger" onclick="myFunction()">
<i class="fa fa-bars centerBurger"></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 class="centerBurger">
a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></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!
3 answers
solution1
0 2022-12-17 12:54:13
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).
Alternatively, try
<style type="text/css">
.topnav { text-align: center; }
.topnav *:not(.centerBurger) { float: left; }
.topnav #myLinks { display: none; }
</style>
solution2
0 2022-12-17 15:04:37
Add align-items: center; to your very first.centerBurger
solution3
0 2022-12-18 11:42:07
Thank you for answering my question. i tried different possibilities now finally i replaced the tag with an <img src="burgericon.svg> and now it works fine. The code looks like this now:
´´´´
<div class="topnav">
<a href="index.html" class="active"><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);" class="icon" onclick="myFunction()">
<img src="bars-svgrepo-com.svg" class="svg">
</a>
</div>
´´´´
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.