Trying To Make Nav Bar Hidden When In Mobile View
My navbar currently appears like this when I inspect and put it to a mobile device such as iPhone X: However, I want it to appear like this when in mobile: ... and for the bar to
Solution 1:
Use visibility: hidden; as CSS.
You can use the @media query to detect whether the client is in used in a mobile environment.
@media screen and (max-width: 500px) {
#navID { visibility: hidden; }
}
Solution 2:
Add this code in your css, you can change the pixel from 320 to 350 or 300 for mobile view
@media(max-width: 320px) {
nav{
display: none;
}
}
Solution 3:
Use this for toggler on the right:
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"><linkrel="stylesheet"href="style.css"><title>Title</title></head><body><navclass="navbar navbar-expand-lg navbar-light bg-light"><aclass="navbar-brand"href="#">Navbar</a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarTogglerDemo02"aria-controls="navbarTogglerDemo02"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarTogglerDemo02"><ulclass="navbar-nav mr-auto mt-2 mt-lg-0"><liclass="nav-item active"><aclass="nav-link"href="#">Home <spanclass="sr-only">(current)</span></a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Disabled</a></li></ul></div></nav><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script></body></html>Try to insert your html and jQuery and not css in the above code.
This would be much easier :-)
Post a Comment for "Trying To Make Nav Bar Hidden When In Mobile View"