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">
×
<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 ">
Page
</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 ">
PAge
</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>
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
Start with Bootstrap
and here: https://getbootstrap.com/components/#navbar). It makes this kind of thing really simple and stops you from reinventing the wheel.
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:
Bootstrap 5
Bootstrap 4
Related
[This image 1 is my desired outcome but my result is image 2]
How can you make your png to fit in the div.container-fluid like image 1?
HTML Code:
<!--Footer-->
<div class="container-fluid w-100 footer" id="footer">
<div class="container-fluid row">
<h5 class="col-5 mt-5" id="availableforcontact">
available for contact on
<br>
saturdays and sundays
<br>
EST GMT -05:00
</h5>
<h5 class="col-3 mt-5" id="contactfooter">
contact
<br>
<p id="location">Manila City, Philippines</p>
albaalecxavier#gmail.com
</h5>
<h5 class="col-3 mt-5" id="socialfooter">
social
<br>
dribble
<br>
linkedin
<br>
twitter
<br>
instagram
</h5>
</div>
**<img src="images/Vector 2.png" alt="" id="redwave" class="w-100"> <!--THIS IS THE PROBLEM-->**
</div>
CSS Code:
#redwave {
max-width: 100%;
max-height: 100%;
object-fit: none;
}
What is the CSS for the parent div of #redwave? Unless it has a declared width and height, there would be nothing for #redwave's 100% to calculate against. If you're wanting to use a percentage of the viewport, you can use vh instead of %, where a width of 1vh == 1% of the viewport's width. If you're wanting it to take up a percentage of the parent container then you'd need to give the parent container an absolute value for the percentages to be calculated.
These are the styling i wrote.
ul {
margin: 0 auto;
text-align: center;
}
ul li {
list-style: none;
display: inline-block;
padding: 4px 50px;
}
ul li a {
text-decoration: none;
text-transform: uppercase;
color: #000;
}
#media only screen and (max-width: 700px) {
ul li {
padding: 4px 20px;
}
}
This is the complete code
.wrapper{
margin: 0;
background-color: #fff;
}
header{
height: 120px;
padding: 4px;
}
header h1{
font-family: "Amatic Sc";
text-transform: uppercase;
font-size: 50px;
text-align: center;
color: #000;
}
.btn {
width: 10;
height: 2px;
padding: 1.375rem 2.625rem 1.375rem 2.625rem;
border: 0.125rem solid #B49DF1;
border-radius: 2rem;
background-color: #B49DF1;
color: #fff;
font: 700 0.75rem/0 'Open Sans', arial, sans-serif;
text-decoration: none;
transition: all 0.2s;
}
.btn:hover {
background-color: #9876F3;
border: 0.125rem solid #9876F3;
}
ul {
margin: 0 auto;
text-align: center;
}
ul li {
list-style: none;
display: inline-block;
padding: 4px 50px;
}
ul li a {
text-decoration: none;
text-transform: uppercase;
color: #000;
}
#media only screen and (max-width: 700px) {
ul li {
padding: 4px 20px;
}
}
<div class="wrapper">
<header>
<h1>Novaturient</h1> <!---- Next to this should be the button -->
</header>
<nav>
<ul>
<li class="one">Home</li>
<li class="two">Content</li>
<li class="three">Features</li>
<li class="four">About</li>
<li class="fice">Contact</li>
</ul>
</nav>
</div>
Hi I am studying and trying to make my website mobile responsive and no matter what I try have had no luck. So I have tried a range of ways to turn a menu into a mobile menu when I resize. I have also been trying to get the content to centre properly when in smaller screen. I have googled alot and worked out most now I just need help finishing it off properly.
Edit: Updated code as per request #https://stackoverflow.com/users/13447870/tobias-kristensen
/* Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon */
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
/* Main Body */
body {
background-image: url(Image/footballField.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100hv;
min-width: 100hv;
background-size: 100% 100%;
font-family: "Lucinda Sans", "Arial", sans-serif;
text-decoration: none;
color: black
}
/*Header with logo*/
#header {
text-align: center;
margin-bottom: 20px;
margin-top: 20px;
padding: 10px;
}
#container1 {
position: relative;
background-color: #FFFFFF;
position: absolute;
min-height: 100vh;
width: 70%;
margin-left: 15%;
margin-right: 15%;
padding-bottom:120px;
}
/* footer for all pages */
#footer {
position: absolute;
clear: both;
color: white;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
font-weight: 300;
bottom: 0;
background: linear-gradient(to bottom, #C61618 5%, black 100%);
width: 100%;
height: 100px; /* Footer height */
}
.fa-facebook {
padding: 10px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
background: #3B5998;
color: white;
margin-right: 50px;
border-radius: 30%;
} /* Facebook Icon and link in Footer */
* {
box-sizing: border-box;
}
/*Search Field */
input:focus,
textarea:focus,
select:focus {
outline-color: #C61618;
}/* Search Area on Header */
form.search input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid black;
float: right;
width: 20%;
background: white;
margin-right: 5%;
} /* Style the search field from W3Schools*/
form.search button {
float: right;
width: 5%;
padding: 10px;
background: #C61618;
color: white;
font-size: 17px;
border: 1px solid black;
border-right: none;
/* Prevent double borders */
cursor: pointer;
} /* Style the submit button from W3Schools */
form.search button:hover {
background: #C61618;
} /* Search button hover */
form.search::after {
content: "";
clear: both;
display: table;
} /* Clear floats on Search from W3Schools */
/*Nav Bar*/
#navbar {
position: relative;
margin-top: 40px;
margin-right: 5%;
margin-left: 8%;
}/*Main White Background*/
li a {
display: inline;
text-decoration: none;
color: white;
font-size: 16px;
} /*link look on Nav Bar */
#navbar ul li {
list-style-type: none;
display: inline;
padding: 15px;
text-align: center;
border-radius: 30px; /*curved corners on buttons*/
background: linear-gradient(to bottom, #C61618 5%, black 100%);
} /*Menu look*/
#navbar ul li:hover {
background: black;
} /*Menu hover Colour*/
#navbar .btn.active {
background: black;
} /*Menu active Colour*/
/* Text Styling */
p,
h2,
a {
text-decoration: none;
color: black;
} /*all paragraph text*/
h1 {
text-align: center;
margin-top: 5%;
}/*position of h1*/
h2 {
text-align: center;
margin-top: 5%;
text-decoration: none;
color: black;
} /*position of h2*/
h4 a {
text-decoration: none;
color: black;
}
p {
margin-left: 50px;
margin-right: 50px;
text-align: justify-all;
line-height: 150%;
} /*format text <p> */
/*Index Page*/
#image_index {
padding-top: 41px;
float: left;
margin-left: 30px;
margin-bottom: 30px;
max-width: 30%
} /* Image on home page format */
#image_contact {
padding-top: 41px;
float: left;
margin-left: 30px;
margin-bottom: 30px;
} /* Image on home page format */
#index_table {
float: right;
padding-right: 10px;
padding-bottom: 30px;
margin-right: 5%;
} /* Table Index Page format */
/*Competitions Page */
table.c {
table-layout: auto;
width: 80%;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
}
.competition_table p {
text-align: center;
margin-left: auto;
margin-right: auto;
}/* format for <p> Competitions Page */
th {
text-emphasis: bold;
font-size: 20px;
height: 10px;
background-color: lightgrey;
border-color: black;
} /* Table Header*/
table,
th,
td {
padding: 10px;
border-style: solid;
border-color: black;
border-width: thin;
border-collapse: collapse;
}
/* Contact Us Page */
#secretary {
padding-top: 41px;
float: left;
margin-left: 30px;
margin-bottom: 30px;
}
.column1 {
float: left;
width: 40%;
padding: 10px;
}
.right {
width: 75%;
}
.row:after {
/* Clear floats after the columns */
content: "";
display: table;
clear: both;
}
#contact_form {
float: right;
padding-right: 10px;
padding-bottom: 30px;
margin-right: 5%;
width: 50%;
}
* {
box-sizing: border-box;
} /*format for Contact Us form*/
input[type=text],
[type=email],
[type=tel],
select,
textarea,
email {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
} /*format for Contact Us form*/
label {
padding: 12px 12px 12px 0;
display: inline-block;
} /*format for Contact Us form*/
input[type=submit] {
background-color: black;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
font-size: 20px;
font-weight: bold;
} /*format for Contact Us form*/
input[type=submit]:hover {
background-color: #C61618;
} /*format for Contact Us form*/
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/*Merch Page*/
.merch_order_form {
clear:both;
text-align: left;
margin-bottom: 5%;
margin-right: 5%;
margin-left: 5%;
padding:10px;
}
.col-50 {
float: left;
width: 40%;
margin-left: 10%;
align-content: inline;
text-align: center;
} /*Column setout for Merch & Information Pages*/
.col-45 {
float: right;
width: 40%;
margin-right: 10%;
align-content: inline;
text-align: center;
} /*Column setout for Merch & Information Pages*/
.row:after {
content: "";
display: table;
clear: both;
} /* Clear floats after the columns */
input[type=submit_merch] {
background-color: black;
color: white;
text-align: center;
padding: 12px 20px;
font-size: 30px;
border-radius: 30px;
cursor: pointer;
margin-left: 30%;
margin-top: 10px;
} /* Merch Page Submit Button */
input[type=submit_merch]:hover {
background: linear-gradient(to bottom, #C61618 5%, black 100%);
} /* Merch Page hover change */
#subject {
font-size: 16px;
}
/* Registration Page Submit Button */
.myButton {
box-shadow: inset 0px 0px 0px 2px #0154FA;
background: linear-gradient(to bottom, #0154FA 5%, #283966 100%);
background-color: #0154FA;
border-radius: 30px;
border: 1px solid #4e6096;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-size: 28px;
font-weight: bold;
padding: 21px 76px;
text-decoration: none;
text-shadow: 0px 0px 0px #283966;
text-align: center;
margin-left: 35%;
margin-right: auto;
margin-bottom: 70px;
} /* Merch Page Registration Button */
.myButton:hover {
background: linear-gradient(to bottom, #C61618 5%, black 100%);
background-color: #C61618;
border: 1px solid #C61618;
box-shadow: inset 0px 0px 0px 2px #C61618;
} /* Merch Page Registration Button */
.myButton:active {
position: relative;
top: 1px;
} /* Merch Page Registration Button */
#media screen and (min-width: 800px) {
.column {
width: 100%;
background-image: disabled;
.navbar li, .navbar li a:last-child {
display: none !important;
visibility: hidden !important;
}
}
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 800px) {
background-image: disabled;
.mobile_navbar li, .mobile_navbar li:last-child {
display: none !important;
visibility: hidden !important;
font-family: "Lucinda Sans", "Arial", sans-serif;
text-decoration: none;
color: black;
text-align: right;
}
.col-25,
.col-75,
.col-50,
.col-45,
input[type=submit] input [type=submit_merch] {
width: 100%;
margin-top: 0;
margin-left: auto;
margin-right: auto;
}
#body {
background-color: white;
margin: 0px;
}
}
#container1 {
margin="0px";
background-color: ="white";
}
#mobile_navbar {
display:flex;
margin-left: 100px;
display: inline;
}
.mobile-container {
min-width: 370px;
margin: auto;
padding: auto;
background-color: white;
height: 500px;
color: black;
border-radius: 10px;
}
/* TopNav Menu Code from W3Schools.com Dropdown Button */
.dropbtn {
background-color: #C61618;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer
display: block;
position: absolute;
right: 0;
top: 0;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: black;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #C61618}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
<!DOCTYPE html> <!-- Contact Us page for OaklandFC -->
<html lang="en-US">
<head>
<title>Oakland Football Club</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content='width=device-width, initial-scale=1' name='viewport' />
<meta name="viewport" content="minimum-scale=0">
<meta name="viewport" content="user-scalable=yes">
<meta charset="UTF-8">
<meta name="description" content="Oakland Football Club">
<meta name="keywords" content="Football, Soccer, Oakland, Club, family">
<meta name="author" content="Simply Designed for You">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="Oaklandstyle.css" />
<script src="formValidation.js"></script>
<script src="jquery-3.5.0.js" type="text/javascript"></script>
</head>
<body>
<div id="container1">
<div id="content-wrap">
<div id="header">
<img src="Image/logo.png" alt="Oakland Football logo" />
<form class="search" action="action_page.php">
<!--from W3Schools -->
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<div id="navbar">
<ul>
<li class="btn">Home</li>
<li class="btn">Competitions</li>
<li class="btn">Registration</li>
<li class="btn">Merchandise</li>
<li class="btn">Sponsors</li>
<li class="btn">Information</li>
<li class="btn active">Contact Us</li>
</ul>
</div>
<div id="mobile_navbar">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Menu</button>
<div id="myDropdown" class="dropdown-content">
Home
Competitions
Registration
Merchandise
Information
Contact Us
</div>
</div>
</div>
<div id="content">
<div id="text">
<h1>Contact Us</h1>
</div>
<div class="column1">
<h2>Secretary</h2>
<p>Name: Laci Tanner </p>
<p>Phone: 02 - 6620 3324</p>
<p>Email: secretary#oaktownfa.com.au</p>
<br>
<div id="image_contact" show="#media screen and (max-width: 800px)">
<img src="Image/soccer.jpg" alt="Oakland Football Team Photo" width="380px"/>
</div>
</div>
<div class="column2">
<h2>Contact Us</h2>
<form action="mailto:secretary#oaktownfa.com.au" method="post" enctype="text/plain">
<div id="contact_form">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="Your name" required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="email">Email</label>
</div>
<div class="col-75">
<input type="email" id="email" name="email" placeholder="Your email address" required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="tel">Phone Number</label>
</div>
<div class="col-75">
<input type="tel" id="tel" name="tel" placeholder="Your phone number" required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="team">Team</label>
</div>
<div class="col-75">
<select id="team" name="team">
<option value="PleaseChoose">Please Choose</option>
<option value="Adults">Adults</option>
<option value="Under%12s">Under 12s</option>
<option value="Under%6s">Under 6s</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="I%am">I am</label>
</div>
<div>
<form action="/action_page.php">
<input type="radio" id="thinking" name="member" value="thinking">
<label for="thinking">Thinking about joining the club</label><br>
<input type="radio" id="member" name="member" value="member">
<label for="member">Already a member</label><br>
<br>
</form></div>
</div>
<div class="row">
<div class="col-25">
<label for="subject">Message</label>
</div>
<div class="col-75">
<textarea id="subject" name="subject" placeholder="Message" required style="height:200px"></textarea>
</div>
</div>
<div class="row">
<input type="submit" value="Send">
</div>
</div>
</form>
</div>
</div>
</div>
<footer id="footer">
Copyright © 2020 Simply Designed For You
</footer>
</div>
</body></html>
So this is how it shows when I add it all together. Both menu's and columns not stacking.
Assuming you want to use the same elements in your navbar on both large and small screens I would recommend not having two separate navbars in your HTML document. If you change one of them later, then you'll also need to update the other one.
W3schools has a good, basic tutorial on media queries. Media queries provide you with a way of defining special CSS rules based on the size of the browser. So if your site is opened on a smaller device, your navbar will be formatted according to the code in your media query.
Try to use media query, But first you need to set up your browser and make it like you're working on a phone to preview what you're doing, so first Press F12 (better use chrome), Look for the phone widget on the top-left , click on it, and start working with Media Query.
For example:
#media screen and (max-width:768px) {
body {
background: red!important;
/* That means that on a 768px-width screen the body will be red. */
}
}
I copied the "mega menu" navbar from W3Schools to a blank page and attached custom CSS, but as soon as I attach the bootstrap CSS file, the header layout is changed completely and the dropdown content doesn't show up anymore. I added two images below the snippet to show what exactly happens. I tried finding the CSS conflict with element inspector without success. I also tried different versions of bootstrap.css but all versions are causing the same navbar to become misplaced.
/* HEADER CSS */
/* Custom */
.navbar {
height:100px!important;
border-bottom:5px solid rgba(55,175,75,1.00)!important;
background-color:rgba(255,255,255,1.00)!important;
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"!important;
}
.brand {
margin-top:9px!important;
width:175px!important;
}
.brand-link {
background-color:rgba(255,255,255,0.00)!important;
}
.brand-link:hover {
background-color:rgba(255,255,255,0.00)!important;
}
.navlink {
margin-top:45px!important;
background-color:rgba(255,255,255,1.00)!important;
color:rgba(55,175,75,1.00)!important;
font-size:1.10em!important;
font-weight:300!important;
}
.navlink:hover {
background-color:rgba(255,255,255,1.00)!important;
color:rgba(55,175,75,0.35)!important;
}
.droplink {
}
.droplink:hover {
}
.dropbtn {
margin-top:45px!important;
background-color:rgba(255,255,255,1.00)!important;
color:rgba(55,175,75,1.00)!important;
cursor:pointer!important;
font-size:1.10em!important;
font-weight:300!important;
}
.dropdown-content {
margin-top:-2px!important;
background-color:rgba(55,175,75,1.00)!important;
}
.dropdown-content .header {
background-color:rgba(55,175,75,1.00)!important;
}
.dropdown-content .header-title {
margin-top:0!important;
margin-bottom:8px!important;
color:rgba(255,255,255,1.00)!important;
font-size:1.35em!important;
}
.dropdown-content .droprow {
background-color:rgba(55,175,75,1.00)!important;
}
.dropdown-content .dropcol {
background-color:rgba(55,175,75,1.00)!important;
}
/* Default */
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
width: 100%;
height: auto;
}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Naamloos document</title><h3></h3>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="navbar">
<a href="/index.htm" class="brand-link">
<img src="/img/brand.png" class="responsive brand" alt="navbar brand icon">
</a>
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<div class="header">
<h2 class="header-title">Mega Menu</h2>
</div>
<div class="row droprow">
<div class="column dropcol">
<h3 class="header-title">Category 1</h3>
Link 1
Link 2
Link 3
</div>
<div class="column dropcol">
<h3 class="header-title">Category 2</h3>
Link 1
Link 2
Link 3
</div>
<div class="column dropcol">
<h3 class="header-title">Category 3</h3>
Link 1
Link 2
Link 3
</div>
<div class="column dropcol">
<h3 class="header-title">Category 4</h3>
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Without any bootstrap CSS file attached (blue area is image), while mouse over dropdown button!
With bootstrap CSS file attached (blue area is image), also while mouse over dropdown button!
https://getbootstrap.com/docs/3.3/
Try Bootstrap 3 and check if that still happens to you.
Found the solution!
I completely removed the .navbar class and all corresponding CSS classes from the bootstrap.css file and replaced it with the W3Schools navbar CSS.
As this is a testing site I can do this, but I would not recommend it as a definitive solution. It may cause problems later (I haven't experienced any so far).
I am trying to hide my menu when a page gets too small and has a button to open it if required. I am struggling to make it happen. I can hide the navigation when the screen shrinks and display the div button to reopen it but cannot get the menu to reappear. I have tried to use focus to bring up the original side nav div with little success thinking that it is not overwriting the code to hide it on screen size. How do I get around this?
Any guidance greatly appreciated.
.sidenav {
height: 100%;
width: 220px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
-webkit-box-shadow: 2px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 2px 0px 5px 0px rgba(0,0,0,0.75);
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #00aad4;
display: block;
}
.sidenav a:hover {
color: #000;
}
/* Style page content */
.main {
margin-left: 220px; /* Same as the width of the sidebar */
padding: 0px 10px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
.HideMenu { display:none; }
.ShowMenu { display:block; }
/* Desktop*/
#media screen and (min-width: 768px) {
.HideMenu { display: block; }
}
/* Mobile*/
#media screen and (max-width: 768px) {
.ShowMenu:focus ~ .sidenav { display: block; }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="HideMenu">
<div class="sidenav">
<img src="images/logo.png">
Textures
HDRI's
</div>
</div>
<!-- Content
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="grid-container halves full" style="background-color: #000;">
<div>Centre whole</div>
</div>
<div class="ShowMenu" tabindex="0">Show Me</div>
<div class="grid-container halves">
<div>
50 L
</div>
<div>
50 R
</div>
</div>
<div class="grid-container thirds">
<div>Third L</div>
<div>Thirs M</div>
<div>Third R</div>
</div>
Here's the HTML code
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="HideMenu">
<div class="sidenav">
<img src="images/logo.png">
Textures
HDRI's
</div>
</div>
<!------------------------------- Content ------------------------------->
<div class="grid-container halves full" style="background-color: #000;">
<div>Centre whole</div>
</div>
<div class="ShowMenu" tabindex="0">Show Me</div>
<div class="grid-container halves">
<div>
50 L
</div>
<div>
50 R
</div>
</div>
<div class="grid-container thirds">
<div>Third L</div>
<div>Thirs M</div>
<div>Third R</div>
</div>
<!-- You'll need to import the javascript file with the <script> tag -->
<script type="text/javascript" src="/path/to/desktop-mobile-layout-handler.js"></script>
Here's the CSS code
.sidenav {
height: 100%;
width: 220px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
-webkit-box-shadow: 2px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 2px 0px 5px 0px rgba(0,0,0,0.75);
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #00aad4;
display: block;
}
.sidenav a:hover {
color: #000;
}
/* Style page content */
.main {
margin-left: 220px; /* Same as the width of the sidebar */
padding: 0px 10px;
}
/*
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
*/
.HideMenu { display:none; }
.ShowMenu { display:block; }
/* Desktop*/
/*
#media screen and (min-width: 768px) {
.HideMenu { display: block; }
}
*/
/* Mobile*/
/*
#media screen and (max-width: 768px) {
.ShowMenu:focus ~ .sidenav { display: block; }
}
*/
And finally, the JavaScript code
// desktop-mobile-layout-handler.js
var screenHeight = window.screen.availHeight;
var screenWidth = window.screen.availWidth;
var hideMenuElement = document.querySelector(".HideMenu");
var sideNavElement = document.querySelector(".sidenav");
var sideNavLinks = document.querySelectorAll(".sidenav a");
function desktopLayout () {
hideMenuElement.style.display = "block"; // hide the .HideMenu element
}
function mobileLayout () {
sideNavElement.onfocus = function () { // when the .sidenav element is being focused
sideNavElement.style.display = "block"; // display the .sidenavelement
}
sideNavElement.onblur = function () { // when the .sidenav element is not being focus
sideNavElement.style.display = "none"; // hide the .sidenav element
}
}
if (screenHeight <= 450) {
sideNavElement.style.paddingTop = "15px";
sideNavLinks.forEach(function (elem) {
elem.style.fontSize = "18px";
});
}
if (screenWidth >= 768) { // use Desktop layout
desktopLayout();
}
else { // use Mobile Layout
mobileLayout();
}
The javascript code will help you fix the CSS error you had above.
I hope this helps
I've been following a responsive web design tutorial and I just cant get my head round this problem. I've included the grid.css file in my html but some how chrome doesnt display it correctly. Instead of grid I get rows like in the attached image. Can someone please help me out with this?
Thank you
No grid
/* --------------------------- */
/* BASIC SETUP */
/* --------------------------- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #fff;
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
/* --------------------------- */
/* REUSABLE COMPONENTS */
/* --------------------------- */
.row {
max-width: 1140px;
margin: 0 auto;
}
section {
padding: 80px 0;
}
/*----- HEADINGS ----- */
h1 {
margin-top: 0;
margin-bottom: 20px;
color: #fff;
font-size: 240%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: : 1px;
word-spacing: 4px;
}
/*----- BUTTONS ----- */
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
color: #fff;
transition: background-color 0.2s, border 0.2s, color 0.2s;
}
.btn-full:link,
.btn-full:visited {
background-color: #e67e22;
border: 1px solid #e67e22;
color: #fff;
margin-right: 15px;
}
.btn-ghost:link,
.btn-ghost:visited{
border: 1px solid #e67e22;
color: #e67e22;
}
.btn:hover,
.btn:active {
background-color: #cf6d17;
}
.btn-full:hover,
.btn-full:active {
border: 1px solid #cf6d17;
}
.btn-ghost:hover,
.btn-ghost:active {
border: 1px solid #cf6d17;
color: #fff;
}
/* --------------------------- */
/* HEADER */
/* --------------------------- */
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img/hero.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
.hero-text-box {
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.logo {
height: 100px;
width: auto;
float:left;
margin-top: 20px;
}
.main-nav {
float:right;
list-style: none;
margin-top: 55px;
}
.main-nav li {
display: inline-block;
margin-left: 40px;
}
.main-nav li a:link,
.main-nav li a:visited {
padding: 8px 0px;
color: #fff;
text-decoration:none;
text-transform: uppercase;
font-size: 90%;
border-bottom: 2px solid transparent;
transition: border-bottom 0.2s;
}
.main-nav li a:hover,
.main-nav li a:active {
border-bottom: 2px solid #cf6d17;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors-stuff%2520downloaded%2520from%2520Internet/css_downloaded/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors-stuff%2520downloaded%2520from%2520Internet/css_downloaded/grid.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400" rel="stylesheet" type="text/css">
<title>Omnifood</title>
</head>
<body>
<header>
<nav>
<div class="row">
<img src="resources/css/img/logo-white.png" alt="Omnifood logo" class="logo">
<ul class="main-nav">
<li>Food delivery</li>
<li>How it works</li>
<li>Our cities</li>
<li>Sign up</li>
</ul>
</div>
</nav>
<div class="hero-text-box">
<h1>Goodbye junk food.<br> Hello super healthy meals</h1>
<a class="btn btn-full" href="#">I'm hungry</a>
<a class="btn btn-ghost" href="#">Show me more</a>
</div>
</header>
<section class="section-features">
<div class="row">
<h2>Get food fast — not fast food.</h2>
<p class="long-copy">
Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!
</p>
</div>
<div class="row">
<div class="col span-1-of-4">
<h3>Up to 365 days/year</h3>
<p>
Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
</p>
</div>
<div class="col span-1-of-4">
<h3>Ready in 20 minutes</h3>
<p>
You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
</p>
</div>
<div class="col span-1-of-4">
<h3>100% organic</h3>
<p>
All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!
</p>
</div>
<div class="col span-1-of-4">
<h3>Order anything</h3>
<p>
We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
</p>
</div>
</div>
</section>
</body>
</html>
/* SECTIONS ============================================================================= */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* GROUPING ============================================================================= */
.row {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
.row:before,
.row:after {
content:"";
display: table;
}
.row:after {
clear:both;
}
/* GRID COLUMN SETUP ==================================================================== */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */
/* REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */
#media only screen and (max-width: 480px) {
.col {
/*margin: 1% 0 1% 0%;*/
margin: 0;
}
}
/* GRID OF TWO ============================================================================= */
.span-2-of-2 {
width: 100%;
}
.span-1-of-2 {
width: 49.2%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.span-2-of-2 {
width: 100%;
}
.span-1-of-2 {
width: 100%;
}
}
/* GRID OF THREE ============================================================================= */
.span-3-of-3 {
width: 100%;
}
.span-2-of-3 {
width: 66.13%;
}
.span-1-of-3 {
width: 32.26%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.span-3-of-3 {
width: 100%;
}
.span-2-of-3 {
width: 100%;
}
.span-1-of-3 {
width: 100%;
}
}
/* GRID OF FOUR ============================================================================= */
.span-4-of-4 {
width: 100%;
}
.span-3-of-4 {
width: 74.6%;
}
.span-2-of-4 {
width: 49.2%;
}
.span-1-of-4 {
width: 23.8%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.span-4-of-4 {
width: 100%;
}
.span-3-of-4 {
width: 100%;
}
.span-2-of-4 {
width: 100%;
}
.span-1-of-4 {
width: 100%;
}
}