I try to get my navbar responsive. Follow this tut on w3schools. If I copy and paste it is working, but I want it to be mobile first (media queries) and there is my problem.
The switch from mobile to tablet/desktop works. But there is something wrong with the click function and css.
window.onload=function() {
const x = document.getElementById("myTopnav");
const burger = document.getElementById("burger");
burger.addEventListener("click", () => {
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
});
};.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: right;
display: none;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 24px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
display: block;
float: left;
}
.topnav .icon {
display: block;
}
.topnav.responsive a {
display: block;
}
/* X-Small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default in Bootstrap
*/
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
.topnav a:not(:first-child) {display: block;}
.topnav a.icon {
float: right;
display: none;
}
}
@media (min-width: 768px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}<nav>
<!-- Top Navigation Menu -->
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Brand</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="#" id="burger" class="icon">
<svg width="35px" height="35px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.46447 20.5355C4.92893 22 7.28595 22 12 22C16.714 22 19.0711 22 20.5355 20.5355C22 19.0711 22 16.714 22 12C22 7.28595 22 4.92893 20.5355 3.46447C19.0711 2 16.714 2 12 2C7.28595 2 4.92893 2 3.46447 3.46447C2 4.92893 2 7.28595 2 12C2 16.714 2 19.0711 3.46447 20.5355ZM18.75 16C18.75 16.4142 18.4142 16.75 18 16.75H6C5.58579 16.75 5.25 16.4142 5.25 16C5.25 15.5858 5.58579 15.25 6 15.25H18C18.4142 15.25 18.75 15.5858 18.75 16ZM18 12.75C18.4142 12.75 18.75 12.4142 18.75 12C18.75 11.5858 18.4142 11.25 18 11.25H6C5.58579 11.25 5.25 11.5858 5.25 12C5.25 12.4142 5.58579 12.75 6 12.75H18ZM18.75 8C18.75 8.41421 18.4142 8.75 18 8.75H6C5.58579 8.75 5.25 8.41421 5.25 8C5.25 7.58579 5.58579 7.25 6 7.25H18C18.4142 7.25 18.75 7.58579 18.75 8Z" fill="#fff"></path> </g></svg>
</a>
</div>
</nav> Hope, someone can help me.
You are missing the CSS code that corresponds to the changes of the elements after adding the responsive class. So I added them:
1)
.topnav.responsive .icon {
position: absolute;
right: 8px;
top: 8px;
}
(so that it remains in its fixed position and does not float to the bottom of the list of links).
2)
.topnav.responsive a {
display: block;
float: none;
}
(removes the float, and displays the list).
And in full code it will look like this (all the rest of the code remains the same, but just so you can see the result...):
window.onload = function() {
const x = document.getElementById("myTopnav");
const burger = document.getElementById("burger");
burger.addEventListener("click", () => {
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
});
};.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: right;
display: none;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 24px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
display: block;
float: left;
}
.topnav .icon {
display: block;
}
.topnav.responsive .icon {
position: absolute;
right: 8px;
top: 8px;
}
.topnav.responsive a {
display: block;
float: none;
}
/* X-Small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default in Bootstrap
*/
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}
@media (min-width: 576px) {}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
.topnav a:not(:first-child) {
display: block;
}
.topnav a.icon {
float: right;
display: none;
}
}
@media (min-width: 768px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}<nav>
<!-- Top Navigation Menu -->
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Brand</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="#" id="burger" class="icon">
<svg width="35px" height="35px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
stroke="#000000">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M3.46447 20.5355C4.92893 22 7.28595 22 12 22C16.714 22 19.0711 22 20.5355 20.5355C22 19.0711 22 16.714 22 12C22 7.28595 22 4.92893 20.5355 3.46447C19.0711 2 16.714 2 12 2C7.28595 2 4.92893 2 3.46447 3.46447C2 4.92893 2 7.28595 2 12C2 16.714 2 19.0711 3.46447 20.5355ZM18.75 16C18.75 16.4142 18.4142 16.75 18 16.75H6C5.58579 16.75 5.25 16.4142 5.25 16C5.25 15.5858 5.58579 15.25 6 15.25H18C18.4142 15.25 18.75 15.5858 18.75 16ZM18 12.75C18.4142 12.75 18.75 12.4142 18.75 12C18.75 11.5858 18.4142 11.25 18 11.25H6C5.58579 11.25 5.25 11.5858 5.25 12C5.25 12.4142 5.58579 12.75 6 12.75H18ZM18.75 8C18.75 8.41421 18.4142 8.75 18 8.75H6C5.58579 8.75 5.25 8.41421 5.25 8C5.25 7.58579 5.58579 7.25 6 7.25H18C18.4142 7.25 18.75 7.58579 18.75 8Z"
fill="#fff"></path>
</g>
</svg>
</a>
</div>
</nav>