I'm currently trying to create a responsive navigation which is only a hamburger menu when on a mobile/tablet but am unsure how to hide it and stop it from working when it's on desktop. This is my first time playing around with CSS so it's a bit messy. The * is where the @media was when I was trying to get it to work. As I didn't know what to do I messed around with display:none but unsurprisingly it hid the entire navigation. There is quite a bit more wrong with this but i'm fixing it a step at a time. Unfortunately, I did this before I found out that mobile-first would have been better.
.button{
background-color: inherit;
border:none;
color: #4054b4;
padding: 64px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
font-family: 'Lato' , sans-serif;
transition:0.3s;
}
.dropdown {
float:center;
overflow:hidden;
display:inline-block;
}
.button:hover, .button:hover {
background-color: #4054b4;
color: #ffffff;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #4054b4;
width:100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown:hover .dropdown-content {
display: block;
}
.colum {
float: left;
width:25%;
padding: 10px;
background-color: #4054b4;
height: 250px;
}
.colum a {
float: none;
color: white;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
font-family: 'Lato' , sans-serif;
}
.colum a:hover {
background-color: #4054b4;
}
.col {
float: right;
width:25%;
padding: 10px;
background-color: inherit;
height: 250px;
}
.col a {
float: none;
color: inherit;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
font-family: 'Lato' , sans-serif;
}
.row:after {
content: "";
display:table;
clear: both
}
****
.open {
float:right;
color:#4054b4;
margin:1em 0 0 1em;
cursor:pointer;
display:block !important;
}
.nav{
width: 0;
height: 100vh;
z-index: 3;
position: fixed;
overflow: hidden;
background-color: #4054b4;
transition: 0.3s;
}
.nav a {
display: block;
color: #ffffff;
padding: 1em 0;
transition: 0.4s;
}
.close {
float: center;
margin: 1em 0 0 1em;
}
****
</style>
<body>
<div class="w3-container" style="box-shadow:0 0.4% 0.8% rgba(0,0,0,0.2)">
<div class="w3-bar w3-white ">
<div class="wrapper ">
<div class="nav " id="nav">
<a href="javascript:void(0)" class="close " onclick="closeNav()">×</a>
<div class="dropdown ">
<button class="button dropdown"> Button </button>
<div class="dropdown-content ">
<div class="header ">
<h2 style="color:white"> Header </h2>
<div class="row ">
<div class="colum ">
<a href="#"> Page </a>
</div>
</div>
</div>
</div>
</div>
<div class="dropdown ">
<button class="button dropdown "> Button</button>
<div class="dropdown-content ">
<div class="header ">
<h2 style="color:white"> Header </h2>
<div class="row ">
<div class="colum ">
<a href="#"> PAge </a>
</div>
</div>
</div>
</div>
</div><span id="open" class="open " onclick="openNav()">☰</span>
</div>
</div>
<script>
function openNav() {
document.getElementById("open").style.display = "none";
document.getElementById("nav").style.width = "100%";
}
function closeNav(){
document.getElementById("open").style.display = "block";
document.getElementById("nav").style.width = "0";
}
</script>
CodePudding user response：
Start with bootstrap. It makes this kind of thing really simple and stops you from reinventing the wheel badly.
Start by looking here ... https://getbootstrap.com/examples/navbar/ and here: https://getbootstrap.com/components/#navbar
To do what you are wanting you will need to set CSS media queries for the correct display. This is exactly what bootstrap does.
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}If you want to do it yourself I would start with learning about media breakpoints and look at Bootstrap hamburger menus:
CodePudding user response：
That would be better if you could dynamically add the hamburger menu by checking if device type is mobile or tablet, not just hide and show with css, so i found something you might be interested if you not yet know. Look at this
Thank you, this is my first action in stackoverflow