the navigation works fine until a specific width (about 1100px). If the width gets smaller the links are not clickable anymore. And I don't know why. The only thing I found out, is that, when I add some text (for example in line 51 "mediaquery..."), than the navigation works, but the backgroundcolor of it become white instead of original dark grey.
Do you know what I am doing wrong?
Here is the code:
<html lang="de">
<head>
<meta charset="utf -8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
<!--The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!--[if lt IE 8]>
<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>Arbeitsgruppe Wolken und globales Klima - Universität Leipzig (Fakultät für Physik und Geowissenschaften)</title>
<style>
*{
font-family: helvetica,arial,sans-serif;
}
#media (max-width: 1300px) and (min-width: 0px) {
#luecke_nav1 {
display: none;
}
}
#media (max-width: 1029px) {
.heading #seitentitel h1 {
font-size: 140%;
}
}
#media (min-width: 1029px) {
.menu {
font-size: 1.2em;
}
}
mediaqueryzerhautklassedanach
.menu {
padding: 0.5em;
background: #414141;
min-height: 3em;
line-height: 1em;
position: fixed;
top: 0;
left: 0;
z-index: -6;
}
.menu > ul {
transition: max-height 0.25s linear;
}
.menu ul {
margin: 0;
padding: 0;
text-align: center;
}
.menu li {
transition: visibility .25s linear;
display: inline-block;
padding: .45em 1.1em;
margin: 0 .3em;
position: relative;
}
#media (min-width: 841px) {
.menu li ul {
display: none;
position: absolute;
top: 100%;
margin-top: 1px;
left: -1px;
right: -1px;
}
.menu li:hover ul {
display: block;
}
.menu li li {
margin: -1px 0 0 0;
box-sizing: border-box;
width: 100%;
}
#logo {
display: none;
}
}
#media (max-width: 841px) {
#nav_kasten {
display: none;
}
.hvr-bounce-in{
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active {
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}
#luecke_nav{
display: none;
}
.menu > ul {
max-height: 0;
overflow: hidden;
margin: 0 3.5em 0 1em;
}
.menu li {
visibility: hidden;
display: block;
padding: 0.5em 0.6em;
border: none;
}
.menu li ul {
margin-top: 0.5em;
border-left: 1px solid #000;
}
.menu .navbar-handle {
display: block;
}
#navbar-checkbox:checked + .menu ul {
max-height: 300px;
}
#navbar-checkbox:checked + .menu li {
visibility: visible;
}
#navbar-checkbox:checked + .menu .navbar-handle,
#navbar-checkbox:checked + .menu .navbar-handle:after,
#navbar-checkbox:checked + .menu .navbar-handle:before {
border-color: #2098d1;
}
}
.navbar-checkbox {
display: none;
}
.navbar-handle {
display: none;
cursor: pointer;
position: relative;
font-size: 45px;
padding: .5em 0;
height: 0;
width: 1.66666667em;
border-top: 0.13333333em solid;
color: #2098d1;
}
.navbar-handle:before,
.navbar-handle:after {
position: absolute;
left: 0;
right: 0;
content: ' ';
border-top: 0.13333333em solid;
}
.navbar-handle:before {
top: 0.37777778em;
}
.navbar-handle:after {
top: 0.88888889em;
}
.menu {
top: 0;
left: 0;
right: 0;
}
.menu .navbar-handle {
position: fixed;
font-size: 1.2em;
top: 0.7em;
right: 12px;
z-index: 10;
}
/* Overline From Center */
.hvr-overline-from-center {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.hvr-overline-from-center:before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
background: #2098d1;
height: 7px;
top: -20%;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-overline-from-center:hover:before, .hvr-overline-from-center:focus:before, .hvr-overline-from-center:active:before {
left: 0;
right: 0;
}
a:link, a:visited, a:active {
text-decoration: none;
color: #2098d1;
}
a:hover {
text-decoration: none;
color: #2098d1;
}
#lim_logo {
width: 50%;
margin-top: 8%;
text-align: center;
z-index: 99;
}
#nav_kasten {
width: 14.7%;
height: 40%;
z-index: 99;
position: absolute;
top: 0;
margin-left: 42%;
}
#base {
position: relative;
display: inline-block;
width: 100%;
text-align: center;
color: white;
background: gray;
text-decoration: none;
padding-bottom:15%;
background-clip:content-box;
overflow:hidden;
}
#base:after {
content: "";
position: absolute;
top:83%;
left: 0;
background-color:inherit;
padding-bottom:50%; width:57.7%;
z-index: -1;
-webkit-transform-origin:0 0;
-ms-transform-origin:0 0;
transform-origin:0 0;
-webkit-transform: rotate(-30deg) skewX(30deg);
-ms-transform: rotate(-30deg) skewX(30deg);
transform: rotate(-30deg) skewX(30deg);
}
.hvr-bounce-in {
}
.hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active {
}
#logo{
width: 15%;
top: 2%;
left: 1%;
z-index: 4;
position: fixed;
}
.heading {
background: url(https://pixabay.com/static/uploads/photo/2012/10/26/01/38/cold-front-63037_960_720.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
z-index:-7;
padding: 18%;
}
#seitentitel {
background-color:rgba(255,255,255,0.7);
text-align: center;
padding: 2%;
margin: 0.5%;
}
.linie {
border :none;
border-top: 1px solid #0090E0;
background-color:#FFFFFF;
height: 1px;
margin: 0px 80px 0px 80px;
}
</style>
</head>
<body>
<header>
<div id="nav_kasten">
<img id="lim_logo" src="http://www.uni-leipzig.de/~strahlen/web/images/LOGOLIM_trans_white.gif">
</div>
<div id="logo">
<img id="lim_logo" src="http://www.uni-leipzig.de/~strahlen/web/images/LOGOLIM_trans_white.gif">
</div>
<input type="checkbox" id="navbar-checkbox" class="navbar-checkbox">
<nav class="menu">
<ul>
<li>Home</li>
<li>Team</li>
<li>Veröffentlichungen</li>
<li id="luecke_nav"><div id="luecke_nav1"> </div>
<div id="luecke_nav2"> </div></li>
<li>Projekte</li>
<li>Abschlussarbeiten</li>
<li>Links</li>
</ul>
<label for="navbar-checkbox" class="navbar-handle hvr-bounce-in">
</nav>
</header>
<div class="col-md-12 heading">
<div id="seitentitel">
<hr class="linie">
<h1> Arbeitsgruppe <br> Wolken und globales Klima</h1>
<hr class="linie">
</div>
</div>
<div class="col-md-12 text2">
<h2 style="text-align: center;"></h2>
<br>
<div class="col-md-6">
</div>
<div class="col-md-12">
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
</script>
</body>
So all adding that text does is essentially stop the browser from rendering the rest of the css that follows. What you need to do is;
1) Remove that text you've added in the css.
2) Remove the z-index on both the .menu and .heading. This is the problem. You've applied a lower z-index to the .heading but because it exists in the html at a higher stacking order than the .menu, it isn't working as you've intended it. So .heading is hiding your .menu
That should fix your problem.
Also i noticed:
a) You used a duplicate id on your logo image. #lim_logo use a class instead and then undate your css accordingly.
b) Just before your closing </nav> you are missing a closing </label> tag.
c) Update your media query expressions. Max-width should (in most cases) stop below the breakpoint. for example you might have a breakpoint at 1300px, so the max-width for targeting below that breakpoint would be 1299px. and then the min-width for targeting from that breakpoint and up would be 1300px. And there's no point including the min-width:0px as that would be implied.
Related
I'm trying to make my own website but I'm having a LOT of glitches with responsive on iphone
Look these screens:
I have and intro of my web and a menu
This works perfectly in all Windows browsers and also in Android. Which does not happen on Safari or all browsers from iphone:
The text does not appear, and the menu does not even open completely
my css:
//Navbar:
.at-front-no-feature.menu-default .navbar{
position: fixed;
}
.menu-default .navbar{
position: static;
z-index: 9;
left: 0;
right: 0;
}
CSS when i click on button:
.menu-default #navbar .navbar-collapse {
height: auto;
min-height: 100%;
position: fixed;
max-height: 70vh;
right: 0;
left: 0;
z-index: 999;
}
CSS Of links:
float: none;
list-style: none;
margin: 0;
padding-left: 0;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
text-align: center;
}
CSS of my text center (Hi my name is peter)
.home-content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width:100%;
text-align:center;
display:flex;
flex-wrap:wrap;
justify-content:center;
}
.home-content h1{
display:block;
width:100%;
color: #202020;
text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.6);
}
.home-content a{
width:200px;
height: 50px;
border:1px solid black;
background:#666!important;
margin-left:40px;
line-height:50px;
text-decoration:none!important;
color:#f2f2f2!important;
border-radius:10px;
transform:300ms all;
}
How can i fix this? I have tried with display: inline-block; and vertical-align:middle; and it does show me the text on iphone but it won't let me resize the buttons ... or apply width or height.
Edit: I have been doing tests and it seems that the image dulls the menu and therefore is not visible. Despite using fixed or absolute position it is not seen. As much as I use the z-index it doesn't work ... How can I fix it?
See this:
$(document).ready(function () {
$('.menu-btn').click(function(event) {
$('.navbar-demo').toggleClass('open-nav');
});
});
body {
margin: 0;
font-family: Roboto;
}
.hero-image .about-me {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
right: 0;
transform: translate(-50%, -50%);
text-align: center;
z-index: 99;
}
.hero-image .about-me label {
font-size: 26px;
color: #fff;
display: block;
}
.hero-image:after {
background-color: black;
content: '';
position: absolute;
width: 100%;
left: 0;
right: 0;
height: 100%;
opacity: 0.3;
}
.hero-image {
background-size: cover;
position: relative;
width: 100%;
height: 100vh;
background-color: lightgray;
background-image: url('https://images.unsplash.com/photo-1495465798138-718f86d1a4bc?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80');
display: table;
background-position: center;
}
.hero-image .about-me a {
display: inline-block;
text-decoration: none;
color: #fff;
padding: 10px 20px;
border: 1px solid white;
margin: 20px;
}
.navbar-demo {
display: table;
width: 100%;
position: fixed;
z-index: 99;
}
.navbar-demo .nav-bar ul li {
display: block;
}
.navbar-demo .nav-bar ul {
padding: 0;
display: table;
text-align: center;
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items: center;
margin: 0;
padding: 0;
}
.navbar-demo .nav-bar ul li a {
font-size: 18px;
display: inline-block;
text-align: center;
text-decoration: none;
color: #000;
padding: 18px;
text-transform: uppercase;
}
.nav-bar {
text-align: center;
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items: center;
position: relative;
}
.navbar-demo button.menu-btn {
display:none;
}
#media only screen and (max-width: 767px){
.navbar-demo button.menu-btn {
position: absolute;
top: 0;
right: 0;
background-color: unset;
border: 0;
font-size: 26px;
display:block;
padding: 23px;
color: #fff;
outline: none;
}
.navbar-demo{
height:100%;
z-index: 999;
}
.navbar-demo .nav-bar {
left: -950px;
background-color: #000000d9;
transition: 1s;
height: 100%;
}
.navbar-demo.open-nav .nav-bar{
left: 0;
width: 100%;
transition: left 0.5s;
height: 100%;
}
.navbar-demo .nav-bar ul li a {
display: block;
color: #fff;
}
.navbar-demo.open-nav button.menu-btn i:before {
content: '\f00d ';
}
}
<!-- Meta View Port -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<header id="header" class="navbar-demo">
<div class="nav-bar">
<ul>
<li>
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
</li>
</ul>
</div>
<button type="" class="menu-btn"><i class="fa fa-bars" aria-hidden="true"></i></button>
</header>
<div class="hero-image">
<div class="about-me">
<div class="row">
<label>Hi My Name is John Doe</label>
Lorem ipsum
Lorem ipsum
</div>
</div>
</div>
My site design is very close to finish, but I'm stuck on getting this font to install and work on my site. Do .woff files only show on the web once it connects to a server or what? I'm completely confused? I don't know what I'm doing wrong, I'm following the guide they gave me verbatim.
In my code you can see how I added the code source in my html and tried to add it to my nav.logo file.
<head>
<title>DADD | Stream Music, Connect, & Merch | DADD </title>
<style type="text/css">
#import url("https://fast.fonts.net/lt/1.css?apiType=css&c=8fd2ccbb-9bc3-4d04-babb-
ab917cc454a1&fontids=738462");
#font-face{
font-family:"Microgramma W02 Bold Ex";
src:url("Fonts/738462/c7e724ac-a335-42f3-b210-c0e573c18504.woff2")
format("woff2"),
url("Fonts/738462/73ccd7f9-454a-47d7-a355-edcb8c9cd4cc.woff") format("woff");
}
#font-face{
font-family:"MicrogrammaExtDBol W05 Regular";
src:url("Fonts/5121482/ea58eeb8-638f-456c-8376-d46061bcb9ba.woff2")
format("woff2"),
url("Fonts/5121482/dbcf51ac-03ab-42bb-a698-bafb9867305c.woff") format("woff");
}
</style>
<script type="text/javascript">
var MTUserId='';
var MTFontIds = new Array();
MTFontIds.push(""); // Microgramma™ W02 Extended Bold
(function() {
var mtTracking = document.createElement('script');
mtTracking.type='text/javascript';
mtTracking.async='true';
mtTracking.src='mtiFontTrackingCode.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(mtTracking);
})();
</script>
</head>
Here's an example of how I'm applying the font in css
/* IMPORTS */
/*DADD HOME*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
transition: all 0.4s;
}
body {
background-color: white;
background-position: center bottom;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
min-height: 100vh;
}
.li {
font-family: 'Michroma', sans-serif;
}
.container {
margin-left: 0%;
margin-right: 1%;
}
/* Navbar section */
.nav div.main_list ul li{
height: 65px;
margin: auto 2rem; /* That will define a equal space between the <li> elements */
}
.nav {
width: 100%;
height: 65px;
position: fixed;
line-height: 65px;
background-color: rgba(0, 0, 0, 0.8);
}
div.logo {
width: 120px;
height: 65px;
position: absolute;
text-align: right;
font-family:"Microgramma W02 Bold Ex";
src:url("Fonts/738462/c7e724ac-a335-42f3-b210-c0e573c18504.woff2") format("woff2"),
url("Fonts/738462/73ccd7f9-454a-47d7-a355-edcb8c9cd4cc.woff") format("woff");
}
div.logo a {
text-decoration: none;
color: #fff;
font-size: 1.8em;
color: white;
}
.nav div.logo a:hover {
color: #c0c0c0;
}
div.main_list {
width: 600px;
height: 65px;
float: right;
font-size: 14px;
font-family: Michroma;
src: url(Michroma.ttf), url(san-serif.ttf);
text-transform: uppercase;
}
.nav div.main_list ul {
width: 100%;
height: 65px;
display: flex;
list-style: none;
justify-content: space-around;
}
.nav div.main_list ul li {
height: 65px;
}
.nav div.main_list ul li a {
text-decoration: none;
color: #fff;
line-height: 65px;
text-transform: uppercase;
}
.nav div.main_list ul li a:hover {
color: #c0c0c0;
}
.nav div.media_button {
width: 40px;
height: 40px;
background-color: transparent;
position: absolute;
right: 15px;
top: 12px;
display: none;
}
.nav div.media_button button.main_media_button {
width: 100%;
height: 100%;
background-color: transparent;
outline: 0;
border: none;
cursor: pointer;
}
.nav div.media_button button.main_media_button span {
width: 98%;
height: 1px;
display: block;
background-color: #fff;
margin-top: 9px;
margin-bottom: 10px;
}
.nav div.media_button button.main_media_button:hover span:nth-of-type(1) {
transform: rotateY(180deg);
transition: all 0.5s;
background-color: #c0c0c0;
}
.nav div.media_button button.main_media_button:hover span:nth-of-type(2) {
transform: rotateY(180deg);
transition: all 0.4s;
background-color: #c0c0c0;
}
.nav div.media_button button.main_media_button:hover span:nth-of-type(3) {
transform: rotateY(180deg);
transition: all 0.3s;
background-color: #c0c0c0;
}
.nav div.media_button button.active span:nth-of-type(1) {
transform: rotate3d(0, 0, 1, 45deg);
position: absolute;
margin: 0;
}
.nav div.media_button button.active span:nth-of-type(2) {
display: none;
}
.nav div.media_button button.active span:nth-of-type(3) {
transform: rotate3d(0, 0, 1, -45deg);
position: absolute;
margin: 0;
}
.nav div.media_button button.active:hover span:nth-of-type(1) {
transform: rotate3d(0, 0, 1, 20deg);
}
.nav div.media_button button.active:hover span:nth-of-type(3) {
transform: rotate3d(0, 0, 1, -20deg);
}
/* Home section */
.home {
width: 100%;
height: 100vh;
background-color: #ddd;
}
/* Media query section */
#media screen and (min-width: 768px) and (max-width: 1024px) {
.container {
margin: 0;
}
}
#media screen and (max-width:768px) {
.container {
margin: 0;
}
.nav div.logo {
margin-left: 15px;
}
.nav div.main_list {
width: 100%;
margin-top: 65px;
height: 0px;
overflow: hidden;
}
.nav div.show_list {
height: 200px;
}
.nav div.main_list ul {
flex-direction: column;
width: 100%;
height: 200px;
top: 80px;
right: 0;
left: 0;
}
.nav div.main_list ul li {
width: 100%;
height: 40px;
background-color: rgba(0, 0, 0, 0.8);
}
.nav div.main_list ul li a {
text-align: center;
line-height: 40px;
width: 100%;
height: 40px;
display: table;
}
.nav div.media_button {
display: block;
}
}
.daddcenter {
margin: 0;
font-size: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
/* Footer */
footer {
position: absolute;
text-align: center;
bottom: 0;
width: 100%;
height: 2.5rem;
font-size: 10px;
}
/*DADD HOME*/
/*DADD MEDIA*/
.Socail_MediaLinks{
margin: 0;
font-size: 50px;
position: absolute;
list-style-type: none;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)}
/*
This CSS resource incorporates links to font software which is the valuable copyrighted
property of Monotype and/or its suppliers. You may not attempt to copy, install, redistribute,
convert, modify or reverse engineer this font software. Please contact Monotype with any questions
regarding Web Fonts: https://www.linotype.com
*/
<!DOCTYPE html>
<html>
<head>
<title>DADD | Stream Music, Connect, & Merch | DADD </title>
<style type="text/css">
#import url("https://fast.fonts.net/lt/1.css?apiType=css&c=8fd2ccbb-9bc3-4d04-babb-ab917cc454a1&fontids=738462");
#font-face{
font-family:"Microgramma W02 Bold Ex";
src:url("Fonts/738462/c7e724ac-a335-42f3-b210-c0e573c18504.woff2") format("woff2"),
url("Fonts/738462/73ccd7f9-454a-47d7-a355-edcb8c9cd4cc.woff") format("woff");
}
#font-face{
font-family:"MicrogrammaExtDBol W05 Regular";
src:url("Fonts/5121482/ea58eeb8-638f-456c-8376-d46061bcb9ba.woff2") format("woff2"),
url("Fonts/5121482/dbcf51ac-03ab-42bb-a698-bafb9867305c.woff") format("woff");
}
</style>
<script type="text/javascript">
var MTUserId='';
var MTFontIds = new Array();
MTFontIds.push("738462"); // Microgramma™ W02 Extended Bold
(function() {
var mtTracking = document.createElement('script');
mtTracking.type='text/javascript';
mtTracking.async='true';
mtTracking.src='mtiFontTrackingCode.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(mtTracking);
})();
</script>
<link rel="icon" href="LOGODADD.png" type="image/png">
<link rel="stylesheet" href="dadd1.css">
<link href="https://fonts.googleapis.com/css2?family=Michroma&display=swap" rel="stylesheet">
<meta charset="UTF-8">
</head>
<body>
<nav class="nav">
<div class="container">
<div class="logo" id="navlogo">
DADD
</div>
<div class="main_list" id="mainListDiv">
<ul>
<li>MUSIC</li>
<li>MEDIA</li>
<li>TOUR</li>
<li>SHOP</li>
</ul>
</div>
<div class="media_button">
<button class="main_media_button" id="mediaButton">
<span></span>
<span></span>
<span></span>
</button>
</div>
</div>
</nav>
<footer>
<p>D.R.E.A.M. LLC</p>
</footer>
</div>
<!--image-->
</body>
</html>
You need to download the 'Fonts' folder from linotype. Check here
..and remove the 'src' attribute from your div.logo
I have a problem that my transition does not get applied on an absolute positon child div.
Here is my codepen:
https://codepen.io/Data-Mastery/pen/oNvRdGv
On line 213 (&:hover .image) in the SASS file I want to scale the image and also set a filter, which works fine, but the transition-duration does not get applied.
If I just apply the hover statement on the parent element and not the image, the transition works fine. What is wrong here, can anyone help me?
Just add a transition to the .image class (or to the hover function, whatever you want to achieve)
&:hover .image {
transform: scale(1.1);
filter: grayscale(50%);
transition: your parameter;
}
Add transition property to the
& .image {
position: absolute;
top: 0;
left: 0;
width: 100%;
margin-bottom: 1.5rem;
transition:0.5s;
}
This will work for you
Why man , it works see this:-
#import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");
#keyframes moveInLeft {
0% {
transform: translateX(-200px);
opacity: 0;
}
80% {
transform: translateX(10px);
opacity: 0.8;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
#keyframes moveInRight {
0% {
transform: translateX(200px);
opacity: 0;
}
80% {
transform: translateX(-10px);
opacity: 0.8;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
#keyframes moveInBottom {
0% {
transform: translateY(100px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
.leftanimation {
animation: moveInLeft 1.2s forwards;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Open Sans", sans-serif;
line-height: 1.4rem;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
p {
margin: 0.75rem;
}
.l-heading-light {
font-size: 3rem;
color: white;
padding-top: 3rem;
padding-bottom: 1rem;
}
.l-heading-dark {
font-size: 3rem;
color: #c2453b;
padding-top: 3rem;
padding-bottom: 1rem;
}
.primary-btn {
display: inline-block;
background: #c2453b;
color: #fff;
padding: 0.5rem 2rem;
font-size: 1.25rem;
border-radius: 20px;
transition: all 0.3s ease-in;
}
.primary-btn:hover {
background: #fff;
color: #c2453b;
transform: translateY(-3px);
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5);
}
.primary-btn:active {
transform: translateY(-1px);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}
.navbar {
display: flex;
z-index: 1;
justify-content: space-between;
align-items: center;
width: 100%;
position: fixed;
top: 0;
padding: 1rem;
background: #333;
color: #fff;
}
.navbar__nav {
display: flex;
justify-content: space-between;
}
.navbar__nav li a {
color: #fff;
padding: 0.75rem;
margin: 0 0.25rem;
}
.navbar__nav li a:hover {
background: #fff;
border-radius: 5px;
color: #333;
}
.showcase {
background-image: linear-gradient(to bottom right, rgba(194, 69, 59, 0.4), rgba(178, 86, 65, 0.4)), url("https://thumbs.dreamstime.com/z/hiking-forest-man-morning-mist-travel-concept-45457025.jpg");
background-size: cover;
background-position: top;
height: 100vh;
position: relative;
}
.showcase__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
text-transform: uppercase;
}
.showcase__content p {
color: white;
font-size: 1.2rem;
margin-bottom: 1rem;
animation: moveInRight 1.2s forwards;
}
.showcase__content a {
animation: moveInBottom 1.2s 0.8s linear backwards;
}
#tours {
text-align: center;
background: #f7f7f7;
}
#tours .container {
width: 100%;
height: 100%;
margin: 0 auto;
display: block;
max-width: 1200px;
justify-content: space-between;
display: flex;
color: #fff;
}
#tours .container .card {
position: relative;
height: 35rem;
width: 20rem;
margin: 2rem 1rem;
padding: 0;
background: #b25641;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4);
transition: all 0.4s ease-in-out;
overflow: hidden;
}
#tours .container .card:hover .image {
transform: scale(1.1);
filter: grayscale(100%);
transition-duration: 0.5s;
}
#tours .container .card .image {
position: absolute;
top: 0;
left: 0;
width: 100%;
margin-bottom: 1.5rem;
}
#tours .container .card__content {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
margin-top: 15rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="css/style.css" />
<title>Malamar Hotels</title>
</head>
<body>
<nav class="navbar">
<h1 class="navbar__logo">
Malamar
</h1>
<ul class="navbar__nav">
<li>Home</li>
<li>Tours</li>
<li>Contact</li>
</ul>
</nav>
<header class="showcase">
<div class="showcase__content">
<h1 class="l-heading-light leftanimation">
Hiking this fall
</h1>
<p>
Book the best hikings tours for this fall in beautiful areas across
europe
</p>
See our tours
</div>
</header>
<section id="tours">
<h1 class="l-heading-dark">Our best offers</h1>
<div class="container">
<div class="card">
<img src="https://thumbs.dreamstime.com/z/hiking-forest-man-morning-mist-travel-concept-45457025.jpg" alt="Hi" class="image" />
<div class="card__content">
<h1>Hiking</h1>
<p>2-day tour</p>
Book now!
</div>
</div>
<div class="card">
<img src="https://thumbs.dreamstime.com/z/hiking-forest-man-morning-mist-travel-concept-45457025.jpg" alt="Hi" class="image" />
<div class="card__content">
<h1>Rafting tour</h1>
<p>3-day tour</p>
Book now!
</div>
</div>
<div class="card">
<img src="https://thumbs.dreamstime.com/z/hiking-forest-man-morning-mist-travel-concept-45457025.jpg" alt="Hi" class="image" />
<div class="card__content">
<h1>Mountainbiking</h1>
<p>5-day tour</p>
Book now!
</div>
</div>
</div>
</section>
</body>
</html>
So I have five different coded pages. What I want to do is combine them all into one html page. I have my home page with a navigation bar that links to the other pages but whenever I try to insert my other pages, the multiple pages overlay one another or appear in a column underneath. What sort of code do I need so the clickable links pull up my other pages without it overlaying. Below is a section of my code that I want linked to another page.
}
.container {
position: relative;
width: 50%;
float: left;
}
.image1 {
display: inline-block;
width: 400px;
height: 290px;
margin-top: -10px;
margin-right: 400px;
background-position: 10px 280px;
}
.overlay {
position: absolute;
top: -10px;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 400px;
transition: .5s ease;
background-color: rgba(0, 0, 0, 0);
z-index: -3.0;
}
.container:hover .overlay {
background-color: rgba(0, 0, 0, .7);
height: 290px;
width: 400px;
}
.container:hover .text {
opacity: 1;
}
.text {
font-size: 50px;
position: relative;
width: 330px;
height: 240px;
overflow: scroll;
top: 15%;
left: 48%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
text-align: center;
margin-top: 100px;
display:block;
width:150px;
height: 70px;
border:2px solid #C5E3ED;
color:#ADD7C9;
text-align:center;
text-decoration:none;
}
a { text-decoration: none; color:#C5E3ED }
a:visited { text-decoration: none; color:#C5E3ED; }
a:hover { text-decoration: none; color:#C5E3ED; }
a:focus { text-decoration: none; color:#C5E3ED; }
a:hover, a:active { text-decoration: none; color:#C5E3ED }
<div class="container">
<img src="https://www.pets4homes.co.uk/images/articles/3779/large/how-to-care-for-a-dog-with-a-stomach-upset-58345cd2daf98.jpg" alt="dog" class="image1">
<div class="overlay">
<div class="text">
About
</div>
</div>
</div>
I have used this guide to create a collapsible frame for you.
https://www.w3schools.com/howto/howto_js_collapsible.asp
You can add your html code in div with class="content". Let me know if it is what you wanted.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
/* Style the button that is used to open and close the collapsible content */
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
background-color: #ccc;
}
/* Style the collapsible content. Note: hidden by default */
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<button class="collapsible">Open Collapsible</button>
<div class="content">
!--- YOUR HTML CODE HERE ---!
</div>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
</script>
</body>
</html>
I've got this logo that plays nicely with everyone except for safari, which is completely ignoring the CSS assigned to the logo. I've tried changing the vw to % but that is ignored, as well. I've tried various different permutations of display & positioning all to no avail - I've rebuilt this header section 3 times in as many days, trying to find the issue with little to show for it but a higher coffee bill. Can you all please take a minute to help me figure out where I'm going wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome </title>
<!-- Bootstrap -->
<link rel="stylesheet" href="http://waywarddesignco.com/css/bootstrap.min.css">
<link rel="stylesheet" href="http://waywarddesignco.com/css/style.css">
<link rel="icon" type="image/png" href="http://waywarddesignco.com/wp-content/uploads/2015/04/favicon.png">
<script src="http://waywarddesignco.com/js/jquery.min.js"></script>
<script src="http://waywarddesignco.com/js/bootstrap.min.js"></script>
</head>
<body class="bkg_img img-responsive" background="http://waywarddesignco.com/wp-content/uploads/2015/04/background.jpg">
<div id="container">
<div id="xsg" class="visible-xs">
</div>
<div class="logo hidden-xs">
<a href="http://waywarddesignco.com">
<img src="http://waywarddesignco.com/wp-content/uploads/2015/04/logo_final_png.png" class="hvr-pulse img-responsive">
</a>
</div>
Here's My CSS:
img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
body {
background-repeat: no-repeat;
background-size: 100% auto;
background-attachment: fixed;
}
.entry-content p {
text-align: justify;
}
.hom_lnk {
height: 50px;
position: fixed;
top: 0;
}
#media only screen and (min-width: 770px) {
.navbar-inverse {
border: 0;
background-color: rgba(0,0,0,0);
}
}
#media only screen and (min-width: 770px) {
.navbar-fixed-top {
position: relative;
margin-top: -7.25%;
}
}
#media only screen and (min-width: 1080px) {
.navbar-fixed-top {
position: relative;
margin-top: -7%;
padding-left: 5%;
}
}
#media only screen and (min-width: 1540px) {
.navbar-fixed-top {
position: relative;
margin-top: -7%;
padding-left: 5%;
}
}
#xsg {
height: 25px;
width: 100%;
}
.nav_bar {
max-height: 60px;
position: relative;
float: left;
width: 100%;
margin-top: -7%;
z-index: -2;
}
.logo {
display: block;
max-width: 40vw;
position: relative;
float: right;
top: 4%;
z-index: 15;
border-radius: 100%;
}
.hdr_img {
width: 100%;
height: auto;
z-index: 10;
position: absolute;
top: 0;
}
.bkg_img {
width: 100%;
height: 100%;
}
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
.dropdown-menu > li > a {
background-color: white;
border: 0;
color: #431E87;
font-family: 'Muli', sans-serif;
}
.dropdown-menu > li > a:hover {
color: #C83938;
font-family: 'Muli', sans-serif;
}
.navbar-nav > li > .dropdown-menu {
border: 1.5em solid white;
box-shadow: 10px 10px 5px #888888;
padding: 0;
border-radius: 25px 25px 5px 25px;
position: absolute;
top: 12vh;
}
#media only screen and (min-width: 770px) {
.nav > li > a:hover:after {
content: url("http://waywarddesignco.com/wp-content/uploads/2015/04/smallheart_100pix.png");
position: absolute;
right: -10%;
top: -20px;
}
}
.navbar-inverse .navbar-nav > li > a {
font-family: 'Muli', sans-serif;
font-size: 1.5em;
color: white;
}
#media only screen and (max-width: 1080px) {
.navbar-inverse .navbar-nav > li > a {
font-family: 'Muli', sans-serif;
font-size: 1.25em;
color: white;
}
}
.navbar-inverse .navbar-nav > li > a:hover {
color: #EDA93F;
font-size: 1.5em;
}
ul.xoxo {
list-style: none;
padding-left: 0;
margin: 2px auto;
}
#content {
float: left;
width: 75%;
padding-left: 35px;
padding-right: 35px;
}
#media only screen and (max-width: 770px) {
#content {
width: 100%;
padding-top: 25px;
}
}
#sidebar {
float: right;
width: 24%;
margin-right: 1%;
border-left: .5vw solid rgba(67, 31, 132,.5);
border-top: .5vw solid rgba(67, 31, 132,.5);
border-radius: 25px;
padding-top: 7px;
}
.smb {
width: 2.5vw;
height: 2.5vw;
margin-right: 2px;
}
#-webkit-keyframes hvr-pulse {
25% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
75% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
}
#keyframes hvr-pulse {
25% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
75% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
}
.hvr-pulse {
position: relative;
top: 4%;
float: right;
display: block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
}
.hvr-pulse:hover, .hvr-pulse:focus, .hvr-pulse:active {
-webkit-animation-name: hvr-pulse;
animation-name: hvr-pulse;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}