I recently wanted to add some media query lines to my website and it was all perfect, until I added a mobile navigation (dropdown menu). After that, my marquee somehow got behind the header (navigation) and after that, I couldn't figure out what's wrong.
I don't want to move it down with padding, but rather figure out why that's, because before I added a mobile navigation everything had their specific place to stand and not one thing overlapping another thing.
http://i.imgur.com/ciqMkpB.png
Here is my html:
<body>
<div id="container">
<header>
<div id="nav">
<nav class="nav-collapse">
<ul>
<li><img alt="icon" src="res/img/logo2.png"></li>
<li><a rel="alternate" href="#" class="current" class="nav-collapse">Home</a></li>
<li>Members</li>
<li>Exams</li>
<li>Timetable </li>
<li>About</li>
<li><a class="fck" href="password.html">Private Site</a</li>
<li id="title">Class Site</li>
</ul>
</nav>
</div>
</header>
<div id="content">
<div id="title">
<div class="marquee">
<h3>Welcoke...</h3>
</div>
</div>
<div id="article" text-align="center">Website was made by ŽP, JM and TM!
</div>
</div>
Here is my main CSS Code:
body {
margin:0px !important;
padding:0px;
bottom:0px;
background:#3EA6FA url('../img/11.png') no-repeat center center fixed;
}
#media screen and (max-width: 480px) {
body {
background-size: 100%;
background-position:0% 58%;
}
}
#media screen and (max-width: 900px) {
body {
background-size: 100%;
}
}
body:after {
opacity:4;
}
hr {
border:2px solid #DED5CA;
}
a {
color:white;
cursor:pointer;
text-decoration:none;
}
#bg {
display:block;
position:relative;
}
#bg:before {
content:"";
position:absolute;
z-index:-1;
opacity:0.5;
top:0;
left:0;
bottom:0;
right:0;
}
#nav {
font-family:"Lobster";
font-size:22px;
}
#nav #title {
color:white;
font-weight:bold;
margin-top:15px ;
margin-right:20px;
float:right;
font-size:26px;
}
#nav a {
float:left;
}
#nav img {
float:left;
height:48px;
margin-top:5px;
margin-left:10px;
margin-right:10px;
}
#nav ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
background-color:#454443;
border-bottom:3px solid #757575;
}
#nav li a {
display:block;
color:white;
text-align:center;
padding:14px 16px;
text-decoration:none;
border-bottom:3px solid #454443;
}
#nav li a:hover {
animation-name:navlink;
animation-duration:0.35s;
background:#0276F2;
border-bottom:3px solid #325AFA;
}
#nav li a.current {
border-bottom:3px solid #325AFA;
}
#keyframes navlink {
from {
background-color:#3D362B;
}
to {
background-color:#0276F2;
}
}
#container {
font-family:"Oswald", "Bree Serif";
margin:0px;
}
#content {
margin:2%;
bottom:0px;
position:relative;
font-size:16px;
border:2px solid white;
background:rgba(255, 255, 255, 0.3);
text-align:center;
}
#content #title {
margin-left:2% !important;
margin-right:2% !important;
color:black;
font-family:"Lobster";
font-size:32px;
text-align:center;
border-bottom:2px dashed white;
}
and my new mobile navigation:
body, div,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, dl, dt, dd, ol, ul, li, hr,
fieldset, form, label, legend, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section,
summary, hgroup {
margin: 0;
padding: 0;
border: 0;
}
a:active,
a:hover {
outline: 0;
}
#-webkit-viewport { width: device-width; }
#-moz-viewport { width: device-width; }
#-ms-viewport { width: device-width; }
#-o-viewport { width: device-width; }
#viewport { width: device-width; }
/* ------------------------------------------
RESPONSIVE NAV STYLES
--------------------------------------------- */
.nav-collapse ul {
margin: 0;
padding: 0;
width: 100%;
display: block;
list-style: none;
}
.nav-collapse li {
width: 100%;
display: block;
}
.js .nav-collapse {
clip: rect(0 0 0 0);
max-height: 0;
position: absolute;
display: block;
overflow: hidden;
zoom: 1;
}
.nav-collapse.opened {
max-height: 9999px;
}
.disable-pointer-events {
pointer-events: none !important;
}
.nav-toggle {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
#media screen and (min-width: 40em) {
.js .nav-collapse {
position: relative;
}
.js .nav-collapse.closed {
max-height: none;
}
.nav-toggle {
display: none;
}
}
/* ------------------------------------------
FIXED HEADER
--------------------------------------------- */
/* ------------------------------------------
MASK
--------------------------------------------- */
header {
background: #454443;
position:absolute;
z-index: 3;
width: 100%;
left: 0;
top: 0;
}
.mask {
-webkit-transition: opacity 300ms;
-moz-transition: opacity 300ms;
transition: opacity 300ms;
background: rgba(0,0,0, .5);
visibility: hidden;
position: fixed;
opacity: 0;
z-index: 2;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
.android .mask {
-webkit-transition: none;
transition: none;
}
.js-nav-active .mask {
visibility: visible;
opacity: 1;
}
#media screen and (min-width: 40em) {
.mask {
display: none !important;
opacity: 0 !important;
}
}
/* ------------------------------------------
NAVIGATION STYLES
--------------------------------------------- */
.nav-collapse,
.nav-collapse ul {
list-style: none;
width: 100%;
float: left;
}
#media screen and (max-width: 480px) {
.nav-collapse {
float: left;
width: auto;
}
}
.nav-collapse li {
float: left;
width: 100%;
}
#media screen and (min-width: 40em) {
.nav-collapse li {
width: auto;
}
}
.nav-collapse a {
-webkit-tap-highlight-color: rgba(0,0,0,0);
border-top: 1px solid white;
text-decoration: none;
background: #454443;
color: #fff;
width: 100%;
float: left;
}
.nav-collapse a:active,
.nav-collapse .active a {
background: #325AFA;
}
#media screen and (min-width: 40em) {
.nav-collapse a {
text-align: center;
border-top: 0;
float: left;
margin: 0;
}
}
.nav-collapse ul ul a {
background: #ca3716;
padding-left: 2em;
}
#media screen and (min-width: 40em) {
.nav-collapse ul ul a {
display: none;
}
}
/* ------------------------------------------
NAV TOGGLE STYLES
--------------------------------------------- */
#font-face {
font-family: "responsivenav";
src:url("../icons/responsivenav.eot");
src:url("../icons/responsivenav.eot?#iefix") format("embedded-opentype"),
url("../icons/responsivenav.ttf") format("truetype"),
url("../icons/responsivenav.woff") format("woff"),
url("../icons/responsivenav.svg#responsivenav") format("svg");
font-weight: normal;
font-style: normal;
}
.nav-toggle {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: none;
text-indent: -300px;
position: relative;
overflow: hidden;
width: 60px;
height: 55px;
float: right;
}
.nav-toggle:before {
color: #fff; /* Edit this to change the icon color */
font: normal 28px/55px "responsivenav"; /* Edit font-size (28px) to change the icon size */
text-transform: none;
text-align: center;
position: absolute;
content: "\2261"; /* Hamburger icon */
text-indent: 0;
speak: none;
width: 100%;
left: 0;
top: 0;
}
.nav-toggle.active:before {
font-size: 24px;
content: "\78"; /* Close icon */
}
Try fixing the navbar to the top using navbar-fixed-top and then give the body a padding-top of 50px.
Related
Can anyone help me fix my responsive navigation. What CSS do I need to make the sub nav scroll down in mobile mode. Also the animation makes the nav hard to click on and when I resize the page the navigation does not return to its correct position. Help me please.
https://codepen.io/patriciaworth/pen/OJRBEbX
HTML
<html>
<head>
<link rel="stylesheet" href="sub-nav.css">
<!--Jquery-->
<script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="nav-container">
<nav>
<div class="container">
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Hosts</li>
<li>Membership</li>
<li>Affiliations</li>
<!--dropdown-->
<li class="dropdown"><span class="sub-link">Shop</span>
<ul>
<li>Products</li>
<li>My Account</li>
<li>Cart</li>
<li>Checkout</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
<div class="mobile-toggle">☰</div>
</div>
</nav>
<div class="nav-underline"></div>
</div>
<!--mobile nav toggle-->
<script>
$(document).ready(function(){
//mobile nav click event
$(".mobile-toggle").click(function(){
$(".menu").slideToggle();
});
$(".dropdown").click(function(){
$(".dropdown ul").slideToggle();
});
});
</script>
</body>
</html>
CSS
#import url("https://fonts.googleapis.com/css2?family=Dosis:wght#200;300;400;500;600;700;800&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght#0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght#300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
text-decoration: none; }
.container {
min-width: 360px;
max-width: 1080px; }
.nav-container {
width: 100%;
background: #183153;
background-image: linear-gradient(to right, #183153, #2e5d9e, #2e5d9e, #6190d1);
position: relative;
z-index: 10; }
.nav-underline {
height: 4px;
background-image: linear-gradient(to right, #ffcb05, #ffcb05, #ffe066);
animation-name: underlineToRight;
animation-duration: 4s;
animation-timing-function: ease-in;
position: relative;
z-index: 11; }
#keyframes underlineToRight {
from {
width: 0; }
to {
width: 100%; } }
nav ul {
font-family: "Dosis", sans-serif;
font-size: 16px;
line-height: 25px;
margin: 0;
padding: 0;
list-style: none;
position: relative; }
#media only screen and (max-width: 1024px) {
nav ul {
position: absolute;
top: 74px;
left: 0px;
background: #2e5d9e;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: none; } }
nav ul > li {
display: inline-block; }
#media only screen and (max-width: 1024px) {
nav ul > li {
display: block;
width: 100%;
text-align: center; } }
nav ul > li > ul {
display: none;
position: absolute;
width: 160px;
background: #2e5d9e; }
#media only screen and (max-width: 1024px) {
nav ul > li > ul {
width: 100%;
position: relative; } }
nav ul > li > ul > li {
width: 100%; }
nav ul > li:hover ul {
display: block; }
#media only screen and (max-width: 1024px) {
nav ul > li:hover ul {
display: none;
width: 100%; } }
nav ul li a,
nav .sub-link {
color: #ffffff;
display: block;
text-decoration: none;
padding: 15px;
box-sizing: border-box;
text-transform: uppercase;
transition: 0.3s;
cursor: pointer; }
nav ul li a:hover,
nav .sub-link:hover {
background: #c6c6cc;
color: #183153; }
#media only screen and (max-width: 1366px) {
nav ul li a,
nav .sub-link {
font-size: 14px; } }
#media only screen and (max-width: 1024px) {
nav ul > li {
display: block;
width: 100%;
border-bottom: 1px solid rgba(204, 204, 204, 0.3); } }
nav .mobile-toggle {
color: #fff;
padding: 25px 0px;
text-align: right;
right: 20px;
display: none;
cursor: pointer;
position: relative; }
#media only screen and (max-width: 1024px) {
nav .mobile-toggle {
display: block;
width: 100%; } }
Ok after much deliberation I have found an answer. See here:
https://codepen.io/patriciaworth/pen/rNMQyVx
HTML
<html>
<head>
<link rel="stylesheet" href="sub-nav.css">
<!--Jquery-->
<script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="nav-container">
<nav>
<div class="container">
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Hosts</li>
<li>Membership</li>
<li>Affiliations</li>
<!--dropdown-->
<li class="dropdown"><span class="sub-link">Shop</span>
<ul>
<li>Products</li>
<li>My Account</li>
<li>Cart</li>
<li>Checkout</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
<div class="mobile-toggle">☰</div>
</div>
</nav>
<div class="nav-underline"></div>
</div>
<!--mobile nav toggle-->
<script>
$(document).ready(function(){
//mobile nav click event
$(".mobile-toggle").click(function(){
$(".menu").slideToggle();
});
$(".dropdown").click(function(){
$(".dropdown ul").slideToggle();
});
//window resize event
$(window).resize(function(){
var w = $(window).width();
if(w > 1024 && $('.menu').is(':hidden'))
{
$('.menu').removeAttr('style');
}
});
});
</script>
</body>
</html>
SCSS
//breakpoints
$mega: 1920px;
$xlarge: 1680px;
$large: 1366px;
$med: 1024px;
$tiny: 768px;
//colors
$blue: #183153;
$blue2: #2e5d9e;
$blue3: #6190d1;
$light-blue: #336699;
$yellow: #ffcb05;
$yellow2: #ffe066;
$light-grey: #90909c;
$med-grey: #434343;
$dark-grey: #363636;
$white: #ffffff;
//fonts
#import url('https://fonts.googleapis.com/css2?family=Dosis:wght#200;300;400;500;600;700;800&display=swap');
$heading-font: 'Dosis', sans-serif;
#import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght#0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');
$page-font: 'Titillium Web', sans-serif;
#import url('https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght#300;400;500;600;700;800;900&display=swap');
$cursive: 'Sansita Swashed', cursive;
*
{
margin:0;
padding: 0;
text-decoration: none;
}
.container
{
min-width: 360px;
max-width: 1080px;
}
.nav-container
{
width: 100%;
background: $blue;
background-image: linear-gradient(to right, $blue, $blue2, $blue2, $blue3);
position: relative;
z-index: 10;
}
//animation
.nav-underline
{
height: 4px;
//background: $yellow;
background-image: linear-gradient(to right, $yellow, $yellow, $yellow2);
animation-name: underlineToRight;
animation-duration: 4s;
animation-timing-function: ease-in;
position: relative;
z-index: 11;
}
#keyframes underlineToRight
{
from
{
width: 0;
}
to
{
width: 100%;
}
}
nav
{
//top ul
.menu
{
font-family: $heading-font;
font-size: 16px;
line-height: 25px;
margin: 0;
padding: 0;
list-style: none;
position: relative;
#media only screen and (max-width: $med)
{
position: absolute;
top: 74px;
left: 0px;
background: $blue2;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: none;
}
}
//nav items
ul>li
{
display: inline-block;
position: relative;
#media only screen and (max-width: $med)
{
display: block;
width: 100%;
text-align: center;
}
}
//dropdown
ul>li>ul
{
display: none;
position: absolute;
width: 160px;
background: #333;
#media only screen and (max-width: $med)
{
width: 100%;
position: relative;
}
}
//dropdown items
ul>li>ul>li
{
width: 100%;
}
//top nav links
a,
.sub-link
{
display: block;
text-decoration: none;
padding: 15px;
box-sizing: border-box;
text-transform: uppercase;
transition: 0.3s;
cursor: pointer;
#media only screen and (max-width: $large)
{
font-size: 14px;
}
}
//top nav link color
.menu>li>a,
.sub-link
{
color: $white;
&:hover
{
background: lighten($light-grey, 20%);
color: $blue;
}
}
//show arrow icon so user knows to click for dropdown
.sub-link:after
{
content:" \25BC";
}
//dropdown link color
.dropdown>ul>li>a
{
color: #fff;
&:hover
{
background: #ccc;
color: $blue2;
}
}
//mobile item display
ul>li
{
#media only screen and (max-width: $med)
{
display: block;
width: 100%;
border-bottom: 1px solid rgba(204, 204, 204, 0.3);
}
}
//mobile icon
.mobile-toggle
{
color: #fff;
padding: 25px 0px;
text-align: right;
right: 20px;
display: none;
cursor: pointer;
position: relative;
#media only screen and (max-width: $med)
{
display: block;
width: 100%;
}
}
}
CSS
#import url("https://fonts.googleapis.com/css2?family=Dosis:wght#200;300;400;500;600;700;800&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght#0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght#300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
text-decoration: none; }
.container {
min-width: 360px;
max-width: 1080px; }
.nav-container {
width: 100%;
background: #183153;
background-image: linear-gradient(to right, #183153, #2e5d9e, #2e5d9e, #6190d1);
position: relative;
z-index: 10; }
.nav-underline {
height: 4px;
background-image: linear-gradient(to right, #ffcb05, #ffcb05, #ffe066);
animation-name: underlineToRight;
animation-duration: 4s;
animation-timing-function: ease-in;
position: relative;
z-index: 11; }
#keyframes underlineToRight {
from {
width: 0; }
to {
width: 100%; } }
nav .menu {
font-family: "Dosis", sans-serif;
font-size: 16px;
line-height: 25px;
margin: 0;
padding: 0;
list-style: none;
position: relative; }
#media only screen and (max-width: 1024px) {
nav .menu {
position: absolute;
top: 74px;
left: 0px;
background: #2e5d9e;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: none; } }
nav ul > li {
display: inline-block;
position: relative; }
#media only screen and (max-width: 1024px) {
nav ul > li {
display: block;
width: 100%;
text-align: center; } }
nav ul > li > ul {
display: none;
position: absolute;
width: 160px;
background: #333; }
#media only screen and (max-width: 1024px) {
nav ul > li > ul {
width: 100%;
position: relative; } }
nav ul > li > ul > li {
width: 100%; }
nav a,
nav .sub-link {
display: block;
text-decoration: none;
padding: 15px;
box-sizing: border-box;
text-transform: uppercase;
transition: 0.3s;
cursor: pointer; }
#media only screen and (max-width: 1366px) {
nav a,
nav .sub-link {
font-size: 14px; } }
nav .menu > li > a,
nav .sub-link {
color: #ffffff; }
nav .menu > li > a:hover,
nav .sub-link:hover {
background: #c6c6cc;
color: #183153; }
nav .sub-link:after {
content: " \25BC"; }
nav .dropdown > ul > li > a {
color: #fff; }
nav .dropdown > ul > li > a:hover {
background: #ccc;
color: #2e5d9e; }
#media only screen and (max-width: 1024px) {
nav ul > li {
display: block;
width: 100%;
border-bottom: 1px solid rgba(204, 204, 204, 0.3); } }
nav .mobile-toggle {
color: #fff;
padding: 25px 0px;
text-align: right;
right: 20px;
display: none;
cursor: pointer;
position: relative; }
#media only screen and (max-width: 1024px) {
nav .mobile-toggle {
display: block;
width: 100%; } }
I am using the the following HTML and CSS code for devices with a max-width of 480px.
How can I:
Add the word "Menu" before the links?
Display only "Menu"?
Click on "Menu" to reveal links and then sub-links?
Make "Menu", links and sublinks 100% of device width?
Please note, my knowledge of web design is limited to basic HTML and CSS. And this is my first go at designing a website.
Any help or advice would be greatly appreciated.
#menu {
position: relative;
top: 0;
margin: 0;
padding: 0;
width: 100%;
height: 3rem;
font-size: 0.8rem;
z-index: 999;
}
#menu ul {
position: absolute;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
list-style-type: none;
background-color: #0000ff;
color: #ffffff;
}
#menu ul > li {
display: block;
float: left;
height: auto;
width: 20%;
overflow: hidden;
}
#menu li > a {
display: block;
height: 100%;
width: 100%;
line-height: 3rem;
text-align: center;
text-decoration: none;
background-color: #0000ff;
color: #ffffff;
}
#menu li > span {
display: block;
height: 100%;
width: 100%;
line-height: 3rem;
text-align: center;
text-decoration: none;
background-color: #0000ff;
color: #ffffff;
}
#menu ul ul {
display: none;
position: static;
height: auto;
width: 100%;
margin: 0;
}
#menu ul ul li {
position: relative;
float: none;
display: block;
height: 100%;
width: 100%;
}
#menu ul ul li > a {
height: 100%;
width: 100%;
text-align: center;
}
#menu li:hover > a {
color: #0000ff;
background-color: #ffffff;
}
#menu li:hover > span {
color: #0000ff;
background-color: #ffffff;
}
#menu li:hover > ul {
display: block;
}
<nav id="menu">
<ul>
<li>HOME</li>
<li><span>ABOUT</span>
<ul>
<li>History</li>
<li>Champions</li>
<li>Presidents</li>
<li>Committee</li>
<li>Rules</li>
</ul>
</li>
<li><span>BOOK</span>
<ul>
<li>Functions</li>
<li>Suite</li>
<li>Lounge</li>
<li>Bar</li>
</ul>
</li>
<li><span>COMPS</span>
<ul>
<li>Fixtures</li>
<li>Gents</li>
<li>Ladies</li>
<li>Winners</li>
</ul>
</li>
<li><span>CONTACT</span>
<ul>
<li>Details</li>
<li>Join</li>
<li>Map</li>
</ul>
</li>
</ul>
</nav>
Please check following example
/********** Start RESET **********
AUTHOR: Osvaldas Valutis, www.osvaldas.info
*/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
*behavior: url( '/theme/js/boxsizing.htc' );
-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
-webkit-overflow-scrolling: touch;
}
html, body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sup, sub, tt, var, b, u, i, center, ul, ol, li, dl, dt, dd, table, tr, th, td, thead, tbody, tfoot, caption, form, fieldset, legend, input, textarea, select, label, applet, object, iframe, audio, video, canvas, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
font-size: 100%;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
line-height: inherit;
vertical-align: baseline;
border: 0;
outline: 0;
padding: 0;
margin: 0;
}
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-o-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
font-family: Helvetica, Arial, sans-serif;
line-height: 1;
color: #000;
background-color: #fff;
}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display: block;
}
audio, canvas, video {
display: inline-block;
*display: inline;
*zoom: 1;
}
audio:not([controls]) {
display: none;
}
canvas {
-ms-touch-action: double-tap-zoom;
}
[hidden] {
display: none;
}
a {
text-decoration: underline;
color: #000;
}
a:hover {
text-decoration: none;
}
small {
font-size: 75%;
}
big {
font-size: 125%;
}
em {
font-style: italic;
}
strong {
font-weight: bold;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
sup, sub {
font-size: 75%;
line-height: 0;
}
sup {
vertical-align: super;
}
sub {
vertical-align: sub;
}
pre {
display: block;
overflow: auto;
}
code {
font-family: 'Courier New', Courier, monospace;
}
ul, ol {
list-style: none;
}
table {
table-layout: auto;
border-collapse: separate;
border-spacing: 0;
empty-cells: hide;
}
img {
vertical-align: middle;
-ms-interpolation-mode: bicubic;
}
svg:not(:root) {
overflow: hidden;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
input, textarea {
-webkit-appearance: none;
}
button, input, select, textarea {
vertical-align: baseline;
*vertical-align: middle;
-webkit-border-radius: 0;
}
button, input {
line-height: normal;
*overflow: visible;
}
table button, table input {
*overflow: auto;
}
button, input[type='button'], input[type='reset'], input[type='submit'] {
cursor: pointer;
-webkit-appearance: button;
}
textarea {
overflow: auto;
vertical-align: top;
}
input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-results-button, input[type='search']::-webkit-search-results-decoration {
display: none;
}
input[type='search'] {
-webkit-appearance: textfield;
}
input[type='radio'] {
-webkit-appearance: radio;
}
input[type='checkbox'] {
-webkit-appearance: checkbox;
}
input::-ms-clear {
display: none;
}
input[type='password']::-ms-reveal {
display: none;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix {
zoom: 1;
}
*:first-child+html .clearfix {
zoom: 1;
}
.cleaner {
height: 0;
line-height: 0;
clear: both;
}
/********** End RESET **********/
html {
font-size: 100%;
}
body {
font-family: 'Noticia Text', serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
background-color: #f7efeb;
padding: 1.25em; /* 20 */
}
body, a, a:hover {
color: #111;
}
a {
-webkit-transition: color .3s ease;
-moz-transition: color .3s ease;
-ms-transition: color .3s ease;
-o-transition: color .3s ease;
transition: color .3s ease;
}
a, a:hover {
text-decoration: none;
}
#nav {
width: 60em; /* 1000 */
font-family: 'Open Sans', sans-serif;
font-weight: 400;
position: absolute;
top: 25%;
left: 50%;
margin-left: -30em; /* 30 480 */
}
#nav > a {
display: none;
}
#nav li {
position: relative;
}
#nav li a {
color: #fff;
display: block;
}
#nav li a:active {
background-color: #c00 !important;
}
#nav span:after {
width: 0;
height: 0;
border: 0.313em solid transparent; /* 5 */
border-bottom: none;
border-top-color: #efa585;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: -0.313em; /* 5 */
}
/* first level */
#nav > ul {
height: 3.75em; /* 60 */
background-color: #e15a1f;
}
#nav > ul > li {
width: 25%;
height: 100%;
float: left;
}
#nav > ul > li > a {
height: 100%;
font-size: 1.5em; /* 24 */
line-height: 2.5em; /* 60 (24) */
text-align: center;
}
#nav > ul > li:not( :last-child ) > a {
border-right: 1px solid #cc470d;
}
#nav > ul > li:hover > a, #nav > ul:not( :hover ) > li.active > a {
background-color: #cc470d;
}
/* second level */
#nav li ul {
background-color: #cc470d;
display: none;
position: absolute;
top: 100%;
}
#nav li:hover ul {
display: block;
left: 0;
right: 0;
}
#nav li:not( :first-child ):hover ul {
left: -1px;
}
#nav li ul a {
font-size: 1.25em; /* 20 */
border-top: 1px solid #e15a1f;
padding: 0.75em; /* 15 (20) */
}
#nav li ul li a:hover, #nav li ul:not( :hover ) li.active a {
background-color: #e15a1f;
}
#media only screen and ( max-width: 62.5em ) /* 1000 */ {
#nav {
width: 100%;
position: static;
margin: 0;
}
}
#media only screen and ( max-width: 40em ) /* 640 */ {
html {
font-size: 75%; /* 12 */
}
#nav {
position: relative;
top: auto;
left: auto;
}
#nav > a {
width: 3.125em; /* 50 */
height: 3.125em; /* 50 */
text-align: left;
text-indent: -9999px;
background-color: #e15a1f;
position: relative;
}
#nav > a:before, #nav > a:after {
position: absolute;
border: 2px solid #fff;
top: 35%;
left: 25%;
right: 25%;
content: '';
}
#nav > a:after {
top: 60%;
}
#nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type {
display: block;
}
/* first level */
#nav > ul {
height: auto;
display: none;
position: absolute;
left: 0;
right: 0;
}
#nav:target > ul {
display: block;
}
#nav > ul > li {
width: 100%;
float: none;
}
#nav > ul > li > a {
height: auto;
text-align: left;
padding: 0 0.833em; /* 20 (24) */
}
#nav > ul > li:not( :last-child ) > a {
border-right: none;
border-bottom: 1px solid #cc470d;
}
/* second level */
#nav li ul {
position: static;
padding: 1.25em; /* 20 */
padding-top: 0;
}
}
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<nav id="nav" role="navigation"> Show navigation Hide navigation
<ul class="clearfix">
<li>Home</li>
<li> <span>Blog</span>
<ul>
<li>Design</li>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li> <span>Work</span>
<ul>
<li>Web Design</li>
<li>Typography</li>
<li>Front-End</li>
</ul>
</li>
<li>About</li>
</ul>
</nav>
When I add content to my code, it bumps my page and footers down.I can't figure out why! When I add the smallest bit of content, it bumps a lot of my page elements down and all over the place. Any help would be appreciated. Not sure if I am posting this code correctly, please let me know if I need to do anything.
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img{
margin:0;
padding:0;
}
img, fieldset {
border:none;
}
body {
padding-top:2em;
font:normal 100%/150% "segoe ui",helvetica,sans-serif;
background-image: url(http://oi68.tinypic.com/9tzv4n.jpg);
max-width: 100%;
height: auto;
background-repeat: repeat;
color:#FFF;
}
p {
margin-top:20px;
}
#bottom {
background-image: url("http://i1377.photobucket.com/albums/ah69/danalavelle3/Sawtooth_zps67oxpl7p.png");
width:100%;
margin-top:20px;
position: absolute;
}
#page {
background:url('http://i1377.photobucket.com/albums/ah69/danalavelle3/Page_zpscom5uhou.png');
width:100%;
min-height:1000px;
margin-top:-55px;
margin-bottom:100px;
position:absolute;
}
h1 {
position:relative;
z-index: 7;
font:bold 40px/42px arial,helvetica,sans-serif;
background:url(http://www.cutcodedown.com/for_others/barrelPony/sandmannFarm/images/h1BottomStripe.png) bottom left repeat-x;
text-align:center;
margin-top:20px;
background-image: url(http://www.cutcodedown.com/for_others/barrelPony/sandmannFarm/images/h1BottomStripe.png), url(http://oi67.tinypic.com/33dfi86.jpg);
background-repeat: repeat-x, repeat;
background-position: bottom left, bottom left;
}
h1 a {
position:relative;
zoom:1; /* trip haslayout, fix legacy IE bugs */
display:block;
padding:30px 0;
text-transform:uppercase;
color:#FFF;
text-decoration:none;
text-shadow:
0 0 2px #000,
2px 2px 3px #754;
}
h1 span {
position:absolute;
top:50%;
left:50%;
width:402px;
height:160px;
margin:-80px 0 0 -201px;
text-indent:-999em;
background:url(http://www.cutcodedown.com/for_others/barrelPony/sandmannFarm/images/h1Logo.png);
}
h1 small {
display:block;
font:bold 16px/18px arial,helvetica,sans-serif;
}
#mainMenuCheck {
/* display none breaks this in some browsers, so just slide it out of view */
position:absolute;
left:-999em;
}
#mainMenu {
position:relative; /* depth sort over h1 */
background:#754 url(images/dots.png) top left;
padding:0.75em 0 0.75em 0.75em;
/* left margin adjusts for uneven menu width, change as needed */
text-align:center;
}
#mainMenu li {
list-style:none;
display:inline;
}
#mainMenu ul:before,
#mainMenu ul:after,
#mainMenu:after,
#mainMenu a {
text-shadow:
0 0 2px #000,
2px 2px 2px #000,
2px 2px 3px #000;
}
#mainMenu a {
display:inline-block;
vertical-align:bottom;
text-decoration:none;
color:#F0E8E0;
-webkit-transition:color 0.3s, text-shadow 0.3s;
transition:color 0.3s, text-shadow 0.3s;
}
#mainMenu a.current {
color:#87C6BC;
}
#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
color:#87C6BC;
}
#mainMenu a:after {
display:inline-block;
padding:0 0.1em 0 0.5em;
color:#FFF;
}
#mainMenu .lastInSet a:after {
display:none;
}
#mainMenu .setBreak {
padding-right:8em;
}
#mainMenu a:after,
#mainMenu:after,
#mainMenu ul:before,
#mainMenu ul:after {
content:"\2605";
font-family:"arial unicode ms","dejavu sans",lastresort,sans-serif;
}
#mainMenu:after,
#mainMenu ul:before,
#mainMenu ul:after {
position:absolute;
left:50%;
width:3em;
bottom:0.65em;
}
#mainMenu:after {
bottom:0.2em;
font-size:150%;
margin-left:-1.5em;
}
#mainMenu ul:before {
margin-left:-3em;
}
#media (min-width:1px) { /* sneaky trick to target just CSS3 browsers */
/*
h1 span {
background:url(images/h1Logo2x.png);
background-size:cover;
}
uncomment for 2x resolution logo support
*/
}
#media (max-width:50em) {
#mainMenu {
padding:1em 0 0.5em;
}
#mainMenu ul {
max-width:25em;
margin:0 auto;
}
#mainMenu .setBreak {
padding-right:0;
}
/*
restyle menu to 'mobile friendly' finger-sized targets
*/
#mainMenu:after,
#mainMenu a:after,
#mainMenu ul:before,
#mainMenu ul:after {
}
#mainMenu a {
padding:0.5em 1em;
margin:0 0.15em 0.5em;
background:rgba(0,0,0,0.3);
-webkit-border-radius:1em;
border-radius:1em;
}
}
#media (max-width:26em) {
body {
padding-top:0;
}
h1 {
text-align:left;
font:bold 150%/120% arial,helvetica,sans-serif;
}
h1 a {
padding:0.25em 3em 0.25em 0.25em;
}
h1 small {
font:bold 80%/120% "segoe ui",arial,helvetica,sans-serif;
padding-bottom:15px;
}
h1 span,
#mainMenu:before {
display:none;
}
#mainMenuCheck + label {
position:absolute;
z-index:99;
right:0.25em;
top:0.3em;
width:3em;
padding:0.5em 0;
background:#488;
border:0.25em solid #FFF;
-webkit-border-radius:0.75em;
border-radius:0.75em;
display:none;
}
#mainMenuCheck + label:hover {
background:#6BB;
display: none;
}
#mainMenuCheck + label:before,
#mainMenuCheck + label:after {
content:"";
display:block;
height:0.5em;
margin:0 0.5em;
border:solid #FFF;
border-width:0.25em 0;
}
#mainMenuCheck + label:after {
border-width:0 0 0.25em;
}
#mainMenu {
display:none;
padding:0.5em 0.5em 0;
}
#mainMenuCheck:checked ~ #mainMenu {
display:block;
}
}
/**MENU**/
#media (min-width:52em) {
.header {
display: none;
}
.menu {
display: none;
}
}
#media (max-width:52em) {
body {
z-index: 100;
margin:;
font-family: font:bold 16px/18px arial,helvetica,sans-serif;
background-color: #f4f4f4;
}
a {
color: #F8F4E6;
text-shadow:
0 0 5px #000,
5px 5px 5px #754;
}
.menu a:before,
.menu ul:before,
.menu ul:before {
content:"\2605";
}
/* header */
.header {
background-color:#6A4E39;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: relative;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-image:none;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color:#4EB4AC;
}
.header .logo {
display: block;
float: left;
font-size: 15px;
padding: 10px 20px;
margin-top: 5px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #F8F4E6;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #F8F4E6;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: none;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
}
/* 48em = 768px */
#media (min-width: 52em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
#media (max-width: 52em) {
#mainMenu {
display: none;
justify-content: center;
}
/* section */
.section {
overflow: hidden;
margin: auto;
max-width: 1400px;
}
.section a {
position: relative;
float: left;
width: 100%;
}
.section a img {
width: 100%;
display: block;
}
.section a span {
color: #fff;
position: absolute;
left: 5%;
bottom: 5%;
font-size: 2em;
text-shadow: 1px 1px 0 #000;
}
.section-split a span {
display: none;
}
.section-split a:hover span {
display: block;
}
/* 48em = 768px */
#media (min-width: 48em) {
.section-split a {
width: 50%;
}
}
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<link rel="stylesheet" href="screen.css" media="screen,projection,tv">
<title>Sandmann Farm</title>
</head>
<body>
<h1>
<a href="/">
Sandmann Farm
<span>-</span>
<small>EST. 1975</small>
</a>
</h1>
<!--Menu -->
<input type="checkbox" id="mainMenuCheck">
<label for="mainMenuCheck"></label>
<div id="mainMenu">
<ul>
<li>Home</li>
<li>About</li>
<li>What We Do</li>
<li class="lastInSet setBreak">Events</li>
<li>Success Stories</li>
<li>Contact</li>
<li>Events</li>
<li class="lastInSet">Blog</li>
</ul>
<!-- #mainMenu --></div>
<link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css" />
<header class="header">
Navigation
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li> Home</li>
<li> About</li>
<li> What We Do</li>
<li> Success Stories</li>
<li> Contact</li>
<li> Events</li>
<li> Blog</li>
</ul>
</header>
<!-- Page -->
<div id="page"></div>
<h1>Hello World!</h1>
<!--Header -->
<div id="sawtoothb"></div>
<div style="height: 100px; background-image:url('http://i1377.photobucket.com/albums/ah69/danalavelle3/Sawtooth_zps67oxpl7p.png'); background-repeat:repeat-x; margin-top: -110px;">
</div>
<!--Footer -->
<div id="footer"></div>
<div id="bottom"></div>
<div></div>
<div style="height: 100px; background-image:url('http://oi66.tinypic.com/2ufrt77.jpg'); background-repeat:repeat-x; margin-top: -40px;margin-bottom:25px;">
</div>
</body></html>
Nothing is being bumped down, you #page just has a huge min-height. Setting min-height will mean that whatever you define, in your case min-height:1000px that will be the mininum height of that element, it will never be smaller than 1000px, no matter what.
You can find this declaration here:
#page {
background:url('http://i1377.photobucket.com/albums/ah69/danalavelle3/Page_zpscom5uhou.png');
width:100%;
min-height:1000px;
margin-top:-55px;
margin-bottom:100px;
position:absolute;
}
Just remove the min-height:1000px, I added this JSFiddle to show you the result as well.
I have two div's that I am trying to put space between <div id="menu"> and <div class="Content">.
Here is a screenshot of what it currently looks like and as you can see the image is right up against the bottom of the navigation menu.
I have added margins to both of them, but so far nothing that I do has worked. No amount of pixels has given any space between my navigation and the page content.
I have a margin-bottom on the <div class="Logo"> and that worked to put space below it so I just can't seem to figure out what I cant put space below the navigation and/or above the content.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>EGLT Home</title>
<link rel="stylesheet" type="text/css" href="site.css" />
<script language="javascript" type="text/javascript" src="responsivemenu.js"></script>
</head>
<body>
<div class="box-effect">
<div class="Header">
<div class="Logo">
<img src="images/EverClearLogo.png" width="306px" height="125px" alt="Company Logo" />
</div>
<div class="Contact-Info">
<img src="images/icon_Email.png" width="50px" height="50px" alt="Email Ever Clear" />
<img src="images/icon_Facebook.png" width="50px" height="50px" alt="Ever Clear Facebook Page" />
<img src="images/icon_Phone.png" width="50px" height="50px" alt="Go To Contact Us Page" />
</div>
<div id="menu" class="nav">
<ul>
<li><span class="icon"><i aria-hidden="true" class="icon-home"></i><span></span>Home</span></li>
<li><span class="icon"><i aria-hidden="true" class="icon-newspaper"></i><span></span>About Us</span></li>
<li><span class="icon"><i aria-hidden="true" class="icon-hammer"></i><span></span>Services</span></li>
<li><span class="icon"><i aria-hidden="true" class="icon-image"></i><span></span>Gallery</span></li>
<li><span class="icon"><i aria-hidden="true" class="icon-phone"></i><span></span>Contact Us</span></li>
</ul>
</div>
</div>
<div class="Content">
<div class="Home-Left">
<img src="images/EverClearEdited.jpg" width="547px" height="315px" alt="Ever Clear Grading Landscaping Trucking" />
</div>
<div class="Home-Right">
</div>
</div>
<div class="Footer">
<div class="Copyright">
© Copyright: Jason Milam - 2015
</div>
</div>
</div>
</body>
</html>
CSS:
/* SHARED STYLES */
body {
color: #333;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
background-image: url("images/RedHexagons.jpg");
}
.Header {
height: 125px;
width: 100%;
position: relative;
margin-bottom: 20px;
}
.Footer {
float: left;
clear: left;
}
.box-effect {
margin-left: auto;
margin-right: auto;
margin-top: 25px;
margin-bottom: 25px;
width: 90%;
padding: 25px;
background-color:#FFF;
background: rgba(255,255,255,0.85);
border-radius: 15px;
overflow: hidden;
}
.Logo {
width: 306px;
margin-bottom: 20px;
}
.Contact-Info {
font-size: 20px;
display: block;
position: absolute;
right: 0;
top: 0;
}
.Copyright {
margin-top: 10px;
}
/* HOME PAGE STYLES */
.Content {
margin-top: 30px;
}
.Home-Left {
width: 50%;
float: left;
}
.Home-Right {
width: 50%;
}
/* NAVIGATION MENU */
#font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?8n7hjk');
src:url('fonts/icomoon.eot?#iefix8n7hjk') format('embedded-opentype'),
url('fonts/icomoon.woff?8n7hjk') format('woff'),
url('fonts/icomoon.ttf?8n7hjk') format('truetype'),
url('fonts/icomoon.svg?8n7hjk#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.svg?8n7hjk#icomoon') format('svg');
}
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#menu {
display: block;
margin-bottom: 20px;
}
.icon-home:before {
content: "\e900";
}
.icon-newspaper:before {
content: "\e904";
}
.icon-image:before {
content: "\e90d";
}
.icon-phone:before {
content: "\e942";
}
.icon-hammer:before {
content: "\e996";
}
.icon-menu:before {
content: "\e9bd";
}
/* Global CSS for all screen sizes */
.nav {
display: block;
margin-bottom:30px;
}
.nav ul {
max-width: 1200px;
margin: auto;
padding: 0;
list-style: none;
font-size: 1em;
font-weight: 300;
}
.nav li span {
display: block;
}
.nav a {
display: block;
color: rgba(249, 249, 249, .9);
text-decoration: none;
transition: color .5s, background .5s, height .5s;
}
.nav i{
/* Make the font smoother for Chrome */
transform: translate3d(0, 0, 0);
}
/* Remove the blue Webkit background when element is tapped */
a, button {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
/* Hover effect for nav menu */
.no-touch .nav ul:hover a {
color: rgba(0, 0, 0, .5);
}
.no-touch .nav ul:hover a:hover {
color: rgba(0, 0, 0, 0.99);
}
.nav li:nth-child(6n+1) {
background: #000000;
}
.nav li:nth-child(6n+2) {
background: #000000;
}
.nav li:nth-child(6n+3) {
background: #000000;
}
.nav li:nth-child(6n+4) {
background: #000000;
}
.nav li:nth-child(6n+5) {
background: #000000;
}
.no-touch .nav li:nth-child(6n+1) a:hover,
.no-touch .nav li:nth-child(6n+1) a:active,
.no-touch .nav li:nth-child(6n+1) a:focus {
border-bottom: 4px solid #E36220;
}
.no-touch .nav li:nth-child(6n+2) a:hover,
.no-touch .nav li:nth-child(6n+2) a:active,
.no-touch .nav li:nth-child(6n+2) a:focus {
border-bottom: 4px solid #E36220;
}
.no-touch .nav li:nth-child(6n+3) a:hover,
.no-touch .nav li:nth-child(6n+3) a:active,
.no-touch .nav li:nth-child(6n+3) a:focus {
border-bottom: 4px solid #E36220;
}
.no-touch .nav li:nth-child(6n+4) a:hover,
.no-touch .nav li:nth-child(6n+4) a:active,
.no-touch .nav li:nth-child(6n+4) a:focus {
border-bottom: 4px solid #E36220;
}
.no-touch .nav li:nth-child(6n+5) a:hover,
.no-touch .nav li:nth-child(6n+5) a:active,
.no-touch .nav li:nth-child(6n+5) a:focus {
border-bottom: 4px solid #E36220;
}
/* Place the icon */
.icon {
padding-top: 1.4em;
}
.icon + span {
margin-top: 2.1em;
transition: margin .5s;
}
/* Animating the height of the element*/
.nav a {
height: 7em;
}
/* Making the text follow the height animation */
.no-touch .nav a:hover .icon + span {
margin-top: 3.2em;
transition: margin .5s;
}
/* Positioning the icons and preparing for the animation*/
.nav i {
position: relative;
display: inline-block;
margin: auto;
padding:0.4em;
border-radius: 50%;
font-size: 1.8em;
box-shadow: 0 0 0 0.8em transparent;
background: rgba(255,255,255,0.1);
transform: translate3d(0, 0, 0);
transition: box-shadow .6s ease-in-out;
}
/* Styling the toggle menu link and hiding it */
.nav .navtoogle{
display: none;
width: 100%;
padding: 0.5em 0.5em 0.8em;
font-family: 'Lato',Calibri,Arial,sans-serif;
font-weight: normal;
text-align: left;
color: rgb(7, 16, 15);
font-size: 1.2em;
background: none;
border: none;
border-bottom: 4px solid rgb(221, 221, 221);
cursor: pointer;
}
.navtoogle i{
z-index:-1;
}
.icon-menu {
position: relative;
top: 3px;
line-height: 0;
font-size: 1.6em;
}
/* RESPONSIVE STYLES */
#media (min-width: 800px) {
/* Transforms the list into a horizontal navigation */
.nav li {
float: left;
width: 16.66666666666667%;
text-align: center;
transition: border .5s;
}
.nav a {
display: block;
width: auto;
}
}
/* The "tablet" and "mobile" version */
#media (max-width: 799.9px) {
/* Instead of adding a border, we transition the background color */
.no-touch .nav ul a:hover,
.no-touch .nav ul a:active,
.no-touch .nav ul a:focus {
background: #000000;
}
.nav ul li {
transition: background 0.5s;
}
}
/* CSS for a 2x3 columns version */
#media (min-width: 520px) and (max-width: 799px) {
/* Creating the 2 column layout using floating elements once again */
.nav li {
display: block;
float: left;
width: 50%;
height: 90px;
}
/* Adding some padding to make the elements look nicer */
.nav a {
padding-left: 1em;
}
/* Displaying the icons on the left, and the text on the right side using inline-block */
.nav li span,
.nav li span.icon {
display: inline-block;
}
.nav li span.icon {
width: 50%;
}
.nav li .icon + span {
font-size: 1em;
}
.icon + span {
position: relative;
/*top: -0.2em*/
}
/* Adapting the animation for smaller screens*/
.nav li i {
display: inline-block;
padding: 8% 9%;
border: 4px solid transparent;
border-radius: 50%;
font-size: 1.5em;
background: rgba(255,255,255,0.1);
transition: border .5s;
}
/* Transition effect on the border color */
.no-touch .nav li:hover i,
.no-touch .nav li:active i,
.no-touch .nav li:focus i {
border: 4px solid rgba(255,255,255,0.1);
}
}
/* Adapting the font size and width for smaller screns*/
#media (min-width: 32.5em) and (max-width: 38.688em) {
.nav li span.icon {
width: 50%;
}
.nav li .icon + span {
font-size: 0.9em;
}
}
#media (max-width: 32.438em) {
/* Unhiding the styled menu link */
.nav .navtoogle{
margin: auto;
display: block;
}
/* Animating the height of the navigation when the button is clicked */
/* If JavaScript is disabled, the menu stays open */
.no-js .nav ul {
max-height: 30em;
overflow: hidden;
}
/* When JavaScript is enabled, we hide the menu */
.js .nav ul {
max-height: 0em;
overflow: hidden;
}
/* Displaying the menu when the user has clicked on the button */
.js .nav .active + ul {
max-height: 30em;
overflow: hidden;
transition: max-height .4s;
}
/* Adapting the layout of the menu for smaller screens */
.nav li span {
display: inline-block;
height: 100%;
}
.nav a {
padding: 0.5em;
}
.icon + span {
margin-left: auto;
font-size: 0.8em;
}
.nav li {
border-left: 8px solid #E36220;
}
/* make the nav bigger on touch screens */
.touch .nav a {
padding: 0.8em;
}
}
The reason the margin-bottom is working as applied to .menu is two-fold. First, there is a height on .Header that is smaller than the content it contains. Second, your floating all of the li elements left, thus .menu really has no height. If you remove the height from .Header, and remove float:left from the li elements, and instead use display:inline-block on them, the margin works.
Then your li elements will need to be fixed a bit so there's not space in between them.
your .nav li is floated, add a clear:both div after your menu and it should solve the problem
I am looking to have the logo aligned in the center and social media buttons aligned on the right in the header. How do I achieve? I've been able to get it aligned with my nav bar but that's not what I'm looking for. Any help would be appreciated.
HTML
<body>
<div id="wrapper">
<header>
<div class="logo">
<img src="http://i.imgur.com/cosDXx1.png"/>
</div>
<div class ="social">
<img src="http://i.imgur.com/1GhbSOj.png"/>
<img src="http://i.imgur.com/oawoJtC.png"/>
<img src="http://i.imgur.com/2dAtAX3.png"/>
</div>
</header>
<nav>
<ul class="egmenu">
<li>Home</li>
<li>About
<ul>
<li>History</li>
<li>Brothers</li>
</ul>
</li>
<li>Philanthropy
<ul>
<li>Kovacs Color Run</li>
<li>Greek God</li>
<li>Boys & Girls Club</li>
</ul>
</li>
<li>Membership</li>
<li>Contact</li>
</ul>
</nav>
CSS
body {
margin:0px;
padding:0px;
}
header {
height:105px;
background-color:black;
text-align:center;
}
header img{
display:inline-block;
margin: 0 auto;
}
header .social a {
float:right;
}
ul.egmenu {
background: #333;
height: 30px;
width: 100%;
text-align:center;
}
ul.egmenu > li {
position: relative;
display:inline-block;
list-style:none;
}
ul.egmenu ul {
background: #444;
display: none;
position: absolute;
left: 0; top: 100%;
}
ul.egmenu a {
cursor: pointer;
display: block;
color: white;
line-height: 30px;
padding: 0 20px;
text-decoration:none;
}
ul.egmenu li {
list-style: none;
}
ul.egmenu li:hover {
background: #555;
}
ul.egmenu li:hover ul {
display: block;
padding:0;
}
#media all and (max-width: 600px) {
ul.egmenu { height: auto; padding:0;}
ul.egmenu > li { float: none; width: 100%; }
ul.egmenu a { line-height: 40px; }
ul.egmenu ul { position: relative; }
}
#media all and (min-width: 601px) {
ul.egmenu li:hover { background: #555; }
ul.egmenu li:hover ul { display: block; }
}
#media all and (max-width: 600px) {
ul.egmenu { height: auto; }
ul.egmenu > li { float: none; width: 100%; }
ul.egmenu a { line-height: 40px; }
ul.egmenu ul { position: relative; }
ul.egmenu li.tap { background: #555; }
ul.egmenu li.tap ul { display: block; }
}
Heres a fiddle: http://jsfiddle.net/mcxa341s/
Remove the logo div and use CSS to add a background for the header.
Change to this:
header {
height:105px;
background: url('http://i.imgur.com/cosDXx1.png') no-repeat center;
background-color:black;
text-align:center;
}
And use margin-top for the social div to adjust the positioning.
JSFiddle Demo
UPDATE
Change:
header .social a {
float:right;
}
To this:
header .social {
position: absolute;
right: 0;
top: 40px;
}
JSFiddle Demo
Make the logo a background for the header and get rid of the logo div. Then your social media icons will align without a problem.
Use position:absolute for social media.
.social {
position: absolute;
right: 20px;
top: 50px;
}
CSS:
body {
margin:0px;
padding:0px;
}
header {
height:105px;
background-color:black;
text-align:center;
}
header .logo{ margin: 0 auto;}
header .social{margin-top:-24px;}
header img{
display:inline-block;
}
header .social a {
float:right;
}
ul.egmenu {
background: #333;
height: 30px;
width: 100%;
text-align:center;
}
ul.egmenu > li {
position: relative;
display:inline-block;
list-style:none;
}
ul.egmenu ul {
background: #444;
display: none;
position: absolute;
left: 0; top: 100%;
}
ul.egmenu a {
cursor: pointer;
display: block;
color: white;
line-height: 30px;
padding: 0 20px;
text-decoration:none;
}
ul.egmenu li {
list-style: none;
}
ul.egmenu li:hover {
background: #555;
}
ul.egmenu li:hover ul {
display: block;
padding:0;
}
#media all and (max-width: 600px) {
ul.egmenu { height: auto; padding:0;}
ul.egmenu > li { float: none; width: 100%; }
ul.egmenu a { line-height: 40px; }
ul.egmenu ul { position: relative; }
}
#media all and (min-width: 601px) {
ul.egmenu li:hover { background: #555; }
ul.egmenu li:hover ul { display: block; }
}
#media all and (max-width: 600px) {
ul.egmenu { height: auto; }
ul.egmenu > li { float: none; width: 100%; }
ul.egmenu a { line-height: 40px; }
ul.egmenu ul { position: relative; }
ul.egmenu li.tap { background: #555; }
ul.egmenu li.tap ul { display: block; }
}
JSFiddle Demo