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
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>
I have the following code:
#import url('https://fonts.googleapis.com/css2?family=Raleway:wght#300;400;700;900&display=swap" rel="stylesheet');
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Raleway', sans-serif;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
.container {
width: 95%;
max-width: 70em;
margin: 0 auto;
}
/* typography
================== */
h1 {
font-weight: 300;
font-size: 1.7rem;
margin-top: 0;
}
p {
margin-top: 0;
line-height: 1.5;
}
p:last-of-type {
margin-bottom: 0;
}
.title {
font-size: 2.5em;
margin-top: 1em;
margin-bottom: 1.5em;
font-weight: 900;
}
.title span {
font-weight: 300;
display: block;
font-size: .9em;
}
#media(min-width:60rem) {
p {
font-size: 1.2rem;
line-height: 1.6;
}
.title {
font-size: 3.7em;
margin-bottom: 1em;
margin-top: 0;
font-weight: 900;
}
}
/* buttons */
.button {
display: inline-block;
font-size: 1.15em;
text-decoration: none;
text-transform: uppercase;
border-width: 2px;
border-style: solid;
padding: .5em 1.75em;
color: #00ff6c;
border-color: #00ff6c;
}
#media (min-width: 60rem) {
.button {
font-size: 1.5rem;
}
.button-small {
font-size: .7rem;
font-weight: 700;
}
.button-accent {
color: #00ff6c;
border-color: #00ff6c;
}
.button-accent:hover,
.button-accent:focus {
background: #00ff6c;
color: #232323;
}
}
/* header
================== */
header {
position: absolute;
margin-top: 1em;
left: 0;
right: 0;
margin: 1em;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin: 1em;
}
nav a {
font-weight: 900;
text-decoration: none;
padding: .5em;
text-transform: uppercase;
color: #FFF;
font-size: .8rem;
}
nav a: hover,
nav a: focus {
color: #DDD;
}
#media(min-width:60rem) {
.logo {
float: left;
}
nav {
float: right;
}
}
/* home-hero
================== */
.home-hero {
background-image: url(https://i.postimg.cc/XY54RwQY/hero-bg.jpg);
background-size: cover;
background-position: center;
padding: 10em 0;
color: #FFF;
}
#media (min-width: 60rem) {
.home-hero {
height: 100vh;
padding-top: 35vh;
}
}
/* hero-home
======================== */
.home-about-textbox {
background-color: #232323;
padding: 4em;
margin: 0 -2.5vw;
outline: 2px solid #00ff6c;
outline-offset: -2.5em;
color: #FFF;
position: relative;
}
.home-about-textbox h1 {
color: #00ff6c;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: .75em;
background: #232323;
padding: 0 .145em;
white-space: nowrap;
}
.container {
width: 95%;
max-width: 70em;
margin: 0 auto;
background-color: mediumvioletred;
color: magenta;
}
#media (min-width: 25rem) {
h1 {
font-size: 2 rem;
}
.home-about-textbox h1 {
top: .6em;
padding: 0 .325em;
}
}
#media (min-width: 60rem) {
h1 {
font-size: 2.5rem;
}
.home-about {
background-image: url();
background-repeat: no-repeat;
padding-bottom: 10em;
}
.home-about-textbox {
width: 50%;
padding: 7em;
outline-offset: -3.75em;
margin-left: -2.5%;
top: -5em;
text-align: left;
box-shadow: 0 0 4em 0 rgba(0, 0, 0, .3);
}
.home-about-textbox h1 {
top: .75em;
left: 6rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: .75em;
background: #232323;
padding: 0 .145em;
}
}
.container {
width: 95%;
max-width: 70em;
margin: 0 auto;
background-color: coral;
font-weight: 100;
color: blue;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Creative Inc.</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<header>
<img src="https://i.postimg.cc/NFtwcdYg/logo.png" alt="Creative inc. logo" class="logo">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="home-hero">
<div class="container">
<h1 class="title">Making things looks great
<span>for companies who make great stuff</span>
</h1>
See Our Work
</div>
</section>
<div class="container">
<section class="home-about">
<div class="home-about-textbox">
<h1>Who we are</h1>
<p>Sit by the fire drink water out of the faucet hide head under banket so no one can see cat is love, cat is life.Knock dish off table eating always hungry so favor packaging over toy.</p>
<p>
<srong>Rub face on owner.</srong>Peer out window, chatter at birds, lure then to mouth. Chase ball of string eat a plant, kill a hand, i am the best have secret plans.
</p>
</div>
</section>
</div>
</body>
</html>
There is a code snippet: https://codepen.io/danamaria5/pen/gOPZRPa .
Here the "container" class selector in css should select both sections "home-hero" & "home-about". As you can see in the snippet the colors apply just to the home-hero although the background of the home-about becomes coral in the pc media query. I can't figure out why is still black in the mobile format.
And the font-weight is applied just to the home-about. In home-hero, font weight property should be applied just to the bolder top part of the title as the lower one is selected with the .title span which is more specific than the .container. However, this is not the case because the "Making things looks great" text is still bold instead of font-weight: 100; from the container which is selected at the end of the style sheet so nothing else overrides it. Could someone, please explain?
I’m working on my portfolio website and I was wondering how do I make a block of text appeared when I scrolled down the website? So when someone scroll down, say example my About me section to appear on the left.
It depends on what kind of text effecton mouse scroll you are looking for. Here’s a nice little timeline I once used. You can change this to represent what you like:
HTML
<div class="stem-wrapper">
<div class="stem"></div>
<div class="stem-background"></div>
</div>
<header class="section header">
<div class="section-inner">
<div class="master-head">
<h1 class="page-title">Colored Stem</h1>
<p class="page-description">Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water.</p>
<p class="scroll-button" onClick="$('.post-wrapper .post:first-child .stem-overlay .icon').click();">Ready to go for a ride?</p>
</div>
</div> <!-- section-inner -->
</header> <!-- header -->
CSS
/*========== Global ==========*/
/*========== Basics ==========*/
html,
body {
height: 100%;
}
body {
background: #112C30;
margin: 0px;
padding: 0px;
font-family: sans-serif;
font-size: 15px;
line-height: 26px;
color: #B9CFD0;
font-family: 'Roboto Slab', serif;
overflow-x: hidden;
overflow-y: scroll;
}
a {
color: #B9CFD0;
text-decoration: none;
border-bottom: 1px solid #B9CFD0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Comfortaa', cursive;
}
/*========== Sections ==========*/
.header {
text-align: center;
position: relative;
z-index: 1;
background-image: linear-gradient(to bottom, #6fc7d4 0%, #39ACBD 100%);
}
.header .master-head {
padding: 7% 30px;
}
.header .page-title {
padding: 0 30px 0 30px;
font-size: 60px;
line-height: 1em;
letter-spacing: 10px;
color: #FFF;
}
.header .page-description {
margin: 30px auto;
max-width: 600px;
font-size: 18px;
line-height: 2em;
color: #FFF;
}
.header .scroll-button {
color: #FFF;
font-size: 20px;
padding: 15px 20px 15px 20px;
display: inline-block;
background: #3093A2;
cursor: pointer;
transition-duration: 0.4s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.header .scroll-button:hover {
background: #246f7b;
}
.header .scroll-button:active {
background: #194c53;
}
.main-content {
margin: 0px auto;
position: relative;
}
.main-content .section-inner,
.main-content .post-wrapper {
*zoom: 1;
}
.main-content .section-inner:before,
.main-content .post-wrapper:before,
.main-content .section-inner:after,
.main-content .post-wrapper:after {
content: "";
display: table;
}
.main-content .section-inner:after,
.main-content .post-wrapper:after {
clear: both;
}
.footer {
background: #112C30;
padding: 150px 0px 300px 0px;
position: relative;
z-index: 1;
}
.footer .good-bye {
text-align: center;
font-size: 18px;
line-height: 36px;
}
.footer .good-bye p {
display: block;
margin: 0px auto 30px auto;
max-width: 300px;
clear: both;
}
.section .section-inner {
margin: 0px auto;
width: 1024px;
}
#media only screen {
.section .section-inner {
width: auto;
max-width: 1024px;
}
}
/*========== Stem ==========*/
.stem-wrapper {
position: fixed;
top: 0px;
bottom: 0px;
left: 50%;
}
.stem-wrapper.color-yellow .stem-background {
background: #E9E566;
}
.stem-wrapper.color-green .stem-background {
background: #35C189;
}
.stem-wrapper.color-white .stem-background {
background: #FFF;
}
.stem-wrapper .stem,
.stem-wrapper .stem-background {
position: absolute;
top: 0px;
left: -30px;
width: 60px;
}
.stem-wrapper .stem {
background: #1e4f56;
height: 100%;
}
.stem-wrapper .stem-background {
background: #39ACBD;
height: 50%;
transition-duration: 0.5s;
}
.stem-padding,
.single-stem-icon {
width: 60px;
height: 60px;
margin: 0px auto;
background: transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/stem-mask.png) repeat-y top center;
}
.single-stem-icon.scroll-to-top {
cursor: pointer;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/scroll-to-top-icon.png);
}
/*========== Post wrapper ==========*/
.post-wrapper {
*zoom: 1;
}
.post-wrapper:before,
.post-wrapper:after {
content: "";
display: table;
}
.post-wrapper:after {
clear: both;
}
.post-wrapper .post {
position: relative;
width: 432px;
padding: 0px 0px 60px 0px;
clear: both;
opacity: 1;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.post-wrapper .post.hidden .post-content {
-webkit-transform: translateY(100px) rotateX(30deg);
transform: translateY(100px) rotateX(30deg);
opacity: 0;
}
.post-wrapper .post:hover .post-content,
.post-wrapper .post.active .post-content {
opacity: 1;
}
.post-wrapper .post:hover .post-content .meta,
.post-wrapper .post.active .post-content .meta {
opacity: 1;
-webkit-transform: none;
transform: none;
}
.post-wrapper .post:nth-child(even) {
float: right;
}
.post-wrapper .post:nth-child(odd) {
float: left;
}
.post-wrapper .post:nth-child(even) .stem-overlay {
left: -110px;
}
.post-wrapper .post:nth-child(odd) .stem-overlay {
right: -110px;
}
.post-wrapper .post.music-icon .stem-overlay .icon {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/music-icon.png);
}
.post-wrapper .post.bitbucket-icon .stem-overlay .icon {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/bitbucket-icon.png);
}
.post-wrapper .post.m-icon .stem-overlay .icon {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/m-icon.png);
}
.post-wrapper .post.twitter-icon .stem-overlay .icon {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/twitter-icon.png);
}
.post-wrapper .post .stem-overlay {
position: absolute;
top: 0px;
bottom: 0px;
width: 60px;
}
.post-wrapper .post .stem-overlay .icon {
background: transparent no-repeat center center;
height: 60px;
width: 60px;
cursor: pointer;
}
.post-wrapper .post .stem-overlay .stem-mask {
position: absolute;
top: 60px;
bottom: 0px;
left: 0px;
right: 0px;
background: transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/stem-mask.png) repeat-y top center;
}
.post-wrapper .post .post-content {
opacity: .3;
transition-duration: 0.4s;
-webkit-transform: none;
transform: none;
}
.post-wrapper .post .post-content .meta {
color: rgba(255, 255, 255, 0.3);
margin: 0px 0px 15px 0px;
letter-spacing: 1px;
opacity: 0;
transition-duration: 1s;
transition-delay: 0.2s;
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
.post-wrapper .post .post-content .post-title {
font-size: 32px;
line-height: 42px;
margin: 0px 0px 15px 0px;
}
/*========== Media queries ==========*/
#media only screen and (max-width: 1080px) {
.main-content,
.main-content .section-inner {
max-width: none;
}
.stem-wrapper {
left: 80px;
}
.stem-padding,
.single-stem-icon {
margin: 0px;
float: left;
margin-left: 50px;
}
.post-wrapper .post,
.post-wrapper .post:nth-child(even),
.post-wrapper .post:nth-child(odd) {
width: auto;
margin-left: 110px;
float: none;
}
.post-wrapper .post .stem-overlay,
.post-wrapper .post:nth-child(even) .stem-overlay,
.post-wrapper .post:nth-child(odd) .stem-overlay {
left: -60px;
right: auto;
}
.post-wrapper .post .post-content {
padding: 0px 50px;
}
}
#media only screen and (max-width: 700px) {
.header .page-title {
font-size: 40px;
}
.post-wrapper .post {
margin-left: 90px !important;
}
.post-wrapper .post .post-content {
padding: 0 25px;
}
.stem-wrapper {
left: 60px;
}
.stem-padding,
.single-stem-icon {
margin-left: 30px;
}
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
JavaScript
($) {
$(document).ready(function() {
setupFade();
setupClickToScroll();
setupPostAnimation();
setupScrollToTop();
enableScrollAbortion();
// Trigger window.scroll, this will initiate some of the scripts
$(window).scroll();
});
// Allow user to cancel scroll animation by manually scrolling
function enableScrollAbortion() {
var $viewport = $('html, body');
$viewport.on('scroll mousedown DOMMouseScroll mousewheel keyup', function(e) {
if ( e.which > 0 || e.type === 'mousedown' || e.type === 'mousewheel') {
$viewport.stop();
}
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.
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;
}