my problem is i am trying to make a specific element disappear once a
certain screen width is hit but no matter what i do it stays.
i also tried to do simple media queries css such as changing background
colour for specific widths but that doesnt work either.
Can someone suggest any solutions please?
Thank you
This is my html code:
enter code here<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="description" content="technology blog"/>
<meta name="keywords" content="tech reviews,movie and tv reviews"/>
<title>MNKTech</title>
<link rel="stylesheet" href="main2.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet">
</head>
<body>
<div id="header-ad"></div>
<div class="wrapper">
<header id="mnheader">
<nav>
<div id="logo"><h1 id="branding">MNKTech</h1></div>
<div class="primary-nav">
<ul>
<li class="menu" id="tech-menu"> Tech</li>
<li class="menu" id=" howto-menu"> How To</li>
</ul>
<a href="javascript:void(0)" class="close"
onclick="closenav()">×</a>
</div>
<span id="open" class="open" onclick="Opennav()">☰</span>
<div class="social">
<ul>
<li class="facebook"><a href="#"><i class="fa fa-facebook"
aria-hidden="true"></i></a></li>
<li class="twitter"><a href="#"><i class="fa fa-twitter" aria-
hidden="true"></i></a></li>
<li class="google"><a href="#"><i class="fa fa-google-plus"
aria-hidden="true"></i></a></li>
<li class="pinterest"><a href="#"><i class="fa fa-pinterest"
aria-hidden="true"></i></a></li>
</ul>
</div>
</nav>
<!footer>
<div>
</div>
</body>
</html>
body{
margin: 0;
text-align:center;
}
h1{
color: white;
}
/* header
================*/
header{
background-color: dimgrey;
position: fixed;
width: 100%;
}
/*#header-ad{
min-height: 7vw;
}*/
header #branding{
float: left;
}
/* nav
=========*/
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
.primary-nav ul {
top: 50px;
text-align: center;
}
nav li{
display: inline-block;
margin: auto;
margin-top: 26px;
float: left;
}
nav a{
color: white;
font-weight: 099;
text-decoration: none;
text-transform: uppercase;
font-family:sans-serif;
padding: 0.75em;
}
.social{
float: right;
margin-right: 50px;
font-size: 20px;
margin: auto;
margin-bottom:auto;
text-align: center;
}
.open{
float: right;
margin: 20px;
font-size: 30px;
color: white;
margin-top: 18px;
left: 50px;
display: block;
cursor: pointer;
}
.social ul{
margin-right: 50px;
}
.social ul li{
margin-top: 27px;
}
.cointainer{
width:95%;
margin: 0 auto;
}
#media screen and (min-width : 0px) and (max-width:650px) {
#open{
display: hide;
}
}
If you want the item to "disappear" and have the space it occupies "disappear" too
#media screen and (min-width: 0px) and (max-width: 650px) {
#open {
display: none;
}
}
If you want it to "dissapear but the space it occupies to be held
#media screen and (min-width: 0px) and (max-width: 650px) {
#open {
visibility: hidden ;
}
}
A better explanation would be that display: none you are "deleting" the element entirely whereas visibility: hidden just makes it "invisible" but it is still occupying that space. For more info see here.
You can use below CSS
#media screen and (max-width:650px) {
#open{
display: hide;
}
}
Related
Trying to build somthing unique at least for me. this is what i have so far i am having some issues getting the layout to be right.
What i am trying to do is create an H1 title that will link back to the home page. Underneath the Navbar will be 4 links evenly spaced across the page. Then 3 social media icons under the nav bar. I have all the items there, just confused as i cannot get anything to go right. the nav bar will seemingly fit fine, then i put the social media there and it bunches up on one of the sides. or the nav bar will be center but not spread out evenly even when i put into CSS to spread.
<header>
<div>
<h1>Amazing restaurant</h1>
<!-- nav -->
<nav>
Menu
Reservations
Special Offers
Contact
</nav>
</div>
</header>
header {
width: 100%;
height: 100vh;
background-image: url("../img/home-header.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
text-align: center;
}
nav {
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
width: 25%;
text-align: center;
}
Here is a solution to your problem but I advice spending some time learning about flex
header {
width: 100%;
height: 100vh;
background-image: url("../img/home-header.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
header .headerTitle {
text-decoration: none;
color: black;
margin-bottom: 25px;
}
header .navLinks {
padding: 12px;
display: flex;
justify-content: space-evenly;
align-items: center;
width: 100%;
}
header .navLinks a {
color: black;
text-decoration: none;
font-size: 17px;
margin-bottom: 15px;
}
header .socialLinks a {
color: black;
text-decoration: none;
font-size: 14px;
margin: 7px 20px;
}
<header>
<a class="headerTitle" href="index.html">
<h1>Amazing restaurant</h1>
</a>
<div class="navLinks">
Menu
Reservations
Special Offers
Contact
</div>
<div class="socialLinks">
<a href="#">
<i class="fa fa-facebook"></i>
</a>
<a href="#">
<i class="fa fa-twitter"></i>
</a>
<a href="#" class="fa fa-instagram">
<i class="fa fa-instagram"></i>
</a>
</div>
</header>
Hi I´m also starting at this and also want to show you the way that could solve the issue that you´re having. Understanding display options is very useful.
html {
box-sizing: border-box;
}
a,
a:before,
a:after {
box-sizing: inherit;
}
header {
width: 100%;
height: 100vh;
background-image: url("../img/home-header.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
text-align: center;
}
.main-nav {
background-color: lightseagreen;
}
.main-nav li {
padding: 0.5rem;
color: white;
text-decoration: none;
font-size: 1rem;
text-align: center;
display: inline-block;
}
.lis {
text-decoration: none;
color: white;
font-size: 1.5rem;
}
.title {
color: lightseagreen;
font-size: 3rem;
}
<body>
<header>
<div>
<h1 class="title">Amazing restaurant</h1>
<!-- nav -->
<nav class="main-nav">
<li><a class="lis" href="#Menu">Menu</a></li>
<li><a class="lis" href="#Reservations">Reservations</a></li>
<li><a class="lis" href="#Special Offers">Special Offers</a></li>
<li><a class="lis" href="#Contact">Contact</a></li>
</nav>
</div>
</header>
</body>
Here is how you can achieve what you are looking for and also make it responsive at the same time. CSS Flexbox and Grid is where CSS starts to get tough and its wise to research multiple frontend instructors who teach it well. I like Wes Bos - he has a CSS Grid and a Flexbox course. They are both free.
If you can afford to spend some money, I really like Front End Masters and I actually learned how to code this NavBar from Jen Kramer in her CSS class. I find creating the NavBar in CodePen or a sandbox like that really helps. Just a couple of pointers of what worked for me.
Now, also to clarify - I have Google fonts for Oxygen and Oxygen mono linked in my header, as well as Font Awesome 5.
/* variables declared here - these are the colors for our pages, as well as the font stacks and sizes. */
:root {
--black: #171321;
--dkblue: #0d314b;
--plum: #4b0d49;
--hotmag: #ff17e4;
--magenta: #e310cb;
--aqua: #86fbfb;
--white: #f7f8fa;
--font-size: 1.3rem;
--mono: "Oxygen mono", monospace;
--sans: Oxygen, sans-serif;
}
/* border box model: https://css-tricks.com/box-sizing/ */
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
/* generic styles for the page */
body {
padding: 0;
margin: 0;
font-family: var(--sans);
background-color: var(--black);
color: var(--white);
font-size: var(--font-size);
}
h1,
h2,
h3 {
margin: 0;
}
a {
color: var(--magenta);
}
a:hover {
color: var(--hotmag);
text-decoration: none;
}
/* intro styles */
#intro {
padding-bottom: 10rem;
}
#intro p {
font-size: 1rem;
line-height: 1.5;
}
#intro .name {
font-family: var(--mono);
font-size: 1rem;
}
.name span {
font-family: var(--sans);
font-size: 4rem;
color: var(--aqua);
display: block;
font-weight: 300;
}
#intro h2 {
font-size: 4rem;
}
/* contact section */
#contact {
width: 400px;
text-align: center;
margin: 0 auto;
padding: 3rem 0;
}
#contact p:last-child {
margin-top: 3rem;
}
/* navigation */
nav {
font-family: var(--mono);
font-size: 80%;
padding: 1rem;
}
nav h1 a {
font-family: var(--sans);
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: 2rem;
}
nav li:first-child {
flex-basis: 100%;
text-align: center;
}
nav [class*="fa-"] {
font-size: 150%;
color: var(--aqua);
}
nav h1 [class*="fa-"] {
font-size: 100%;
color: var(--aqua);
}
nav a {
color: white;
text-decoration: none;
display: block;
}
nav a:hover,
nav [class*="fa-"]:hover {
color: var(--magenta);
}
#media (min-width: 850px) {
nav {
max-width: 1200px;
margin: 0 auto;
}
nav li:first-child {
flex-basis: auto;
text-align: left;
margin-right: auto;
}
}
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Oxygen&family=Oxygen+Mono&display=swap" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
</head>
<!-- instructions in JavaScript block -->
<nav>
<ul>
<li>
<h1>
<a href="index.html">
<span class="navHeader" aria-hidden="true"></span>
<span>Amazing Restaurant</span>
</a>
</h1>
</li>
<li>Menu</li>
<li>Reservations</li>
<li>Special Offers</li>
<li>Contact</li>
<li>
<a href="#Facebook" target="_blank">
<span class="fab fa-facebook" aria-hidden="true"></span>
<span class="sr-only">Facebook</span>
</a>
</li>
<li>
<a href="#Twitter" target="_blank">
<span class="fab fa-twitter" aria-hidden="true"></span>
<span class="sr-only">Twitter</span>
</a>
</li>
<a href="#Instagram" target="_blank">
<span class="fab fa-instagram" aria-hidden="true"></span>
<span class="sr-only">Instagram</span>
</a>
</ul>
</nav>
Keep playing with the code. Change the colors and margins and play around to see what happens in CodePen or your text editor. The next part is getting it to work with the rest of the page.
Now the nav doesn't display as it should in this example when in full screen but it show correctly when in iPad mode on chrome, so for my purposes this will work.
I have totally made a submenu that pops out from the top nav before but for what ever reason this one has me stumped.
first I thought well duh! You need to change hoverableMenu{position:absolute};
and hoverable{position:relative};
and viola I would be done. However no matter what I do it either goes all the way to the left when I have float:left; and even if I wanted to I could hardcode the position using margin, but thats not an elegant solution and I know that in all honesty it is merely something that is flying over my head.
any and all help is appreciated.
Below is my minimum verifiable example.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body{
margin: 0px;
background-color: lightblue;
height: 100%;
}
header{
/*This is for the header picture background*/
background-size: 100%;
background-image: url(resources/chem3D.png);
background-repeat: no-repeat;
/* vh = viewheight. Used in place of percentages when percentages don't seem to work. This is basically 30% but not really
https://stackoverflow.com/questions/31039979/css-units-what-is-the-difference-between-vh-vw-and */
min-height: 100%;
}
/*Seperate the header from the content*/
#seperator{
height: 10px;
background-color: black;
margin:0;
padding:0;
}
/*THe main content of the site. Where the Flex magic happens.*/
#content{
display: flex;
margin: auto;
height: auto;
}
/*Navigation Stuffs*/
nav{
width: 200px;
}
.topnav{
overflow: hidden;
}
/*style of links in nav*/
/* ADDED FLOAT LEFT */
.topnav a{
float: left;
display: block;
color: black;
text-align: center;
padding: 10px 5px 10px 15px;
text-decoration: none;
font-size: 1.2em;
letter-spacing: 0.1em;
}
/* Drop down menu */
a.hoverable:focus + div.hoverableMenu{
display: block;
float: left;
}
a.hoverable:hover{
color:black;
}
div.hoverableMenu{
display: none;
width: 70%;
margin-left:auto;
margin-right:10px;
}
div.hoverableMenu>a{
letter-spacing: 0em;
}
div.hoverableMenu:focus{
display: block;
}
/*Mobile views*/
/*Tablet View*/
#media screen and (max-width: 900px){
#seperator{
display: none;
}
#content{
height: 100%;
display:flex;
flex-wrap: wrap;
}
nav{
width: 100%;
flex-basis: 100%;
}
.topnav a{
float: left;
}
main{
width: 50%;
}
header{
display:none;
}
}
<div id="seperator"></div>
<div id="content">
<nav>
<div class="topnav" id="myTopnav">
Home
Teaching
<a class="hoverable" href="#">Research <i class="fa fa-caret-down"></i></a>
<div class="hoverableMenu">
Overview
Publications
</div>
<a class="hoverable" href="#">Students <i class="fa fa-caret-down"></i></a>
<div class="hoverableMenu">
Awards
Gallery
</div>
Contact
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</nav>
</div>
JSFiddle
resources I accessed:
https://jsfiddle.net/davidpauljunior/pdcAF/1/
How to make sub menu float over div?
Can't click on menu links in drop down menu
EDIT
Under my media query I change the following.
div.hoverable{
display: relative;
}
div.hoverableMenu{
float:right;
display: absolute;
}
div.hoverable:focus > div.hoverableMenu{
top:1em;
left: 140px;
z-index: 99;
}
after doing this the menus are now popping up relative to their parents but they are causing the elements to the right of them to wrap around to under the rest of the nave items. Instead of the sub menu floating over the nav. :(
You have to change your structure a bit to ul li, checkout the code below
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body{
margin: 0px;
background-color: lightblue;
height: 100%;
}
header{
/*This is for the header picture background*/
background-size: 100%;
background-image: url(resources/chem3D.png);
background-repeat: no-repeat;
/* vh = viewheight. Used in place of percentages when percentages don't seem to work. This is basically 30% but not really
https://stackoverflow.com/questions/31039979/css-units-what-is-the-difference-between-vh-vw-and */
min-height: 100%;
}
/*Seperate the header from the content*/
#seperator{
height: 10px;
background-color: black;
margin:0;
padding:0;
}
/*THe main content of the site. Where the Flex magic happens.*/
#content{
display: flex;
margin: auto;
height: auto;
}
/*Navigation Stuffs*/
nav{
width: 200px;
}
.topnav{
overflow: hidden;
}
/*style of links in nav*/
/* ADDED FLOAT LEFT */
.topnav a{
float: left;
display: block;
color: black;
text-align: center;
padding: 10px 5px 10px 15px;
text-decoration: none;
font-size: 1.2em;
letter-spacing: 0.1em;
}
/* Drop down menu */
a.hoverable:focus + div.hoverableMenu{
display: block;
float: left;
}
a.hoverable:hover{
color:black;
}
div.hoverableMenu{
display: none;
width: 70%;
margin-left:auto;
margin-right:10px;
}
div.hoverableMenu>a{
letter-spacing: 0em;
}
div.hoverableMenu:focus{
display: block;
}
/*//////////*/
.topnav{
overflow: visible;
}
.topnav > li {
float: left;
list-style-type: none;
}
.topnav li {
list-style-type: none;
padding: 0;
position: relative;
}
.topnav > li > ul {
display: none;
margin: 0;
position: absolute;
left: 0;
padding: 0;
top: 40px;
}
.topnav > li:hover > ul {
display: block;
}
.topnav li {
}
.topnav:after {
content: "";
display: table;
clear: both;
}
/*//////////*/
/*Mobile views*/
/*Tablet View*/
#media screen and (max-width: 900px){
#seperator{
display: none;
}
#content{
height: 100%;
display:flex;
flex-wrap: wrap;
}
nav{
width: 100%;
flex-basis: 100%;
}
.topnav a{
float: left;
}
main{
width: 50%;
}
header{
display:none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<header>
</header>
<div id="seperator"></div>
<div id="content">
<nav>
<ul class="topnav" id="myTopnav">
<li>Home</li>
<li>Teaching</li>
<li><a class="hoverable" href="#">Research <i class="fa fa-caret-down"></i></a>
<ul class="hoverableMenu" style="
">
<li>Overview</li>
<li>Publications</li>
</ul>
</li>
<li><a class="hoverable" href="#">Students <i class="fa fa-caret-down"></i></a>
<ul class="hoverableMenu">
<li>Awards</li>
<li>Gallery</li>
</ul>
</li>
<li>Contact</li>
<li><a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a></li>
</ul>
</nav>
<main>
</main>
<footer>
</footer>
</div>
</body>
</html>
Change Some CSS
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body{
margin: 0px;
background-color: lightblue;
height: 100%;
}
header{
/*This is for the header picture background*/
background-size: 100%;
background-image: url(resources/chem3D.png);
background-repeat: no-repeat;
/* vh = viewheight. Used in place of percentages when percentages don't seem to work. This is basically 30% but not really
https://stackoverflow.com/questions/31039979/css-units-what-is-the-difference-between-vh-vw-and */
min-height: 100%;
}
/*Seperate the header from the content*/
#seperator{
height: 10px;
background-color: black;
margin:0;
padding:0;
}
/*THe main content of the site. Where the Flex magic happens.*/
#content{
display: flex;
margin: auto;
height: auto;
}
/*Navigation Stuffs*/
nav{
width: 200px;
}
.topnav{
overflow: hidden;
}
/*style of links in nav*/
/* ADDED FLOAT LEFT */
.topnav a{
float: left;
display: block;
color: black;
text-align: center;
padding: 10px 5px 10px 15px;
text-decoration: none;
font-size: 1.2em;
letter-spacing: 0.1em;
}
/* Drop down menu */
a.hoverable:focus + div.hoverableMenu{
display: block;
float: left;
}
a.hoverable:hover{
color:black;
}
div.hoverableMenu{
display: none;
width: 70%;
margin-left:auto;
margin-right:10px;
}
div.hoverableMenu>a{
letter-spacing: 0em;
}
div.hoverableMenu:focus{
display: block;
}
/*//////////*/
.topnav{
overflow: visible;
}
.topnav > li {
float: left;
list-style-type: none;
}
.topnav li {
list-style-type: none;
padding: 0;
position: relative;
}
.topnav > li > ul {
display: none;
margin: 0;
position: absolute;
left: 100%;
padding: 0;
top: 0px;
}
.topnav > li:hover > ul {
display: block;
}
.topnav li {
}
.topnav:after {
content: "";
display: table;
clear: both;
}
/*//////////*/
/*Mobile views*/
/*Tablet View*/
#media screen and (max-width: 900px){
#seperator{
display: none;
}
#content{
height: 100%;
display:flex;
flex-wrap: wrap;
}
nav{
width: 100%;
flex-basis: 100%;
}
.topnav a{
float: left;
}
.topnav > li > ul {
left: 0%;
padding: 0;
top: 40px;
}
main{
width: 50%;
}
header{
display:none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<header>
</header>
<div id="seperator"></div>
<div id="content">
<nav>
<ul class="topnav" id="myTopnav">
<li>Home</li>
<li>Teaching</li>
<li><a class="hoverable" href="#">Research <i class="fa fa-caret-down"></i></a>
<ul class="hoverableMenu" style="
">
<li>Overview</li>
<li>Publications</li>
</ul>
</li>
<li><a class="hoverable" href="#">Students <i class="fa fa-caret-down"></i></a>
<ul class="hoverableMenu">
<li>Awards</li>
<li>Gallery</li>
</ul>
</li>
<li>Contact</li>
<li><a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a></li>
</ul>
</nav>
<main>
</main>
<footer>
</footer>
</div>
</body>
</html>
Having trouble making the nav bar responsive. Due to the desired design I used two ul's with an image in between. This causes the breakpoints to happen at a large size because of the li padding. I would like to move the logo to the left and add a dropdown button to display the navbar options, along with removing the topbar at a mobile display width. Any help would be much appreciated, Thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scalisi Skincare</title>
<link rel="stylesheet" type="text/css" href="build/css/styles.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<header>
<div class="topbar">
GIVE $10, GET $10
FREE SHIPPING AND FREE RETURNS ON ORDERS OVER $50+
<a class="right" href="#">MY ACCOUNT</a>
</div>
<nav>
<ul class="firstNavSection">
<li>BOB'S CREAM</li>
<li>SCALISI SKINCARE</li>
<li>TINTED</li>
</ul>
<img src="assets/logo.PNG" alt="SCALISI">
<ul class="secondNavSection">
<li>REVIEW</li>
<li>ABOUT</li>
<li>BLOG</li>
<li><i class="fa fa-search fa-2x" aria-hidden="true"></i></li>
<li><i class="fa fa-shopping-bag fa-2x" aria-hidden="true"></i></li>
</ul>
</nav>
</header>
</body>
</html>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
header {
.topbar {
display: flex;
justify-content: space-between;
background: #7C8DC0;
padding: 8px 100px;
a {
text-decoration: none;
color: white;
flex: 1;
font-family: calibri;
font-size: 1em;
}
.right {
text-align: right;
}
}
nav {
border: 1px solid #dae3e5;
.firstNavSection {
display: inline-block;
position: relative;
top: -10px;
li {
display: inline-block;
list-style: none;
padding: 0 60px;
a {
font-family: calibri;
font-size: 1.5em;
text-decoration: none;
color: black;
}
}
}
a {
img {
display: inline-block;
position: relative;
top: 10px;
}
}
.secondNavSection {
display: inline-block;
position: relative;
top: -10px;
li{
display: inline-block;
list-style: none;
padding: 0 60px;
a {
font-family: calibri;
font-size: 1.5em;
text-decoration: none;
color: black;
i {
color: #7C8DC0;
}
}
}
}
}
}
Maybe you should follow the Bootstrap's boilerplate and don't forget to add it's resources.
I've finished coding my website for a 1024x768 resolution and now want to add #media queries to my code so that the sidebar disappears when the screen is at a width of 980px and then stays like that all the way down from there. I have tried adding the #media max-width 980 myself but it does not seem to be working at all. I've also tried in various places on the page but again, no luck. It's so frustrating! Code Below (Sorry if it's really long, I'm gonna leave it all in there to avoid any questions regarding code).
HTML:
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<title>Lakeside Books</title>
<link rel="stylesheet" type="text/css" href="masterstyle.css">
<meta name="viewsize" content="width-device-width,initial-scale=1.0">
<!--[if IE]>
<script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<h3 id="welcometext">Welcome To<br>Lakeside Books</h3>
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder=" ...Search Book Title" class="searchstyle"/>
</form>
</div>
<ul>
<li style="background-color: #333">
<a href="1Index.html" class="link">
<span style="color: #ed786a">Home</span>
</a>
</li>
<li>
<a href="2Catgeories.html" class="link">
Categories
</a>
</li>
<li>
<a href="http://example.com" class="link">
Bestsellers
</a>
</li>
<li>
<a href="http://example.com" class="link">
Find Us
</a>
</li>
<li>
<a href="http://example.com" class="link">
Contact
</a>
</li>
</ul>
</nav>
</div>
CSS:
html, body { /* ### */
margin:0;
padding:0;
height:100%;
width:100%;
}
body {
background-color: #fdfdfd;
font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI";
}
#wrapper {
width: 100%;
height: 100%;
margin:0 0 0 20%; /* ### */
}
#sidebar {
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1);
}
#nav {
color: #DADADA;
display: block;
max-width: 100%;
}
#nav ul {
padding-left: 0;
}
#nav li {
list-style-type: none;
margin: 0;
padding: 0.75em 0 0.75em 0;
text-align: center;
max-width: 100%;
}
#nav li:hover {
background:#333;
}
#nav li a {
display: block;
padding: 0.5em 0;
}
.link {
text-align: right;
margin-right: 25%;
letter-spacing: 1px;
display: block;
}
#nav li a:link{
color: #DADADA;
text-decoration: none;
}
#nav li a:visited{
color: #DADADA;
text-decoration: none;
}
#nav li a:hover{
color: #DADADA;
text-decoration: none;
}
#nav li a:active{
color: #DADADA;
text-decoration: none;
}
#welcometext {
text-align: center;
/*font-style: italic;*/
text-transform: uppercase;
font-size: 1em;
margin-top: 2em;
}
#searchbar {
width: 70%;
margin-left: auto;
margin-right: auto;
padding: 1em 1em 0.5em 1em;
text-align: right;
}
#searchbar .searchstyle{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#searchbar input {
max-width: 95%;
}
/*-------Media Styles-------*/
#media all and (max-width: 980px){
#sidebar{
float: none;
}
}
I am making a little website for my automated green house but I ran in to a kink right away! My "#title-bar" just disappears! If anyone can help me figure this out I will love you long time! :P
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>UrbanSector</title>
<link rel="stylesheet" type="text/css" href="css/custom.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.2.0/css/font-awesome.min.css">
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>
<body>
<div id="container">
<div id="title-bar">
<i id="title-bar-logo" class="fa fa-leaf fa-2x fa-inverse"></i>
<h3>UrbanSector</h3>
<ul>
<li><i class="fa fa-home fa-inverse"></i>Home</li>
<li><i class="fa fa-gear fa-inverse"></i>Notifications</li>
</ul>
</div>
<nav>
<div id="nav-btn-area">
</div>
<ul>
<li>stuff</li>
<li>stuff</li>
<li>stuff</li>
</ul>
</nav>
</div>
</body>
</html>
* {
/* border: limegreen 1px solid; */
padding: 0px;
margin: 0px;
}
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif
}
#container {
width: 100%;
background-color: #E2E2E2;
display: block;
}
#title-bar {
padding: 2px;
background-color: #363636;
display: inline;
}
#title-bar h3 {
float: left;
margin-left: 5px;
color: #FFFFFF;
}
#title-bar ul {
display: inline;
float: right;
list-style-type: none;
}
#title-bar ul li{
margin-left: 5px;
float: left;
}
#title-bar ul li i{
}
#title-bar-logo {
clear: left;
float: left;
margin: auto;
color: green;
}
nav {
margin-top: 10px;
display: block;
background-color: #363636;
width: 14%;
}
Edited: To fix layout of post
1) Remove the display: inline; rule from the #title-bar class and
2) Give it a height.. say 30px;
#title-bar {
padding: 2px;
background-color: #363636;
height: 30px;
}
FIDDLE
Change display: inline to overflow: hidden on your '#title-bar` CSS rule.
#title-bar {
padding: 2px;
background-color: #363636;
overflow: hidden;
}
This will clear the floats inside the container and cause it to get the height of its contents.
Another way is to make display:inline; -> display:inline-block;