My navbar (or something) is extending too far and creating a horizontal scrollbar. I see people asking about this, but I cannot find the answer for my situation. The smaller I make the screen the bigger the space gets. Right now I'm just looking at IE.11.
Can someone please help? Thank you in advance.
Below is the code where I think the problem is. (html, page css and parallax css).
<body>
<div class="wrapper">
<header class="lighthouse">
<nav class="main">
<div class="menu-icon"> <i class="fa fa-bars fa-2x"></i> </div>
<div class="top-nav-logo"> <img src="images/mlc-logo/mlcwhite.png" width="97" height="59" alt="Mission Lighthouse Church Logo"/></div>
<ul>
<li>HOME</li>
<li>WHO JESUS IS</li>
<li>WHO WE ARE</li>
<li>MEDIA</li>
<li>CONNECT</li>
</ul>
</nav>
<div class="logo"><img src="images/mlc-logo/mlc-main-320.png" width="280" height="167" alt="Mission Lighthouse Church Logo" data-enllax-ratio="-.8" data-enllax-type="foreground"/> </div>
<div class="seagull"><img src="images/Parallax/seagull2.png" alt="Seagulls" width="276" height="136" class="seagull" data-enllax-ratio="-3" data-enllax-direction="horizontal" data-enllax-type="foreground"/></div>
<div class="welcome-home" data-enllax-ratio="-1.1" data-enllax-type="foreground">Welcome Home</div>
</header>
CSS:
html, html * {
padding: 0;
margin: 0;
}
body {
font-size: 62.5%;
}
.wrapper {
width: 100%;
background-color: #000000;
position: absolute;
}
.top-nav-logo {
display: block;
width: 100%;
margin: 10px 10px 0 20px;
position: fixed;
z-index: 100;
}
.menu-icon {
width: 50%;
box-sizing: border-box;
background-color: #000;
text-align: right;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
nav.main {
display: inline-block;
position: fixed;
top: 0;
right: 0;
left: 0;
max-width: 1341px;
margin: 0 auto;
overflow: hidden;
width: 100%;
text-align: left;
z-index: 80;
}
nav ul {
list-style: none;
text-align: center;
background-color: rgba(0,0,0,0.0);
overflow: hidden;
color: #fff;
padding: 0;
margin: 0;
transition: 1s;
z-index: 80;
}
nav.blue ul {
background-color: rgba(0,34,73,0.95);
}
nav ul li {
display: inline-block;
padding: 20px;
}
nav ul li a {
display: inline-block;
color: #ffffff;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 1.7em;
text-decoration: none;
}
nav ul li a:visited {
color: rgba(240,183,110,1.00);
}
nav a:hover {
color: #F0F694;
text-decoration: none;
font-weight: 700;
transition: 1.7s;
-webkit-transition: 1.7s; /*Safari*/
}
CSS for Parallax:
.lighthouse {
width: 100%;
height: 768px;
position: relative;
background-image: url(../images/Parallax/front-header-4.jpg), url(../images/Parallax/2nd-header-background.jpg);
background-size: auto 768px, cover;
background-position: top center;
background-attachment: fixed;
background-repeat: no-repeat;
will-change: transform;
overflow: hidden;
}
.logo {
height: 140px;
width: 88%;
position: relative;
top: 170px;
margin: 0 auto;
text-align: center;
opacity: 0.65;
z-index: 20;
}
.seagull {
height: 123px;
width: auto;
position: relative;
left: -190px;
opacity: 0.8;
z-index: 10;
}
.welcome-home {
font-family: 'Kaushan Script', cursive;
font-size: 9.0em;
color: #004391;
position: relative;
text-align: center;
width: 98%;
top: 255px;
}
nav.main {
display: inline-block;
position: fixed;
top: 0;
right: 0;
left: 0;
max-width: 100%;
margin: 0 auto;
overflow: hidden;
width: 100%;
text-align: left;
z-index: 80;
}
Replace this code in your style sheet
You entered max-width:1341px; that is the reason it was expanded so far
Related
I want to make a circular background as shown in the photo:
desktop version
mobile version
However, I don't know how to make a correct structure in HTML and CSS. I'm starting from mobile and from there I want to expand to bigger sizes. My problem is I don't know how to make the circle responsive and to make it looks like on the picture, especially on the mobile version. I'm not sure if I should use the ::after for the circle but in my example I have the position absolute on the div so I really can't.
header {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: -webkit-sticky;
position: sticky;
width: 100%;
padding: 1em 3em;
min-height: 8vh;
text-align: center;
top: 0;
z-index: 4;
background-color: white;
}
header img {
width: 8em;
}
header ul {
list-style: none;
}
header ul li {
display: inline-block;
padding: 1em 2em;
color: white;
position: relative;
overflow: hidden;
will-change: transform;
}
header ul li a {
text-decoration: none;
color: black;
font-weight: 700;
font-size: clamp(1.5rem, 5vw, 1.8rem);
}
header .burger {
display: none;
}
#media only screen and (max-width: 996px) {
header .burger {
display: block;
width: 4em;
cursor: pointer;
}
header .burger img {
width: 3em;
}
header ul {
display: none;
}
}
#media only screen and (max-width: 1022px) {
.overlay {
position: fixed;
z-index: 4;
width: 100%;
height: 100%;
padding: 2em;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
overflow-y: scroll;
}
.overlay .close {
position: absolute;
top: 2em;
right: 2em;
width: 3em;
height: 3em;
cursor: pointer;
}
.overlay img {
width: 10em;
}
.overlay .overlay-list {
list-style-type: none;
text-align: center;
}
.overlay .overlay-list li {
color: black;
font-size: 2rem;
font-family: Josefin Sans;
padding: .6em 0;
}
.overlay .overlay-list li a {
text-decoration: none;
color: black;
}
}
#media only screen and (min-width: 1024px) {
.overlay {
display: none;
}
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: "Raleway", sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 800;
}
.hero {
width: 100%;
min-height: 100vh;
background: transparent -webkit-gradient(linear, left top, left bottom, from(#def0d8), to(var(--unnamed-color-fafafa))) 0% 0% no-repeat padding-box;
background: transparent linear-gradient(180deg, #def0d8 0%, var(--unnamed-color-fafafa) 100%) 0% 0% no-repeat padding-box;
background: transparent -webkit-gradient(linear, left top, left bottom, from(#def0d8), to(#fafafa)) 0% 0% no-repeat padding-box;
background: transparent linear-gradient(180deg, #def0d8 0%, #fafafa 100%) 0% 0% no-repeat padding-box;
z-index: 1;
position: relative;
}
.hero__container {
padding: 2em;
height: 70vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
z-index: 4;
overflow: hidden;
}
.hero__container::after {
content: '';
position: absolute;
width: 600px;
height: 600px;
z-index: -1;
top: 0;
left: 0;
background-color: #387546;
border-radius: 0 0 0 60%;
}
.hero__container .food-bg {
background-image: url("../images/background+pict.png");
background-position: top;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
right: -36%;
}
.hero__container .left-col {
width: 68%;
z-index: 2;
}
.hero__container .left-col h1 {
color: white;
margin-bottom: .7em;
}
.hero__container .left-col p {
color: white;
margin-bottom: 2em;
width: 70%;
}
.btn {
text-decoration: none;
color: white;
padding: .7em 0.7em .7em 1em;
border-radius: .8em;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.btn__gold {
background-color: #f19a33;
}
.button__icon {
width: 1.5em;
height: 1.5em;
fill: currentcolor;
margin-left: 1em;
}
/*# sourceMappingURL=main.css.map */
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght#400;500;700;900&display=swap" rel="stylesheet">
<div class="overlay">
<a href="">
<img src="images/wrapped_green_logo#2x.png" class="overlay-logo" alt="logo">
</a>
<img src="/images/icon-close.svg" class="close" alt="close">
<ul class="overlay-list">
<li>About us</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<header>
<a href="">
<img src="images/wrapped_green_logo#2x.png" class="header-logo" alt="logo">
</a>
<nav>
<ul class="header-links">
<li>About us</li>
<li>Menu</li>
<li>Contact</li>
</ul>
<div class="burger">
<img src="images/icon-hamburger.svg" alt="hamburger-icon">
</div>
</nav>
</header>
<div class="hero">
<div class="hero__container">
<div class="left-col">
<h1>Healthy & Fresh Food For You</h1>
<p>Created for lover of healty, delicious and non-obvious food</p>
Check Menu<svg xmlns="http://www.w3.org/2000/svg" class="button__icon" viewBox="0 0 30 24" width="50" height="20"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" fill="rgba(255,255,255,1)"/></svg>
</div>
<div class="food-bg"></div>
</div>
</div>
This is a simple solution. There're many others.
.wrapper {
width: 90%;
height: 400px;
overflow: hidden;
background: lightgreen;
box-shadow: 1px 1px 5px 2px rgba(0,0,0,0.4);
}
nav {
width: 100%;
height: 60px;
background: #fff;
position: relative;
z-index: 20;
border-bottom: 1px solid black;
}
.background {
position: relative;
width: 100%;
height: 0;
right: 0;
}
.background > div {
position: absolute;
right: -50px;
top: -20px;
width: 400px;
height: 400px;
border-radius: 50%;
background: green;
}
<div class="wrapper">
<div class="background">
<div></div>
</div>
<nav>Menu</nav>
</div>
There are a number of ways to do this, and here's one. For brevity, only one breakpoint was added, and for mobile, it was assumed this was an intro screen with no scrolling content, so the background will adapt to the viewport size. You may want to add some adjustment to get it to the desired placement for each breakpoint:
header {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: -webkit-sticky;
position: sticky;
width: 100%;
padding: 1em 3em;
min-height: 8vh;
text-align: center;
top: 0;
z-index: 4;
background-color: white;
}
header img {
width: 8em;
}
header ul {
list-style: none;
}
header ul li {
display: inline-block;
padding: 1em 2em;
color: white;
position: relative;
overflow: hidden;
will-change: transform;
}
header ul li a {
text-decoration: none;
color: black;
font-weight: 700;
font-size: clamp(1.5rem, 5vw, 1.8rem);
}
header .burger {
display: none;
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: "Raleway", sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 800;
}
.hero {
width: 100%;
min-height: 100vh;
background: transparent -webkit-gradient(linear, left top, left bottom, from(#def0d8), to(var(--unnamed-color-fafafa))) 0% 0% no-repeat padding-box;
background: transparent linear-gradient(180deg, #def0d8 0%, var(--unnamed-color-fafafa) 100%) 0% 0% no-repeat padding-box;
background: transparent -webkit-gradient(linear, left top, left bottom, from(#def0d8), to(#fafafa)) 0% 0% no-repeat padding-box;
background: transparent linear-gradient(180deg, #def0d8 0%, #fafafa 100%) 0% 0% no-repeat padding-box;
z-index: 1;
position: relative;
}
.hero__container {
padding: 2em;
height: 90vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
z-index: 4;
overflow: hidden;
}
.hero__container::after {
content: '';
position: absolute;
width: 300vw;
height: 300vw;
z-index: -1;
top: -170vw;
right: -160vw;
background-color: #387546;
border-radius: 50%;
}
.hero__container .food-bg {
background-image: url("../images/background+pict.png");
background-position: top;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
right: -36%;
}
.hero__container .left-col {
width: 68%;
z-index: 2;
}
.hero__container .left-col h1 {
color: white;
margin-bottom: .7em;
}
.hero__container .left-col p {
color: white;
margin-bottom: 2em;
width: 70%;
}
.btn {
text-decoration: none;
color: white;
padding: .7em 0.7em .7em 1em;
border-radius: .8em;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.btn__gold {
background-color: #f19a33;
}
.button__icon {
width: 1.5em;
height: 1.5em;
fill: currentcolor;
margin-left: 1em;
}
/*Responsive Styles*/
#media only screen and (max-width: 996px) {
header .burger {
display: block;
width: 4em;
cursor: pointer;
}
header .burger img {
width: 3em;
}
header ul {
display: none;
}
}
#media only screen and (max-width: 1022px) {
.overlay {
position: fixed;
z-index: 4;
width: 100%;
height: 100%;
padding: 2em;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
overflow-y: scroll;
}
.overlay .close {
position: absolute;
top: 2em;
right: 2em;
width: 3em;
height: 3em;
cursor: pointer;
}
.overlay img {
width: 10em;
}
.overlay .overlay-list {
list-style-type: none;
text-align: center;
}
.overlay .overlay-list li {
color: black;
font-size: 2rem;
font-family: Josefin Sans;
padding: .6em 0;
}
.overlay .overlay-list li a {
text-decoration: none;
color: black;
}
}
#media only screen and (min-width: 1024px) {
.overlay {
display: none;
}
.hero__container {
height: 70vh;
}
.hero__container::after {
width: 900px;
height: 900px;
z-index: -1;
top: 0;
top: -240px;
right: -120px;
}
}
<div class="overlay">
<a href="">
<img src="images/wrapped_green_logo#2x.png" class="overlay-logo" alt="logo">
</a>
<img src="/images/icon-close.svg" class="close" alt="close">
<ul class="overlay-list">
<li>About us</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<header>
<a href="">
<img src="images/wrapped_green_logo#2x.png" class="header-logo" alt="logo">
</a>
<nav>
<ul class="header-links">
<li>About us</li>
<li>Menu</li>
<li>Contact</li>
</ul>
<div class="burger">
<img src="images/icon-hamburger.svg" alt="hamburger-icon">
</div>
</nav>
</header>
<div class="hero">
<div class="hero__container">
<div class="left-col">
<h1>Healthy & Fresh Food For You</h1>
<p>Created for lover of healty, delicious and non-obvious food</p>
Check Menu<svg xmlns="http://www.w3.org/2000/svg" class="button__icon" viewBox="0 0 30 24" width="50" height="20"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" fill="rgba(255,255,255,1)"/></svg>
</div>
<div class="food-bg"></div>
</div>
</div>
Similar to Karolaus Answer but i like to use view height more... I just removed the overflow from .hero__container and changed the following stylings (or added #media) to the original code... you can see how much view height you need for mobile (or how much width you consider it as a mobile device)...
.hero__container::after {
content: '';
position: absolute;
width: 100vh;
height: 100vh;
z-index: 0;
top: -20vh;
right: -20vh;
/* [![enter image description here][1]][1] */
background-color: #387546;
background-position: -200vh -200vh;
border-radius: 50%;
}
#media screen and (max-width: 420px){
.hero__container::after{
width:125vh;
height:125vh;
top: -50vh;
right: -50vh;
}
}
Link to Codepen
: https://codepen.io/vattevaii/pen/PobWZzX
this time I hope i'll be able to format the question better and I apologize if the latter is trivial, but I'm a beginner in html and css. I'd need help with a header, which needs to be as in the picture: made of a background image cut into two halves by a white bar where the navigation bar(right) and the title (left) stand. The title has another background image shaped as a half-moon.Since I couldn't find an acceptable way to make the half-moon appear as a background-image of the div where I put the title, I made another div with the half-moon as a background-image and I gave this div a relative position, working on top, right and left so to make it fit in the right place. However, I don't know how make the text show up in front of everything. Also if I make the browser window smaller the halfmoon moves around the page. Is there something I can do to make things better?
my try is below. Thanks in advance for any help.
html, body *{margin: 0; box-sizing: border-box}
h1, h2, h3, h4, h5 {
font-family: 'Play', sans-serif;
color: #c76161;
}
#header {
background: url("http://i65.tinypic.com/t8vzp2.jpg") 100% no-repeat;
background-position: center center;
position: fixed;
right: 0;
left: 0;
top:0;
display: block;
width: 100%;
height: 14.37em;
}
#testo-header{
background-color: white;
height: 70px;
width: 50%;
position: absolute;
top: 80px;
left: 0;
text-align: center;
line-height: 70px;
z-index: 2;
}
#mezzaluna{
background-image: url(http://i63.tinypic.com/w72ag6.png);
background-repeat: no-repeat;
height:90px;
position: relative;
bottom: 67px;
left: 180px;
z-index: 1;
}
ul#nav {
background-color: white;
height: 70px;
width: 50%;
position: absolute;
top: 80px;
right: 0;
font-family: sans-serif;
font-size: 1em;
font-weight: bold;
list-style-type: none;
line-height: 35px;
display: block;
}
ul#nav li {
float: left;
text-align: center;
vertical-align: text-top;
padding: 20px;
}
ul#nav li a {
text-decoration: none;
color: #3a7777;
}
ul#nav a:hover {
color: #f5af33
}
bodybody>
<div id="header">
<div class="wrap">
<div id="testo-header">
<h1>Rosso Pomodoro</h1>
<div id="mezzaluna"></div>
</div>
<ul id="nav">
<li>Home</li>
<li class="active">Ricette</li>
<li>Categorie</li>
<li>Blog</li>
<li>Contatti</li></li>
</ul>
</div>
Not sure what you are planning on doing with that but you could do this. It would be better if you tell us what you expect to get! But so far this is what you are trying to do!
html, body *{margin: 0; box-sizing: border-box}
h1, h2, h3, h4, h5 {
font-family: 'Play', sans-serif;
color: #c76161;
}
#header {
background: url("http://i65.tinypic.com/t8vzp2.jpg") 100% no-repeat;
background-position: center center;
position: fixed;
right: 0;
left: 0;
top:0;
display: block;
width: 100%;
height: 14.37em;
}
#testo-header{
background-color: white;
height: 70px;
width: 50%;
position: absolute;
top: 80px;
left: 0;
text-align: center;
line-height: 70px;
z-index: 2;
}
#testo-header h1:before{
content: '\0020';
background-image: url(http://i63.tinypic.com/w72ag6.png);
background-repeat: no-repeat;
background-color: #ff0000;
width: 75%;
height:100%;
display: block;
position: absolute;
top: 50%;
left: 12.5%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
z-index: -1;
}
ul#nav {
background-color: white;
height: 70px;
width: 50%;
position: absolute;
top: 80px;
right: 0;
font-family: sans-serif;
font-size: 1em;
font-weight: bold;
list-style-type: none;
line-height: 35px;
display: block;
z-index: 5;
}
ul#nav li {
float: left;
text-align: center;
vertical-align: text-top;
padding: 20px;
}
ul#nav li a {
text-decoration: none;
color: #3a7777;
}
ul#nav a:hover {
color: #f5af33
}
bodybody>
<div id="header">
<div class="wrap">
<div id="testo-header">
<h1>Rosso Pomodoro</h1>
</div>
<ul id="nav">
<li>Home</li>
<li class="active">Ricette</li>
<li>Categorie</li>
<li>Blog</li>
<li>Contatti</li></li>
</ul>
</div>
I have a problem with putting an img for hover background.
It should look like this : Navigation
These 2 lines, represent the hover transparent image, and the text "home" should be in center of that img.. I have no idea how to do that... Anyone ?
Sorry if my english is bad
.page-container {
width: 980px;
margin: 0 auto;
text-align: center;
}
header {
margin: 0;
padding: 0;
width: 100%;
height: 220px;
background-color: #EAEAEA;
}
.logo {
text-align: center;
}
.logo img {
margin: 30px 0 0 0;
}
nav {
height: 136px;
}
ul {
list-style-type: none;
display: inline-block;
margin: 70px 0 0 0;
padding: 0;
}
nav li {
float: left;
text-align: center;
}
nav li a {
margin-right: 165px;
text-decoration: none;
float:left;
font-size: 22px;
letter-spacing: 3px;
text-transform: uppercase;
font-family: font91477;
color: #9E9E9E;
background-size: 75px;
}
a:focus {
text-decoration: none;
color: #9E9E9E;
}
a:hover {
height: 75px;
text-decoration: none;
color: #9E9E9E;
background: url(http://i.imgur.com/P5tF09r.png) no-repeat center;
}
<header>
<div class="logo">
<img src="img/logo.png"/>
</div>
<nav>
<div class="page-container">
<ul>
<li>Home</li>
<li>O Podjetju</li>
<li>Produkti</li>
<li><a class="last-child" href="#">Kontakti</a></li>
</ul>
</div>
</nav>
</header>
just add the following css styles
a:hover {
height: 75px;
text-decoration: none;
color: #9E9E9E;
background: url(http://i.imgur.com/P5tF09r.png) no-repeat center;
/*****************here they are ************/
display:flex;
align-items: center;
}
Why you don't make it in css ? Something like this
.menu{
list-style: none;
background-color: #EAEAEA;
margin: 0;
padding: 20px 0;
overflow: hidden;
}
.menu__item{
float: left;
margin: 0 20px;
position: relative;
}
.menu__item a{
background-color: #EAEAEA;
text-transform: uppercase;
position: relative;
z-index: 1;
}
.menu__item::after{
content:'';
width: 1px;
height: 1px;
background-color: #000;
position: absolute;
top: 50%;
left: 50%;
margin: 0;
transform: rotate(-45deg);
z-index: 0;
transition: all .25s ease;
}
.menu__item:hover::after{
width: 50px;
margin: -1px 0 0 -25px;
}
<ul class="menu">
<li class="menu__item"><a>Home</a></li>
<li class="menu__item"><a>test</a></li>
<li class="menu__item"><a>very long title for test</a></li>
<li class="menu__item"><a>test</a></li>
</ul>
I'm in the middle of designing a WP theme. I've decided to make links in the header as they are in the image. However, I couldn't make the bluish gradient filled area filled with black background (I used that fancy gradient for just pointing the issue). Called charming .current class to make this achieved, it is basically:
.current {background-color: black; color: rgb(242, 245, 238); padding-top: 65px;}
Also image:
I did NOT used CSS-reset, I checked overflow attributes for encapsulating divs of list, nothing worked.
HTML code:
<div id="container" class="">
<div id="header" class="shadow">
<div id="logoContainer">
<span class="helper"></span><img src="img/tdw_logo_serif.png" alt="The Digital Warehouse">
<div id="links">
<ul class="helper">
<li><span class="helper"></span>HOME</li>
<li class="current"><span class="helper"></span>BLOG</li>
<li><span class="helper"></span>PORTFOLIO</li>
<li><span class="helper"></span>CONTACT</li>
</ul>
</div>
</div>
</div>
...
</div>
CSS code:
#container {
}
#header {
top: 0;
left: 0;
right: 0;
height: 35px;
overflow: visible;
background-color: rgb(242, 245, 238);
color: rgba(5, 0, 18, 1.00);
z-index: 100;
} .willStick {
position: absolute;
padding-top: 65px;
} .didStick {
position: fixed;
padding-top: 0;
}
#logoContainer {
position: relative;
height: 35px;
padding-left: 60px;
padding-right: 60px;
width: 900px;
margin: auto;
overflow: visible;
}
#logoContainer img {
margin: 0;
padding: 0;
height: 35px;
vertical-align: middle;
display: inline-block;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#links {
position: relative;
float:right;
display: inline-block;
vertical-align: middle;
margin: 0;
padding: 0;
height: 35px;
overflow: visible;
}
#links ul {
margin: 0;
padding: 0;
display: inline-block;
font-size: 0.7em;
font-weight: 800;
font-family: "jaf-bernino-sans-condensed", "proxima-nova", sans-serif;
text-transform: uppercase;
list-style-type: none;
overflow: visible;
}
#links li {
width: 90px;
height: 35px;
border: 0;
margin: 0;
padding: 0;
display: inline-block;
float: left;
text-align: center;
overflow: visible;
}
Any help will be appreciated.
This appears to be a specificity issue - try
#links li.current etc.
#container {
}
#header {
top: 0;
left: 0;
right: 0;
height: 35px;
overflow: visible;
background-color: rgb(242, 245, 238);
color: rgba(5, 0, 18, 1.00);
z-index: 100;
} .willStick {
position: absolute;
padding-top: 65px;
} .didStick {
position: fixed;
padding-top: 0;
}
#logoContainer {
position: relative;
height: 35px;
padding-left: 60px;
padding-right: 60px;
width: 900px;
margin: auto;
overflow: visible;
}
#logoContainer img {
margin: 0;
padding: 0;
height: 35px;
vertical-align: middle;
display: inline-block;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#links {
position: relative;
/*float:right;*/
display: inline-block;
vertical-align: bottom;
margin: 0;
padding: 0;
height: 35px;
overflow: visible;
}
#links ul {
margin: 0;
padding: 0;
display: inline-block;
font-size: 0.7em;
font-weight: 800;
font-family: "jaf-bernino-sans-condensed", "proxima-nova", sans-serif;
text-transform: uppercase;
list-style-type: none;
overflow: visible;
}
#links li {
width: 90px;
height: 35px;
border: 0;
margin: 0;
padding: 0;
display: inline-block;
float: left;
text-align: center;
overflow: visible;
}
#links li.current {background-color: black; color: rgb(242, 245, 238); padding-top: 65px;}
<div id="container" class="">
<div id="header" class="shadow">
<div id="logoContainer">
<span class="helper"></span>
<div id="links">
<ul class="helper">
<li><span class="helper"></span>HOME</li>
<li class="current"><span class="helper"></span>BLOG</li>
<li><span class="helper"></span>PORTFOLIO</li>
<li><span class="helper"></span>CONTACT</li>
</ul>
</div>
</div>
</div>
</div>
I'm trying to make the text on my navigation bar to show an underline on mouse-over but for some reason it doesn't work. I've used the CSS from the Hover-master collection and just a simple navigation list. What to do?!
Have I used the Hover-master collection wrong?
EDIT: I just inserted my whole code and in the snippet it works but when I run the html file in the browers it doesn't...
EDIT2: The files are hosted # http://fransbergstrom.kaggteknik.se/ and as you can see, the links doesn't work, and the code is an exact copy of the ones pasted below.
HTML & CSS:
#charset "utf-8";
#font-face {
font-family: Fairview;
src: url("fonts/Fairview_Regular.otf");
}
/*PRE-CLASSES:*/
#media screen and (max-width: 1440px) {
html {
-moz-transform: scale(0.75, 0.75);
zoom: 0.75;
zoom: 75%;
}
/*Zooma ut vid mac så websidan anpassar sig*/
}
div {
display: block;
}
* {
margin: 0px;
padding: 0px;
font-weight: normal;
}
body {
background-color: gray;
font-family: 'Fairview';
color: #444444;
}
/* ID's: */
/* NAVIGATION MENU */
#navlist {
margin-top: 35px;
padding: 0;
list-style: none;
}
#navlist li {
display: inline
}
#navlist li a {
font-size: 50px;
text-align: center;
border-right: 3px solid #fff;
text-decoration: none;
width: 200px;
float: left;
color: white;
}
/*FRONT PAGE*/
#container {
width: 70%;
height: 100%;
margin: 0 auto;
}
#menu {
margin-top: 0px;
height: 130px;
width: 100%;
}
#menu-nav {
height: 130px;
width: 80%;
float: left;
}
#menu-logo {
height: 130px;
width: 20%;
background: url("images/menulogo.png") no-repeat;
background-size: contain;
float: left;
}
/* NEWS */
#news {
margin-left: 250px;
margin-top: 140px;
height: 340px;
width: 70%;
float: left;
}
#news-opacity {
position: absolute;
margin-left: 0px;
height: 340px;
width: 49%;
background-color: black;
opacity: 0.5;
float: left;
z-index: -1;
}
#news-right {
height: 100%;
width: 48%;
float: left;
}
#news-right p {
margin-top: 90px;
color: #e04e21;
font-size: 100px;
text-decoration: none;
text-align: center;
}
#news-right b {
margin-top: 90px;
color: white;
font-size: 60px;
text-decoration: none;
text-align: center;
margin-left: 93px;
}
#news-middle {
margin-top: 60px;
height: 70%;
width: 4%;
background: url("images/news-divider.png") no-repeat;
background-size: contain;
float: left;
}
#news-left {
height: 100%;
width: 48%;
float: left;
}
#news-left p {
margin-top: 10px;
margin-left: 50px;
color: white;
font-size: 40px;
text-decoration: none;
text-align: left;
}
#news-left h1 {
margin-top: 70px;
margin-left: 50px;
color: #e04e21;
font-size: 50px;
text-decoration: none;
text-align: left;
}
/* HEADER */
#header {
position: relative;
height: 20px;
width: 100%;
margin: auto;
}
#header-opacity {
position: absolute;
height: 160px;
width: 100%;
margin: auto;
background-color: black;
opacity: 0.6;
z-index: -1;
}
/* CLASSES: */
.background {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
background: url("images/background.jpg") no-repeat 0px;
}
/* Underline From Center */
.hvr-underline-from-center {
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;
position: relative;
overflow: hidden;
}
.hvr-underline-from-center:before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
bottom: 0;
background: #2098d1;
height: 4px;
-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-underline-from-center:hover:before,
.hvr-underline-from-center:focus:before,
.hvr-underline-from-center:active:before {
left: 0;
right: 0;
}
<!DOCUTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="standard.css" media="screen">
</head>
<body>
<div class="background">
<div id="header-opacity"></div>
<div id="container">
<div id="header"></div>
<div id="menu">
<div id="menu-logo"></div>
<div id="menu-nav">
<ul id="navlist">
<li>Start
</li>
<li><font color="#e04e21">Kontakt</font>
</li>
<li>Info
</li>
<li><font color="#e04e21">Turneringar</font>
</li>
<li>Biljetter
</li>
</ul>
</div>
</div>
<div id="news">
<div id="news-opacity"></div>
<div id="news-right">
<p>WELCOME</p>
<b>TO MONSTERHACK</b>
</div>
<div id="news-middle">
</div>
<div id="news-left">
<h1>Har kommer det sta nagot</h1>
<b></b>
<p>Som informerar lasaren</p>
<b></b>
<p>Om eventet med mera</p>
<b></b>
<p>Samt dirigerar den till biljetter</p>
</div>
</div>
</div>
</div>
</body>
</html>
Just remove z-index:-1; from .background{}. You dropped the whole page below "sea level", so hover event do not fires. ;)
have you tried adding the font-size attribute to .hvr-underline-from-center:hover ?
add this to the css:
.hvr-underline-from-center:hover {
font-size: 30px;
}
#navlist li a:hover {
font-size: 55px;
}
Add that line to your CSS and put your own pixels value instead of '55px' to play around the text size when hovering
http://jsbin.com/hesisohuse/1/edit
Okey I just figured it out, for some reason my .background class caused the problem. By removing position=absolute; from the class my tags became clickable again.
I don't know why this happends but at least it fixed my problem.