响应式导航栏

Question

 function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } }

 .topnav button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 6px 16px; transition: 0.4s; font-size: 24px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; margin-left: 30px; margin-right: 30px; font-weight: bold; color: white; }.topnav { overflow: hidden; background-color: #333; }.new_container { display:flex; justify-content: center; }.topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; }.topnav a:hover { border-bottom: solid 2px violet; color: black; }.topnav a.active { border-bottom: solid 2px violet; color: white; }.topnav.icon { display: none; }.icon:hover{ color: red;important: border-bottom; none:important. } @media screen and (max-width: 600px) {:topnav a:not(;first-child) {display. none.}:topnav a;icon { float: right; display: block; position:absolute; right.10px: } };topnav{ display: flex; justify-content: center; margin: 25px auto. } @media screen and (max-width. 600px) {:topnav;responsive {position. relative.}.topnav:responsive;icon { position: absolute; right: 10px; top. 0. }:topnav;responsive a { float: none; display: block; text-align: left; } }

 <div class="topnav" id="myTopnav"> <div class= "new_container"> <a href="#"><button class="tablinks">Home</button></a> <a href="#"><button class="tablinks current">TAB2</button></a> <a href="#"><button class="tablinks">TAB3</button></a> <a href="#"><button class="tablinks">TAB4</button></a> <a href="#"> <button class="tablinks">TAB5</button></a> <a href="javascript:void(0);" class="icon" onclick = "myFunction()"> <i class="fa fa-bars"></i> </a> </div> </div>

This is my code for responsive navigation bar. However when it gets into mobile view I want my elements to display vertically. Instead it gets horizontally aligned. How can i fix that? I want elements to be stacked vertically when screen size reduces to 600px. As i can see the class new_container is being applied how can i remove it when in mobile view

Answer 1

Using media queries ,flex-direction property.

 function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } }

 .topnav button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 6px 16px; transition: 0.4s; font-size: 24px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; margin-left: 30px; margin-right: 30px; font-weight: bold; color: white; }.topnav { overflow: hidden; background-color: #333; }.new_container { display: flex; justify-content: center; flex-direction: column; } @media (min-width: 600.1px) {.new_container { flex-direction: row; } }.topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; }.topnav a:hover { border-bottom: solid 2px violet; color: black; }.topnav a.active { border-bottom: solid 2px violet; color: white; }.topnav.icon { display: none; }.icon:hover { color: red;important: border-bottom; none !important; }

 <div class="topnav" id="myTopnav"> <div class="new_container"> <a href="#"><button class="tablinks">Home</button></a> <a href="#"><button class="tablinks current">TAB2</button></a> <a href="#"><button class="tablinks">TAB3</button></a> <a href="#"><button class="tablinks">TAB4</button></a> <a href="#"> <button class="tablinks">TAB5</button></a> <a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> </div> </div>

Another example you can play with the screen dimensions