The content begins to appear on the page overlapped with the navbar, I cannot really figure out where can I solve this.
HTML
<!DOCTYPE html>
<html lang="en">
<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 href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="stil.css">
<script src="s.js"></script>
<title>Document</title>
</head>
<header>
<nav id="navbar" class="">
<div class="nav-wrapper">
<div class="logo">
<i class="fa fa-angellist"></i> Logo
</div>
<ul id="menu">
<li>Home</li>
<li>Matematica</li>
<li>Limba romana</li>
<li>Informatica</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="menuIcon">
<span class="icon icon-bars"></span>
<span class="icon icon-bars overlay"></span>
</div>
<div class="overlay-menu">
<ul id="menu">
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</header>
<body>
<div class="container">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
<div class="box">D</div>
</div>
</body>
</html>
CSS
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: rgb(250, 250, 250) url(http://lorempixel.com/1920/1080/nature/);
font-family: Lato, Helvetica, Arial, sans-serif;
}
header{
z-index: 1;
}
a {
color: inherit;
font-family: inherit;
font-size: inherit;
text-decoration: none;
}
/*======================================================
Navbar
======================================================*/
#navbar {
background: white;
color: rgb(13, 26, 38);
position: fixed;
top: 0;
height: 60px;
line-height: 60px;
width: 100vw;
z-index: 10;
}
.nav-wrapper {
margin: auto;
text-align: center;
width: 70%;
} #media(max-width: 768px) {
.nav-wrapper {
width: 90%;
}
} #media(max-width: 638px) {
.nav-wrapper {
width: 100%;
}
}
.logo {
float: left;
margin-left: 28px;
font-size: 1.5em;
height: 60px;
letter-spacing: 1px;
text-transform: uppercase;
} #media(max-width: 768px) {
.logo {
/* margin-left: 5px; */
}
}
#navbar ul {
display: inline-block;
float: right;
list-style: none;
/* margin-right: 14px; */
margin-top: -2px;
text-align: right;
transition: transform 0.5s ease-out;
-webkit-transition: transform 0.5s ease-out;
} #media(max-width: 640px) {
#navbar ul {
display: none;
}
} #media(orientation: landscape) {
#navbar ul {
display: inline-block;
}
}
#navbar li {
display: inline-block;
}
#navbar li a {
color: rgb(13, 26, 38);
display: block;
font-size: 0.7em;
height: 50px;
letter-spacing: 1px;
margin: 0 20px;
padding: 0 4px;
position: relative;
text-decoration: none;
text-transform: uppercase;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}
#navbar li a:hover {
border-bottom: 1px solid rgb(28, 121, 184);
color: rgb(28, 121, 184);
transition: all 1s ease;
-webkit-transition: all 1s ease;
}
/* Animated Bottom Line */
#navbar li a:before, #navbar li a:after {
content: '';
position: absolute;
width: 0%;
height: 1px;
bottom: -1px;
background: rgb(13, 26, 38);
}
#navbar li a:before {
left: 0;
transition: 0.5s;
}
#navbar li a:after {
background: rgb(13, 26, 38);
right: 0;
/* transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); */
}
#navbar li a:hover:before {
background: rgb(13, 26, 38);
width: 100%;
transition: width 0.5s cubic-bezier((0.22, 0.61, 0.36, 1));
}
#navbar li a:hover:after {
background: transparent;
width: 100%;
/* transition: 0s; */
}
/*======================================================
Mobile Menu Menu Icon
======================================================*/
#media(max-width: 640px) {
.menuIcon {
cursor: pointer;
display: block;
position: fixed;
right: 15px;
top: 20px;
height: 23px;
width: 27px;
z-index: 12;
}
/* Icon Bars */
.icon-bars {
background: rgb(13, 26, 38);
position: absolute;
left: 1px;
top: 45%;
height: 2px;
width: 20px;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.icon-bars::before {
background: rgb(13, 26, 38);
content: '';
position: absolute;
left: 0;
top: -8px;
height: 2px;
width: 20px;
/* -webkit-transition: top 0.2s ease 0.3s;
transition: top 0.2s ease 0.3s; */
-webkit-transition: 0.3s width 0.4s;
transition: 0.3s width 0.4s;
}
.icon-bars::after {
margin-top: 0px;
background: rgb(13, 26, 38);
content: '';
position: absolute;
left: 0;
bottom: -8px;
height: 2px;
width: 20px;
/* -webkit-transition: top 0.2s ease 0.3s;
transition: top 0.2s ease 0.3s; */
-webkit-transition: 0.3s width 0.4s;
transition: 0.3s width 0.4s;
}
/* Bars Shadows */
.icon-bars.overlay {
background: rgb(97, 114, 129);
background: rgb(183, 199, 211);
width: 20px;
animation: middleBar 3s infinite 0.5s;
-webkit-animation: middleBar 3s infinite 0.5s;
} #keyframes middleBar {
0% {width: 0px}
50% {width: 20px}
100% {width: 0px}
} #-webkit-keyframes middleBar {
0% {width: 0px}
50% {width: 20px}
100% {width: 0px}
}
.icon-bars.overlay::before {
background: rgb(97, 114, 129);
background: rgb(183, 199, 211);
width: 10px;
animation: topBar 3s infinite 0.2s;
-webkit-animation: topBar 3s infinite 0s;
} #keyframes topBar {
0% {width: 0px}
50% {width: 10px}
100% {width: 0px}
} #-webkit-keyframes topBar {
0% {width: 0px}
50% {width: 10px}
100% {width: 0px}
}
.icon-bars.overlay::after {
background: rgb(97, 114, 129);
background: rgb(183, 199, 211);
width: 15px;
animation: bottomBar 3s infinite 1s;
-webkit-animation: bottomBar 3s infinite 1s;
} #keyframes bottomBar {
0% {width: 0px}
50% {width: 15px}
100% {width: 0px}
} #-webkit-keyframes bottomBar {
0% {width: 0px}
50% {width: 15px}
100% {width: 0px}
}
/* Toggle Menu Icon */
.menuIcon.toggle .icon-bars {
top: 5px;
transform: translate3d(0, 5px, 0) rotate(135deg);
transition-delay: 0.1s;
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.menuIcon.toggle .icon-bars::before {
top: 0;
transition-delay: 0.1s;
opacity: 0;
}
.menuIcon.toggle .icon-bars::after {
top: 10px;
transform: translate3d(0, -10px, 0) rotate(-270deg);
transition-delay: 0.1s;
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.menuIcon.toggle .icon-bars.overlay {
width: 20px;
opacity: 0;
-webkit-transition: all 0s ease 0s;
transition: all 0s ease 0s;
}
}
/*======================================================
Responsive Mobile Menu
======================================================*/
.overlay-menu {
background: lightblue;
color: rgb(13, 26, 38);
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
right: 0;
padding-right: 15px;
transform: translateX(-100%);
width: 100vw;
height: 100vh;
-webkit-transition: transform 0.2s ease-out;
transition: transform 0.2s ease-out;
}
.overlay-menu ul, .overlay-menu li {
display: block;
position: relative;
}
.overlay-menu li a {
display: block;
font-size: 1.8em;
letter-spacing: 4px;
/* opacity: 0; */
padding: 10px 0;
text-align: right;
text-transform: uppercase;
-webkit-transition: color 0.3s ease;
transition: color 0.3s ease;
/* -webkit-transition: 0.2s opacity 0.2s ease-out;
transition: 0.2s opacity 0.2s ease-out; */
}
.overlay-menu li a:hover,
.overlay-menu li a:active {
color: rgb(28, 121, 184);
-webkit-transition: color 0.3s ease;
transition: color 0.3s ease;
}
.timetable {
display: grid;
grid-template-areas: ". week" "time content";
grid-template-columns: 120px;
grid-template-rows: 60px;
width: 100vw;
height: 100vh;
}
.timetable .week-names {
grid-area: week;
display: grid;
grid-template-columns: repeat(5, 1fr);
text-transform: uppercase;
font-size: 12px;
}
.timetable .week-names > div {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height:100%;
box-shadow: inset 3px 0 0 black;
margin-top: 50px;
font: inherit;
font-size: large;
}
.timetable .time-interval {
grid-area: time;
display: grid;
grid-template-rows: repeat(7, 1fr);
font-size: 14px;
}
.timetable .time-interval > div {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
box-shadow: inset 0 3px 0 0 black;
}
.timetable .content {
grid-area: content;
display: grid;
grid-template-rows: repeat(7, 1fr);
grid-template-columns: repeat(5, 1fr);
}
.timetable .content > div {
box-shadow: inset 3px 0 0 black, inset 0 3px 0 0 black;
font: inherit;
font-size: large;
display: flex;
align-items: center;
justify-content: center;
}
.container {
margin: 20px auto;
width: 400px;
height: 400px;
background-color: #fff;
display: grid;
grid-template-columns: 200px 200px;
grid-row: auto auto;
grid-column-gap: 20px;
grid-row-gap: 20px;
}
.container .box {
background-color: #333;
padding: 20px;
border-radius: 10px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
font-family: sans-serif;
}
The fixed attribute doesn't affect the layout of the rest of the page,
Since you have a fixed height for your fixed element, you can add
margin-top: 60px;
to your primary container element to add in the space that the fixed element would normally have taken.
Related
I’m building my first website, trying to adapt it to the most popular browsers, and the css style works correctly in all browsers except Safari. In this browser, almost everything does not work for me: the hover effect is not linear, flexbox is not displayed correctly (1,2,3 screen - as displayed in safari; 4,5,6 screen - as should be in all browsers), in the mobile version the menu by the span button does not open. I threw the code in https://autoprefixer.github.io/ru/, because I understand that there are not enough prefixes, but it did not help me, after saving the code and updating the page, everything remained in its place. Tell me, please, what to do then?
html {
overflow: scroll;
overflow-x: hidden;
height: 100%;
}
::-webkit-scrollbar {
width: 0px;
}
body {
margin: 0;
width: 100%;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
min-height: 100%;
}
a {
text-decoration: none;
color: black;
}
.wrapper {
display: block;
max-width: 2560px;
flex-grow: 1;
margin-top: 10px;
margin-left: 20%;
margin-right: 20%;
position: relative;
z-index: 7;
text-align: center;
}
.content span {
font-family: 'PT Serif', serif;
font-family: 'PT Sans', sans-serif;
font-size: 26px;
}
header, nav, section, footer {
font-family: 'Merriweather', serif;
color: rgb(0, 0, 0);
}
.header {
background-image: url(../img/12321.jpg);
background-position: top right;
background-size: cover;
max-height: 250px;
width: 100%;
}
.nav li a {
display: block;
text-align: center;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.logo-header {
height: 40px;
position: relative;
float: right;
margin: 200px 10px 0 0;
}
.nav {
height: 100vh;
margin-left: calc(20% - 100px);
position: relative;
outline: none;
}
.nav ul {
list-style: none;
padding: 0.5em 0;
margin: 0;
}
.nav ul li {
margin: 10px;
height: 40px;
line-height: 40px;
background-color: white;
padding: 0.5em 1em 0.5em 1em;
font-size: 24px;
background-repeat: no-repeat;
background-position: left 15px center;
background-size: auto 40px;
transition: all 0.15s linear;
border-radius: 5px;
border: 1px solid black;
opacity: 0.75;
}
.menu {
display: grid;
grid-template-areas:
"home home"
"gallery ut"
"journal contact";
grid-template-rows: 65px 65px 65px;
grid-template-columns: 350px 350px;
grid-gap: 10px;
height: 100vh;
position: relative;
z-index: 5;
}
.home {
grid-area: home;
}
.gallery {
grid-area: gallery;
}
.ut {
grid-area: ut;
}
.journal {
grid-area: journal;
}
.contact {
grid-area: contact;
}
.nav img {
float: left;
}
.menu li:hover {
background-color: #ffffff;
opacity: 1;
}
#media screen and (max-width: 1024px) {
body {
min-height: 99vh;
}
.wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
/* MENU STYLE */
.menu {
display: none;
background-image: url(../img/Фон.png);
height: 100%;
position: relative;
z-index: 5;
}
.nav {
margin-left: 0;
}
div.burger {
height: 30px;
width: 40px;
position: absolute;
top: 11px;
left: 21px;
z-index: 30;
}
div.x,
div.y,
div.z {
position: absolute; margin: auto;
top: 0px; bottom: 0px;
background: #fff;
border-radius:2px;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-ms-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
div.x, div.y, div.z { height: 3px; width: 26px; }
div.y {top: 18px;}
div.z {top: 37px;}
div.collapse {
top: 20px;
-webkit-transition: all 70ms ease-out;
-moz-transition: all 70ms ease-out;
-ms-transition: all 70ms ease-out;
-o-transition: all 70ms ease-out;
transition: all 70ms ease-out;
}
div.rotate30 {
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-webkit-transition: all 50ms ease-out;
-moz-transition: all 50ms ease-out;
-ms-transition: all 50ms ease-out;
-o-transition: all 50ms ease-out;
transition: all 50ms ease-out;
}
div.rotate150 {
-ms-transform: rotate(150deg);
-webkit-transform: rotate(150deg);
transform: rotate(150deg);
-webkit-transition: all 50ms ease-out;
-moz-transition: all 50ms ease-out;
-ms-transition: all 50ms ease-out;
-o-transition: all 50ms ease-out;
transition: all 50ms ease-out;
}
div.rotate45 {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
div.rotate135 {
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
div.menu-bg {
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
-webkit-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
-moz-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
-ms-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
-o-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
ul.menu {
padding-top: 5em;
}
ul.menu li {
width:300px;
margin: 0 auto;
}
ul.menu span {
text-align: right;
}
ul.menu li a {
background-color: white;
color:rgb(0, 0, 0);
opacity: 0.75;
}
section > div {
transition: transform 1s;
transform: translateX(0px);
}
}
footer {
position: relative;
flex-shrink: 0;
height: 10px;
width: 100%;
bottom: 0;
z-index: 6;
}
/* MAIN CONTENT */
.box-image {
width: 30%;
min-width: 120px;
height: 120px;
background-size: 120px 120px;
background-position: center;
position: relative;
float: left;
margin: 5vh 10px 10px 10px;
}
#media screen and (max-width: 1024px) and (min-width: 381px) {
.box-image {
width: 33,3333%;
}
}
#media screen and (max-width: 380px) {
.box-image {
width: 50%;
height: 100px;
background-size: 100px 100px;
}
}
.vkontakte {
background-image: url(../img/vk.svg);
background-repeat: no-repeat;
}
.instagram {
background-image: url(../img/instagram.svg);
background-repeat: no-repeat;
}
.whatsupp {
background-image: url(../img/whatsapp.svg);
background-repeat: no-repeat;
}
.mail {
background-image: url(../img/mailru.svg);
background-repeat: no-repeat;
}
.link-image {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.ContactWithMe {
display: inline-block;
position:relative;
text-align: center;
width: 100%;
}
.ContactWithMe a {
position: relative;
display: inline-block;
text-align:center;
width:120px;
height:120px;
}
/* FOOTER */
.social-block {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
justify-content: center;
width: 100%;
}
.social-block a {
color: #000000;
width: 40px;
height: 40px;
font-size: 20px;
overflow: hidden;
padding: 10px;
}
a {
text-decoration: none;
transition: 0.3s linear;
}
.vk a:hover {
color: #45668e
}
.inst a:hover{
color: #e4405f;
}
.wa a:hover {
color: #25D366
}
</head>
<body>
<header class="header">
<div> <img class="logo-header" src="../img/logo-main.png" alt="#"> </div>
<nav class="nav" role="navigation">
<div class="menu-bg"></div>
<ul class="menu" id="see">
<li class="home"><img src="../img/home.svg" alt="#" height="40px"><span>Главная</span></li>
<li class="gallery"><img src="../img/art.svg" alt="#" height="40px"><span>Галерея</span></li>
<li class="ut"><img src="../img/sew.svg" alt="#" height="40px"><span>Полезные советы</span></li>
<li class="journal"><img src="../img/portrait.svg" alt="#" height="40px"><span>Журнал</span></li>
<li class="contact"><img src="../img/contact.svg" alt="#" height="40px"><span>Контакты</span></li>
</ul>
<div class="burger">
<div class="x"></div>
<div class="y"></div>
<div class="z"></div>
</div>
</nav>
</header>
<div class="wrapper">
<div class=ContactWithMe>
<div class="box-image vkontakte">
</div>
<div class="box-image instagram">
</div>
<div class="box-image whatsupp">
</div>
<div class="box-image mail">
</div>
</div>
</div>
<footer>
<div class="social-block">
<div class="social vk">
<i class="fa fa-vk fa-2x"></i>
</div>
<div class="social inst">
<i class="fa fa-instagram fa-2x gradient-icon"></i>
</div>
<div class="social wa">
<i class="fa fa-whatsapp fa-2x" target="_blank"></i>
</div>
</div>
</footer>
</body>
Seems to me that some elements get display: block which is the default.
Did you try adding all prefixes for display: flex ?
display: -webkit-box; // OLD - iOS 6-, Safari 3.1-6
display: -moz-box; // OLD - Firefox 19- (buggy but mostly works)
display: -ms-flexbox; // TWEENER - IE 10
display: -webkit-flex; // NEW - Chrome
display: flex; // NEW, Spec - Opera 12.1, Firefox 20+
For Safari try adding -webkit- prefix to all flexbox properties.
Safari still requires the -webkit- prefix to use flexbox.
Just try -webkit-flexbox. it's working for safari., webkit-flex safari will not taking.
I advise you to see that:
How do I make flex box work in safari?
sorry for google translate
So I have this page with a nav bar, and on the nav bar, there is a img logo on the left and 3 links on the right. And when I test responsiveness with devices on Chrome, the nav bar resizes and shifts to the left, leaving a blank space on it's right. Here's a picture Nav bar not displaying fully
And here is all my code:
#font-face {
font-family: coyote;
src: url(font/coyote.ttf);
}
html {
width: 100%;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
margin: 0;
padding: 0;
}
nav {
background: #efefef;
overflow: hidden;
box-shadow: -2px -7px 47px 9px rgba(0, 0, 0, 0.35);
-moz-box-shadow: -2px -7px 47px 9px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: -2px -7px 47px 9px rgba(0, 0, 0, 0.35);
z-index: 999;
margin: 0;
padding: 0;
}
.logo-section {
float: left;
padding: 25px;
font-family: serif;
}
.logo-left {
width: 12%;
float: left;
overflow: none;
display: block;
margin: auto;
transform: translateY(20%);
}
.hb-button {
float: right;
background-color: rgba(0, 0, 255, 0);
color: black;
border: none;
font-size: 18px;
padding: 9px 10px;
border-radius: 3px;
cursor: pointer;
display: none;
outline: none;
}
nav a {
text-decoration: none;
color: #282828;
font-size: 16px;
}
nav ul {
overflow: hidden;
color: #fff;
margin: 0;
height: 68px;
text-align: center;
transition: max-height 0.5s;
-webkit-transition: max-height 0.5s;
-moz-transition: max-height 0.5s;
-ms-transition: max-height 0.5s;
-o-transition: max-height 0.5s;
}
nav ul li {
float: right;
display: inline-block;
font-family: coyote;
}
li > a {
color: #000;
text-decoration: none;
transition-timing-function: ease-in-out;
}
li > a:hover {
color: #CF2034;
transition: color .7s cubic-bezier(0.11, 0.7, 0, 1);
-o-transition: color .7s cubic-bezier(0.11, 0.7, 0, 1);
-moz-transition: color .7s cubic-bezier(0.11, 0.7, 0, 1);
-webkit-transition: color .7s cubic-bezier(0.11, 0.7, 0, 1);
transition-timing-function: ease-in-out;
}
li > a:after {
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 2px;
background-color: #CF2034;
content: "";
transform: scale(0);
-o-transition: transform 1s cubic-bezier(0.11, 0.7, 0, 1);
-moz-transition: transform 1s cubic-bezier(0.11, 0.7, 0, 1);
-webkit-transition: transform 1s cubic-bezier(0.11, 0.7, 0, 1);
transition: transform 1s cubic-bezier(0.11, 0.7, 0, 1);
transition-timing-function: ease-in-out;
}
li > a:hover:after {
transform: scale(1);
}
.image-cont {
position: absolute;
min-width: 45%;
min-height: 45%;
top: 55%;
left: 50%;
overflow: visible;
}
.image {
animation: load_up 2s forwards;
-webkit-animation: load_up 2s forwards;
-moz-animation: load_up 2s forwards;
-o-animation: load_up 2s forwards;
margin-top: -50%;
margin-left: -50%;
position: relative;
}
.image-cont2 {
position: absolute;
top: 35%;
left: 50%;
overflow: visible;
}
.image2 {
display: none;
animation: load_up 2s forwards;
-webkit-animation: load_up 2s forwards;
-moz-animation: load_up 2s forwards;
-o-animation: load_up 2s forwards;
}
#media screen and (max-device-width: 1603px) and (min-device-width: 1081px) {
* {
margin: 0;
padding: 0;
}
header {
padding: 0;
margin: 0;
}
nav {
margin: 0;
padding: 0;
width: 100%;
}
nav ul {
margin: 0;
padding: 0;
z-index: 99999;
}
nav ul li {
margin 0;
}
}
#media screen and (max-device-width: 1080px) {
.logo-section {
float: none;
}
nav ul {
background: #ffffff;
max-height: 0px;
height: 0;
}
nav ul.show {
max-width: 100%;
max-height: 100%;
z-index: 9999;
height: 100%;
width: 100%;
}
nav ul li {
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 15px;
padding-left: 25%;
text-align: center;
}
nav a {
display: block;
}
.hb-button {
display: inline;
}
.image {
display: none;
}
.image2 {
display: block;
margin-top: -35%;
margin-left: -50%;
}
.logo-left {
transform: translateY(-65%);
padding-left: 15px;
width: 10%;
}
}
#keyframes load_up {
0% {
opacity: 0;
transform: translateY(11%);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#-webkit-keyframes load_up {
0% {
opacity: 0;
transform: translateY(11%);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#-moz-keyframes load_up {
0% {
opacity: 0;
transform: translateY(11%);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#-o-keyframes load_up {
0% {
opacity: 0;
transform: translateY(11%);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/responsive_navbar.js"></script>
<link rel="stylesheet" href="main.css">
<header>
<nav>
<div class="logo-section">
<button class="hb-button"><i class="fa fa-bars" aria-hidden="true"></i>
</button>
</div>
<div style="min-width: 1920px; margin: 0 auto;">
<a href="index.html"><img src="img/thermocase.png" class="logo-left">
</a>
</div>
<ul>
<li> ● Contact Us
</li>
<li> ● The Team
</li>
<li> ● Our Product
</li>
</ul>
</nav>
</header>
<div class="image-cont">
<img src="img/iphone.png" class="image" />
</div>
<div class="image-cont2">
<img src="img/iphone2.png" class="image2" />
</div>
Thanks for taking a look. Fyi, I'm new to this.
Two things you could start with.
You need to have your opening <body> tag immediately after your closing </head> tag, so you might want to consider using another div to wrap the main content on your page
<html>
<head> ... </head>
<body>
<header> ... </header>
<div class="main-content"> ... </div>
</body>
</html>
Secondly, at line 19 of your HTML you have
<div style="min-width: 1920px; margin: 0 auto;">
Hard coding the width of an element like this is going to give you a hard time once the viewport is less that 1920px. You might want to remove this inline CSS, and replace it with a class. Then you can easily manipulate the width of the div using CSS media queries, e.g.
HTML
<div class="logo-wrap"> ... </div>
CSS
.logo-wrap{
...
}
#media (min-width: 1920px) {
min-width: 1920px;
margin: 0 auto;
}
Edit
Try changing your viewport meta tag to
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
Good luck!
I created a pop up menu here: https://jsfiddle.net/qpbmyhor/
Now I want the pop out menu links to be clickable. Right now when you hover your mouse to it, it will just dissapper and its not clickable. Also how can make the whole canvas/menus RESPONSIVE?
Here's my CSS:
ul.icon-menu {margin-top:29px;}
li.icon-box {width: 120px; height: 120px; list-style: none; left: -47px; position: relative; margin-bottom: 3px;}
li.icon-box.home {background: #e74c3c;}
li.icon-box.aboutme {background: #1dd0ad;}
li.icon-box.portfolio {background: #3498db;}
li.icon-box.blog {background: #f1c40f;}
li.icon-box.contact {background: #f39c12;}
.icon-box h2{Museo500-Regular; font-size: 20px; text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);}
.icon-box a {display: block;}
/*= TITLE BOXES
--------------------------------------------------------*/
.icon-box.home h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #E74C3C;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #a7382d;
}
.icon-box.home a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;
}
.icon-box.aboutme h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #1dd0ad;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #0d866e;
}
.icon-box.aboutme a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;
}
.icon-box.portfolio h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #3498db;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #2177b1;
}
.icon-box.portfolio a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;
}
.icon-box.blog h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #f1c40f;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #b8960e;
}
.icon-box.blog a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;
}
.icon-box.contact h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #f39c12;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #bc780d;
}
.icon-box.contact a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;
}
/*= MENU ICONS
--------------------------------------------------------*/
span.icon { display: inline-block; background: url('../img/icon-sprites.png')no-repeat; width: 32px; height: 32px; margin: 43px 40px;}
span.icon.home { background-position: 0px 0px;}
span.icon.aboutme { background-position: -36px 0px;}
span.icon.portfolio { background-position: -72px 0px;}
span.icon.blog { background-position: -109px 0px;}
span.icon.contact { background-position: -145px 0px;}
Any idea? if you could show me the JSFIDDLE SOLUTIONS too!
NOTE it must pop out at the bottom of the icon box.
you need to change z-index to 0 for icon-box class to achieve what you are looking for.
For instance,
.icon-box.aboutme h2, .icon-box.home h2, .icon-box.portfolio h2, .icon-box.blog h2, .icon-box.contact h2{
z-index:0;
}
Live demo
If you want to achieve this keeping the object at the top, solution as below.
Code:
.icon-box a {
padding: 120px;
}
Live demo - 2
Hope this helps.
Use like this, you no need to write css for each menu.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<style type="text/css">
ul.icon-menu {margin-top:29px;}
li.icon-box {width: 120px; height: 120px; list-style: none; left: -47px; position: relative; margin-bottom: 3px;}
li.icon-box.home {background: #e74c3c;}
li.icon-box.aboutme {background: #1dd0ad;}
li.icon-box.portfolio {background: #3498db;}
li.icon-box.blog {background: #f1c40f;}
li.icon-box.contact {background: #f39c12;}
.icon-box h2{Museo500-Regular; font-size: 20px; text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);}
.icon-box a {display: block;}
/*= TITLE BOXES
--------------------------------------------------------*/
.icon-box h2 {
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #E74C3C;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #a7382d;
}
.icon-box a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;
}
/*= MENU ICONS
--------------------------------------------------------*/
span.icon { display: inline-block; background: url('../img/icon-sprites.png')no-repeat; width: 32px; height: 32px; margin: 43px 40px;}
span.icon.home { background-position: 0px 0px;}
span.icon.aboutme { background-position: -36px 0px;}
span.icon.portfolio { background-position: -72px 0px;}
span.icon.blog { background-position: -109px 0px;}
span.icon.contact { background-position: -145px 0px;}
</style>
</head>
<body>
<div class="container">
<ul class="icon-menu">
<li class="icon-box home">
<a href="#">
<span class="icon home"></span>
<h2>Home</h2>
</a>
</li>
<li class="icon-box aboutme">
<a href="#">
<span class="icon aboutme"></span>
<h2>About Me</h2>
</a>
</li>
<li class="icon-box portfolio">
<a href="#">
<span class="icon portfolio"></span>
<h2>Portfolio</h2>
</a>
</li>
<li class="icon-box blog">
<a href="#">
<span class="icon blog"></span>
<h2>Blog</h2>
</a>
</li>
<li class="icon-box contact">
<a href="#">
<span class="icon contact"></span>
<h2>Contact</h2>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
Please have a look on the link.
I just noticed that you are controlling the popover element with every li a:hover and you should avoid it.
I tried to optimize your code and I think it's better to control hover on li element instead of a tag. (It might be possible that you have some different requirement that's why you are controlling it on a:hover)
https://jsfiddle.net/ashubuddy/qpbmyhor/4/
I'm attempting to make the Nav li elements align side by side horizontally and not vertically. The Nav li elements also show a list style (bullet points) which should not show. However, after using display: inline-block; & list-style-type: none; my attempt fail?
CSS:
/*global styles*/
body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
a{
appearance: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
background:transparent;
color: #000000;
border:none;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
list-style: none;
text-decoration: none;
}
a:focus, a:hover {
color: #e6e8eb;
cursor:pointer;
transition: color 0.5s ease;
}
a:active {
color: #484747;
}
/*----/----global styles*/
/*navigation icon*/
#toggle-menu {
float:right;
display: block;
width: 15px;
height: 15px;
padding: 20px;
}
#toggle-menu div {
width: 15px;
height: 15px;
position: relative;
}
#toggle-menu span {
display: block;
width: 15px;
height: 3px;
background: #545454;
position: absolute;
-webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
}
#toggle-menu span.top {
top: 0px;
}
#toggle-menu span.middle {
top: 6px;
}
#toggle-menu span.bottom {
top: 12px;
}
/*----/----navigation icon*/
/*navigation icon animation*/
#toggle-menu.menu-is-active span {
-webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
#toggle-menu.menu-is-active span.top, #toggle-menu.menu-is-active span.middle {
top: 6px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
#toggle-menu.menu-is-active span.middle {
opacity: 0;
}
#toggle-menu.menu-is-active span.bottom {
top: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*----/----navigation icon animation*/
/*Nav Bar*/
.header {
border-bottom: 0.5px solid rgba(0,0,0,.2);
background: #ffffff;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
.nav {
list-style-type: none;
position: fixed;
width: 100%;
text-align: center;
display: inline-block;
background-color: #ffffff;
left:0;
top: 55px;
border-bottom: 0.5px solid rgba(0,0,0,.2);
border-top: 0.5px solid rgba(0,0,0,.2);
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
}
.seemore {
display: inline-block;
padding-right: 20px;
}
#navpromo{
border-top: 0.5px solid rgba(0,0,0,.2);
padding-top: 40px;
padding-bottom: 40px;
}
#instagram{
display: inline-block;
appearance: none;
width:120px;
height:50px;
font-size:1.05em;
background: transparent;
color: #464c4c;
border:none;
text-align: center;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
outline:none;
border:none;
box-shadow: rgba(30, 22, 54, 0.4) 0 0px 0px 2px inset;
}
#instagram:hover {
color: #e6e8eb;
cursor:pointer;
transition: color 0.5s ease;
}
.nav > li:hover {
left: 0;
padding-top: 0.6em;
padding-bottom: 1em;
cursor:pointer;
list-style-type: none;
}
/*----/----Nav Bar*/
/*in*/
.in {
float:left;
display: inline-block;
width: 25px;
height: 25px;
padding: 15px;
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
border-top: 0.5px solid rgba(0,0,0,.2);
}
/*----/----in*/
/*logo*/
.logo {
position: absolute;
left: 50%;
display: inline-block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
}
/*----/----logo*/
/*Panels*/
.panel {
width: 100%;
color: #adadad;
height: 15em;
padding: 7em;
box-sizing: border-box;
background: #ffffff;
border-top: 0.5px solid rgba(0,0,0,.2);
text-align: center;
}
#panel1 {
background: #b8b8b8;
height: 30em;
}
.links{
color: #adadad;
}
/*----/----Panels*/
/*promo video scroll*/
#hero, section {
padding: 150px;
}
#scroll {
color: white;
font-size: 26px;
line-height: 26px;
cursor: pointer;
position: absolute;
left:50%;
-webkit-transition: -webkit-transform 0.6s ease;
-moz-transition: -moz-transform 0.6s ease;
transition: transform 0.6s ease;
}
#scroll.clicked {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
#scroll.rotate {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(3180deg);
}
#scroll span {
position: relative;
bottom: -10px;
}
.arrow-bounce {
-webkit-animation: arrow 1s infinite;
-moz-animation: arrow 1s infinite;
-o-animation: arrow 1s infinite;
animation: arrow 1s infinite;
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
#-webkit-keyframes arrow {
0% {
bottom: -13px;
}
50% {
bottom: -8px;
}
100% {
bottom: -13px;
}
}
#-moz-keyframes arrow {
0% {
bottom: -13px;
}
50% {
bottom: -8px;
}
100% {
bottom: -13px;
}
}
#keyframes arrow {
0% {
bottom: -13px;
}
50% {
bottom: -8px;
}
100% {
bottom: -13px;
}
}
/*----/----promo video scroll*/
/*contact panel*/
* {
font-family: "helvetica";
font-weight: normal;
font-size: 1em;
}
#wrapper {
width: 100%;
padding: 30px 20px;
text-align: center;
box-sizing: border-box;
color: #adadad;
background: #ededed;
font-size:.8em;
letter-spacing:0.05em;
border-top: 0.5px solid rgba(0,0,0,.2);
}
[value*='Contact'], .module fieldset [type="submit"] [id="changetext"] {
appearance: none;
width:120px;
height:50px;
font-size:1.05em;
background: transparent;
color: #e6e8eb;
border:none;
text-align: center;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
outline:none;
border:none;
box-shadow: rgba(30, 22, 54, 0.4) 0 0px 0px 2px inset;
}
[value*='Contact'], .module fieldset [type="submit"] [id="changetext"]:hover {
color: #464c4c;
cursor:pointer;
transition: color 0.5s ease;
}
.module {
width: 100%;
margin: 1rem auto;
padding: 1rem;
}
.module fieldset {
overflow: hidden;
border: none;
}
.module fieldset [type="text"] {
display: block;
margin: 0 auto;
width: 80%;
border: 0;
border-bottom: 1px solid rgba(0,0,0,.2);
line-height: 20px;
margin-bottom: 10px;
font-size: 1em;
background: transparent;
color: rgba(0,0,0,.4);
width: 50%;
padding: 0.5rem;
}
.single {
height: 25px;
}
.module fieldset textarea {
display: block;
width: 100%;
padding: 1rem;
height: 125px;
}
/*----/----contact form*/
/*social panel*/
.followcontainer {
text-align: center;
background: #ededed;
}
.follow {
left: 50%;
display: inline-block;
width: 175px;
text-align: center;
padding-top: 2em;
padding-bottom: 4em;
color: #adadad;
background: #ededed;
font-size:.8em;
letter-spacing:0.05em;
}
.followcopywright {
left: 50%;
display: inline-block;
text-align: center;
padding-top: 2em;
padding-bottom: 4em;
color: #adadad;
background: #ededed;
font-size:.8em;
letter-spacing:0.05em;
}
/*social icons*/
.social-buttons {
height: 45px;
font-size: 0;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
background: #ededed;
}
.social-button {
display: inline-block;
background-color: #ededed;
width: 45px;
height: 45px;
line-height: 45px;
margin: 0 10px;
text-align: center;
position: relative;
overflow: hidden;
opacity: .99;
border-radius: 50%;
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
-webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button:before {
content: '';
background-color: #000;
width: 120%;
height: 120%;
position: absolute;
top: 90%;
left: -110%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button .fa {
font-size: 38px;
vertical-align: middle;
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
-webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button.facebook:before {
background-color: #3B5998;
}
.social-button.facebook .fa {
color: #3B5998;
}
.social-button.twitter:before {
background-color: #3CF;
}
.social-button.twitter .fa {
color: #3CF;
}
.social-button.google:before {
background-color: #DC4A38;
}
.social-button.google .fa {
color: #DC4A38;
}
.social-button.dribbble:before {
background-color: #F26798;
}
.social-button.dribbble .fa {
color: #F26798;
}
.social-button.skype:before {
background-color: #00AFF0;
}
.social-button.skype .fa {
color: #00AFF0;
}
.social-button:focus:before, .social-button:hover:before {
top: -10%;
left: -10%;
}
.social-button:focus .fa, .social-button:hover .fa {
color: #fff;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
/*----/----social panel*/
/*footer*/
footer {
float: left;
display: inline-block;
text-align: center;
background: 232,232,232,0;
border-top: 1px solid rgba(0,0,0,.2);
}
/*----/----footer*/
/****landscape****/
#media (min-width: 850px) {
}
/*----/----Landscape*/
HTML:
<div class="header">
<div class="navbar">
<a href="" class="in" style="display: inline-block;">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 155.2 144" style="enable-background:new 0 0 155.2 144;" xml:space="preserve">
<path style="fill:#545454;" d="M42.7,122.7H21.3V54h21.4V122.7z M32,44.6c-6.8,0-12.4-5.6-12.4-12.4c0-6.8,5.5-12.4,12.4-12.4
c6.8,0,12.4,5.5,12.4,12.4C44.4,39,38.9,44.6,32,44.6z M122.7,122.7h-21.3V89.3c0-8-0.1-18.2-11.1-18.2c-11.1,0-12.8,8.7-12.8,17.6
v34H56.1V54h20.5v9.4h0.3c2.8-5.4,9.8-11.1,20.2-11.1c21.6,0,25.6,14.2,25.6,32.7V122.7z"/>
<g>
<path style="fill:#FFFFFF;" d="M151.9,120c0.7-0.1,1-0.5,1-1.1c0-0.8-0.5-1.1-1.4-1.1H150v4h0.6V120h0.7l0,0l1.1,1.7h0.6L151.9,120
L151.9,120z M151.3,119.6h-0.7v-1.4h0.9c0.4,0,0.9,0.1,0.9,0.6C152.4,119.5,151.9,119.6,151.3,119.6z"/>
<path style="fill:#FFFFFF;" d="M151.3,116c-2.1,0-3.8,1.7-3.8,3.8c0,2.1,1.7,3.8,3.8,3.8c2.1,0,3.8-1.7,3.8-3.8
C155.2,117.6,153.5,116,151.3,116z M151.3,123.1c-1.8,0-3.3-1.4-3.3-3.3c0-1.9,1.4-3.3,3.3-3.3c1.8,0,3.3,1.4,3.3,3.3
C154.6,121.7,153.2,123.1,151.3,123.1z"/>
</g>
</svg>
</a>
Logo
<a id="toggle-menu">
<div>
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</a>
<div class="nav">
<div id="navigation">
<ul>
<li class="navlist">Home</li>
<li class="navlist">About</li>
<li class="navlist">Work</li>
<li class="navlist">Contact</li>
</ul>
</div>
<div id="navpromo">
<ul>
<li class="seemore">Want to see more? Check out my instagram!</li>
</li><input type='submit' id="instagram" value="instagram"> </li>
</ul>
</div>
</div>
</div>
</div>
<div class="maincontent">
<div class="panel" id="panel1">
<div id="hero">
</div>
<div id="scroll">
<span class="arrow-bounce">↓</span>
</div>
</div>
<div class="panel" id="panel2">
<div class="inner">
Work Title 1
</div>
</div>
<div class="panel" id="panel3">
<div class="inner">
Work Title 2
</div>
</div>
<div class="panel" id="panel4">
<div class="inner">
Work Title 3
</div>
</div>
<div class="panel" id="panel5">
<div class="inner">
Work Title 4
</div>
</div>
<div class="panel" id="panel6">
<div class="inner">
Work Title 5
</div>
</div>
<div class="panel" id="panel7">
<div class="inner">
Work Title 6
</div>
</div>
<div id='wrapper'>
<input type='submit' value='Contact' id="changetext">
<div class='module' id='measure'>
<fieldset>
<legend></legend>
<input class="single" type='text' placeholder='Name' />
<input class="single" type='text' placeholder='Email' />
<input class="single" type='text' placeholder='Phone' />
<textarea class="message" type='text' placeholder='Message' ></textarea>
<input type='submit' id="send">
</fieldset>
</div>
</div>
<div class="followcontainer">
<div class="follow"> <p>I'd love to hear from you.</p>Drop me a line at #email.com.Boost my ego with a Facebook like.And please stalk me on Instagram #instagram.</div>
</div>
<div class="social-buttons">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-google"></i>
<i class="fa fa-dribbble"></i>
<i class="fa fa-skype"></i>
</div>
<div class="followcontainer">
<div class="followcopywright">© Copywright 2015</div>
</div>
When displaying li items inline, you must set the CSS style to the li directly, not to the whole list.
Example:
.nav li{
display: inline-block;
}
I have created div called "footer" it appears always at the bottom when the page loads and goes up when scrolling down. Right now I am trying to position 2x text fields using col-6-lg(bootstrap), they should be under the "footer" and visible after scrolling.
body{
background-image: url("../img/bg.png");
background-size: cover;
background-color: #01383b;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
}
#content {
background: #D0E5FF;
padding: 20px;
color: #00214B;
font-family: sans-serif;
font-weight: bold;
font-size: 14px;
line-height: 1.8;
}
#footer {
opacity: 0.8;
filter: alpha(opacity=40);
background: rgb(14, 122, 128);
line-height: 2;
text-align: center;
color: #042E64;
font-size: 30px;
font-family: sans-serif;
font-weight: bold;
text-shadow: 0 1px 0 #84BAFF;
box-shadow: 0 0 15px #00214B
}
#button1{
margin-top: 15px;
}
#button2{
margin-top: 15px;
margin-left: 95px;
}
.cd-container {
width: 90%;
max-width: 768px;
margin: 2em auto;
}
.cd-container::after {
/* clearfix */
content: '';
display: table;
clear: both;
}
.cd-top {
display: inline-block;
height: 40px;
width: 40px;
position: fixed;
bottom: 40px;
right: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background: #3cd8e1 url(../img/cd-top-arrow.svg) no-repeat center 50%;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
visibility: visible;
opacity: 1;
}
.cd-top.cd-fade-out {
opacity: .5;
}
.no-touch .cd-top:hover {
background-color: #3cd8e1;
opacity: 1;
}
#media only screen and (min-width: 768px) {
.cd-top {
right: 20px;
bottom: 20px;
}
}
#media only screen and (min-width: 1024px) {
.cd-top {
height: 60px;
width: 60px;
right: 30px;
bottom: 30px;
}
}
.content{
font-family: 'Open Sans';
color: #fff;
}
<div id="footer">
<div class="container">
<div class="col-lg-8 col-lg-offset-2 text-center">
<input type="image" src="img/true.png" alt="Submit" width="78" height="78" id="button1">
<input type="image" src="img/false.png" alt="Submit" width="78" height="78" id="button2">
</div>
<div class="col-lg-4 pull-right">
Top
</div>
</div>
</div>
<div class="container">
<div class="col-lg-6 pull-left text-center">
<h1>Да, това е!</h1>
</div>
<div class="col-lg-6 pull-left text-center">
<h1>Не, това е Lorem Ipsum</h1>
</div>
</div>
So here is the possible solution.
You can wrap both boxes (footer and under-footer container) into, let's call it: footer-wrap.
Then, set .footer-wrap {position: absolute;bottom: 0;width: 100%;}
And remove positioning classes for #footer from your styles.
/* #footer {
position: absolute;
bottom: 0;
width: 100%;
}*/
Set:
.footer-wrap {
position: absolute;
bottom: 0;
width: 100%;
}
Here is a demo: https://jsfiddle.net/xvwqt9a0/
Also here is a demo with your style and your html: https://jsfiddle.net/xvwqt9a0/1/