Struggling to center the burger icon in the navbar has been a bit of a challenge for me. Although it appears centered on small mobile devices, the icon shifts to the upper side on larger screens like tablets, losing its centered position. I am seeking advice on how to make this responsive across different screen sizes.
<!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">Home</a>
<a href="about.html">About Us</a>
<a href="services.html">Services</a>
<a href="references.html">References</a>
<a href="contact.html">Contact</a>
<a href="privacy.html">Privacy Policy</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 have experimented with various CSS rules to center the icon, including applying them directly to the element and using a parent div to contain the icon. Unfortunately, none of these approaches have yielded the desired result.
As a newbie to coding with limited English proficiency, I would like to apologize in advance for any mistakes. Any guidance on what I may have done wrong or how to resolve this issue would be greatly appreciated.
Thank you for your help!