I adjusted it based on my screen size, and I've tried using both relative and absolute positions for .navbar, but when I open it on my laptop the navbar content overflows the parent image, setting overflow to hidden doesn't fix the issue since i want it to stay over the bottom of the image at all times regardless of screen size. Here's the jsfiddle https://jsfiddle.net/Montinyek/4dbf5p9e/1/
body, html {
height: 100%;
margin: 0;
padding:0;
font-family: Times, Times New Roman, serif;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)), url(./hero.jpg);
height: 80%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
overflow: hidden;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #f2f2f2;
}
h1 {
padding: 80px 60px;
border: 1px solid #f2f2f2;
border-radius: 5px;
}
.nav-container {
display: inline-block;
position: relative;
top: 87%;
}
.navbar {
overflow: hidden;
height: 100px;
display: inline-flex;
gap: 70px;
align-items: center;
justify-content: center;
width: 99vw;
}
.navbar a.main {
color: #f2f2f2;
padding-left: 47px;
padding-right: 47px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid #f2f2f2;
border-radius: 5px;
text-decoration: none;
font-size: 20px;
margin: 0px;
transition: all 0.3s;
display: block;
}
.navbar a.main:hover {
background-color: #ddd;
transform: scale(1.3);
color: black;
}
.dropdown-content {
visibility: none;
opacity: 0;
pointer-events: none;
position: absolute;
left: 64.6%;
top: 80%;
border-radius: 5px;
background-color: black;
min-width: 160px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
z-index: 1;
transition: all 0.5s;
}
.dropdown-content a {
float: none;
color: #ddd;
padding: 12px;
text-decoration: none;
display: block;
text-align: center;
transition: all 0.5s;
font-size: 1.5rem;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
</style>
<body>
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">Welcome</h1></div>
<div class="nav-container">
<div class="navbar">
<a class="main" href="#home">Home</a>
<a class="main" href="#mission">Mission</a>
<a class="main" href="#news">Contact</a>
<div class="dropdown">
<a class="main" href="#news">More<i class="fa fa-caret-down"></i></a>
<div class="dropdown-content">
<a style="color:rgb(238, 92, 92);" class="link" href="./index5.html">Gift</a>
Travel
</div>
</div>
</div></div>
</div>
</body>
</html>```
I don't know if I understood well your issue, but I made some minor changes and got this result demo
HTML:
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">Welcome </h1>
</div>
<div class="navbar">
<a class="main" href="#home">Home</a>
<a class="main" href="#mission">Mission</a>
<a class="main" href="#news">Contact</a>
<div class="dropdown">
<a class="main" href="#news">More<i class="fa fa-caret-down"></i></a>
<div class="dropdown-content">
<a style="color:rgb(238, 92, 92);" class="link" href="./index5.html">Gift</a>
Travel
</div>
</div>
</div>
</div>
CSS:
body,
html {
height: 100vh;
margin: 0;
padding: 0;
font-family: Times, Times New Roman, serif;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)),
url("https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.technistone.com%2Fen%2Fcolor%2Fstarlight-black&psig=AOvVaw3Ekck4Ncbtpa2vQdYYlN_V&ust=1646455838525000&source=images&cd=vfe&ved=0CAsQjRxqFwoTCID6_o3Uq_YCFQAAAAAdAAAAABAD");
height: 80vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow-x: hidden;
}
.hero-text {
display: flex;
justify-content: center;
text-align: center;
width: 100%;
color: #f2f2f2;
}
.hero-text h1 {
padding: 80px 60px;
border: 1px solid #f2f2f2;
border-radius: 5px;
}
.navbar {
overflow: hidden;
height: 120px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
max-width: 100vw;
width: 100%;
}
.navbar a.main {
color: black;
padding-left: 47px;
padding-right: 47px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
border-radius: 5px;
text-decoration: none;
font-size: 20px;
margin: 0px;
transition: all 0.3s;
display: block;
}
.navbar a.main:hover {
background-color: #ddd;
transform: scale(1.3);
color: black;
}
.dropdown-content {
visibility: none;
opacity: 0;
pointer-events: none;
position: absolute;
left: 64.6%;
top: 80%;
border-radius: 5px;
background-color: black;
min-width: 160px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
rgba(0, 0, 0, 0.22) 0px 10px 10px;
z-index: 1;
transition: all 0.5s;
}
.dropdown-content a {
float: none;
color: #ddd;
padding: 12px;
text-decoration: none;
display: block;
text-align: center;
transition: all 0.5s;
font-size: 1.5rem;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
So i'm making a website, and i have a sort of a slider menu from top, and when i hover over a button everything appears, but when i hover out it doesn't disappear. In my js code i had to delay the disappearance with setTimeout() because there's a small gap between the button and the menu. So if someone would know how to make it disappear while keeping the timer thing so it doesn't disappear when going from button to the menu i'd be insanely grateful. Thanks in advance. Here's the code:
var timeout;
function mouseOver(){
document.getElementById('menu-roll').style.display = 'block';
timeout = setTimeout(function(){document.getElementById('menu-roll').style.display = 'none';}, 3000);
}
function mouseOut(){
clearTimeout(timeout);
}
:root{
--backg-primary: #ffeaa7;
--backg-islands: #2d3436;
--nav-wrapper: #4d0404;
--nav-wrapper-hover: #F79F1F;
--menu-roll: rgba(247, 159, 31, 0.95);
}
*{
margin: 0;
padding: 0;
}
body{
font-family: Verdana, Geneva, Tahoma;
scroll-behavior: smooth;
}
#video-wrapper{
height: 100vh;
width: 100%;
}
#navbar{
background-color: var(--nav-wrapper);
position: fixed;
width: 100%;
transition: top 0.3s;
top: 0;
overflow: visible;
z-index: 7;
}
#navbar a{
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
letter-spacing: 1.5px;
}
#navbar a:hover{
transition: background-color .25s ease, color .25s ease;
background-color: var(--nav-wrapper-hover);
color: var(--nav-wrapper);
}
#logo-wrapper{
background: white;
margin: 0 auto;
border: 3.85px solid var(--nav-wrapper);
box-shadow: 0 0 10px #333;
position: relative;
animation: slideup 3s;
width: 200px;
height: 200px;
border-radius: 45%;
}
#keyframes slideup{
0%{
top: 150px;
}
100%{
top: 0;
}
}
#menu-wrapper{
width: 700px;
height: 103px;
background: var(--nav-wrapper);
margin: 0 auto;
border-radius: 50px;
position: relative;
z-index: 8;
}
#logo-wrapper img{
border-radius: 45%;
width: 190px;
height: 190px;
margin: 0 auto;
padding-left: 4px;
}
#video{
position: fixed;
min-width: 100%;
min-height: auto;
}
#menu-roll{
position: absolute;
z-index: 4;
background: var(--nav-wrapper-hover);
width: 150px;
top: 60px;
padding: 15px;
left: 2%;
display: none;
}
#menu-roll #design-line-menu-roll{
height: 4px;
width: 90%;
margin: 0 auto;
background: var(--nav-wrapper);
margin-bottom: 10px;
}
#menu-roll a{
text-decoration: none;
font-size: 1.35em;
text-align: left;
color: var(--nav-wrapper);
font-family: 'Poppins', sans-serif;
}
#menu-roll a:hover{
text-decoration: underline;
}
ul{
list-style-type: none;
}
#h1-menu-tandoor{
color: white;
left: -100%;
top: 12%;
font-size: 1.5em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacity 3.2s;
}
#keyframes textopacity{
0%, 90%{
opacity: 0.0;
}
100%{
opacity: 1.0;
}
}
#h1-menu-restaurace{
color: white;
left: 110%;
top: 14.5%;
font-size: 1.4em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacitytwo 3.2s;
}
#keyframes textopacitytwo{
0%, 90%{
opacity: 0.0;
}
100%{
opacity: 1.0;
}
}
#information-section{
background: var(--backg-primary);
z-index: 5;
position: relative;
}
#introduction{
padding-top: 50px;
z-index: 5;
position: relative;
text-align: left;
overflow: hidden;
width: 45%;
padding: 50px;
background: #444;
margin: 10px;
box-shadow: 0 0 10px #333;
}
#introduction h1{
font-size: 3em;
padding-bottom: 10px;
color: #edf3f8;
}
#introduction h3{
font-size: 1.75em;
border-bottom: 2px solid var(--nav-wrapper);
padding-bottom: 15px;
color: var(--blend-in-text);
}
#introduction p{
color: #edf3f8;
font-size: 1.25em;
padding: 15px 0;
letter-spacing: 1px;
}
#divider{
width: 100%;
height: 40px;
background: var(--nav-wrapper);
position: relative;
z-index: 6;
}
#intro-photos{
position: relative;
z-index: 6;
height: 10px;
}
.first-photo{
width: 36.5%;
height: auto;
left: 62%;
position: relative;
top: -400px;
z-index: 4;
box-shadow: 0 0 10px #333;
border-radius: 50%;
align-items: center;
border: 1px solid rgb(255, 218, 104);
background: rgb(255, 218, 104);
}
#services-info{
height: 407px;
}
#services-photo{
top: 50px;
}
#media screen and (max-width: 700px){
.first-photo{
left: 12%;
margin: 0 auto;
top: 40px;
width: 76.5%;
padding-top: 15px;
border-radius: 0;
}
#introduction{
width: 60%;
margin: 0 auto;
}
#divider{
margin-bottom: 10px;
}
#services-info{
height: 800px;
}
#services-photo{
top: 470px;
position: relative;
}
}
<section id="video-wrapper">
<ul id="navbar">
<li id="menu-hover-roll" onmouseover="mouseOver()" onmouseout="mouseOut()">
Menu
<ul id="menu-roll">
<div id="design-line-menu-roll"></div>
<li>Polední menu</li>
<li>Jídelní lístek</li>
<li>Nápoje</li>
</ul>
</li>
</ul>
<video id="video" autoplay muted loop>
<source src="styles/720p.mp4" type="video/mp4">
</video>
<div id="menu-wrapper">
<div id="logo-wrapper">
<div id="h1-menu-tandoor">
<h1>Tandoor</h1>
</div>
<div id="h1-menu-restaurace">
<h1>Restaurace</h1>
</div>
<img src="styles/tndrlogo.jpg">
</div>
</div>
<div id="menu-roll">
<div id="design-line-menu-roll"></div>
<ul>
<li>
Polední menu
</li>
<li>
Menu
</li>
<li>
Nápojový lístek
</li>
</ul>
</div>
</section>
I'm not sure that I understand everything but take a look at this code.
var timeout;
function mouseOver() {
document.getElementById('menu-roll').style.display = 'block';
clearTimeout(timeout);
}
function mouseOut() {
timeout = setTimeout(function() {
document.getElementById('menu-roll').style.display = 'none';
}, 1000);
}
:root {
--backg-primary: #ffeaa7;
--backg-islands: #2d3436;
--nav-wrapper: #4d0404;
--nav-wrapper-hover: #F79F1F;
--menu-roll: rgba(247, 159, 31, 0.95);
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Geneva, Tahoma;
scroll-behavior: smooth;
}
#video-wrapper {
height: 100vh;
width: 100%;
}
#navbar {
background-color: var(--nav-wrapper);
position: fixed;
width: 100%;
transition: top 0.3s;
top: 0;
overflow: visible;
z-index: 7;
}
#navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
letter-spacing: 1.5px;
}
#navbar a:hover {
transition: background-color .25s ease, color .25s ease;
background-color: var(--nav-wrapper-hover);
color: var(--nav-wrapper);
}
#logo-wrapper {
background: white;
margin: 0 auto;
border: 3.85px solid var(--nav-wrapper);
box-shadow: 0 0 10px #333;
position: relative;
animation: slideup 3s;
width: 200px;
height: 200px;
border-radius: 45%;
}
#keyframes slideup {
0% {
top: 150px;
}
100% {
top: 0;
}
}
#menu-wrapper {
width: 700px;
height: 103px;
background: var(--nav-wrapper);
margin: 0 auto;
border-radius: 50px;
position: relative;
z-index: 8;
}
#logo-wrapper img {
border-radius: 45%;
width: 190px;
height: 190px;
margin: 0 auto;
padding-left: 4px;
}
#video {
position: fixed;
min-width: 100%;
min-height: auto;
}
#menu-roll {
position: absolute;
z-index: 4;
background: var(--nav-wrapper-hover);
width: 150px;
top: 60px;
padding: 15px;
left: 2%;
display: none;
}
#menu-roll #design-line-menu-roll {
height: 4px;
width: 90%;
margin: 0 auto;
background: var(--nav-wrapper);
margin-bottom: 10px;
}
#menu-roll a {
text-decoration: none;
font-size: 1.35em;
text-align: left;
color: var(--nav-wrapper);
font-family: 'Poppins', sans-serif;
}
#menu-roll a:hover {
text-decoration: underline;
}
ul {
list-style-type: none;
}
#h1-menu-tandoor {
color: white;
left: -100%;
top: 12%;
font-size: 1.5em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacity 3.2s;
}
#keyframes textopacity {
0%,
90% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
#h1-menu-restaurace {
color: white;
left: 110%;
top: 14.5%;
font-size: 1.4em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacitytwo 3.2s;
}
#keyframes textopacitytwo {
0%,
90% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
#information-section {
background: var(--backg-primary);
z-index: 5;
position: relative;
}
#introduction {
padding-top: 50px;
z-index: 5;
position: relative;
text-align: left;
overflow: hidden;
width: 45%;
padding: 50px;
background: #444;
margin: 10px;
box-shadow: 0 0 10px #333;
}
#introduction h1 {
font-size: 3em;
padding-bottom: 10px;
color: #edf3f8;
}
#introduction h3 {
font-size: 1.75em;
border-bottom: 2px solid var(--nav-wrapper);
padding-bottom: 15px;
color: var(--blend-in-text);
}
#introduction p {
color: #edf3f8;
font-size: 1.25em;
padding: 15px 0;
letter-spacing: 1px;
}
#divider {
width: 100%;
height: 40px;
background: var(--nav-wrapper);
position: relative;
z-index: 6;
}
#intro-photos {
position: relative;
z-index: 6;
height: 10px;
}
.first-photo {
width: 36.5%;
height: auto;
left: 62%;
position: relative;
top: -400px;
z-index: 4;
box-shadow: 0 0 10px #333;
border-radius: 50%;
align-items: center;
border: 1px solid rgb(255, 218, 104);
background: rgb(255, 218, 104);
}
#services-info {
height: 407px;
}
#services-photo {
top: 50px;
}
#media screen and (max-width: 700px) {
.first-photo {
left: 12%;
margin: 0 auto;
top: 40px;
width: 76.5%;
padding-top: 15px;
border-radius: 0;
}
#introduction {
width: 60%;
margin: 0 auto;
}
#divider {
margin-bottom: 10px;
}
#services-info {
height: 800px;
}
#services-photo {
top: 470px;
position: relative;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/index.css">
<link rel="shortcut icon" href="styles/favicon.ico.png" />
<title>Tandoor</title>
</head>
<body>
<section id="video-wrapper">
<ul id="navbar">
<li id="menu-hover-roll" onmouseover="mouseOver()" onmouseout="mouseOut()">
Menu
<ul id="menu-roll">
<div id="design-line-menu-roll"></div>
<li>Polední menu</li>
<li>Jídelní lístek</li>
<li>Nápoje</li>
</ul>
</li>
</ul>
<video id="video" autoplay muted loop>
<source src="styles/720p.mp4" type="video/mp4">
</video>
<div id="menu-wrapper">
<div id="logo-wrapper">
<div id="h1-menu-tandoor">
<h1>Tandoor</h1>
</div>
<div id="h1-menu-restaurace">
<h1>Restaurace</h1>
</div>
<img src="styles/tndrlogo.jpg">
</div>
</div>
<div id="menu-roll">
<div id="design-line-menu-roll"></div>
<ul>
<li>
Polední menu
</li>
<li>
Menu
</li>
<li>
Nápojový lístek
</li>
</ul>
</div>
</section>
</body>
</html>
I have to make a slideshow of images based on my this jsfiddle. I need to have three more images just after this image which is already there in my jsfiddle. So I will have three more images and three dots at the bottom border of the image and if I click those dots, it should show other image and I want to keep BESPOKE INSURANCE SOLUTIONS text on top of my slideshow.
I tried integrating this w3schools example but my original jsfiddle is getting messed up and it is not working at all. Here is my updated jsfiddle and as you can see it is messed up. What is the best way to solve this?
Below is my code:
<div class="header">
<div class="header-background">
<img src="https://s4.postimg.org/yg8mjvsv1/image-home.png">
</div>
<div class="orange-bar">
<img class="orange-bar-image" src="https://s12.postimg.org/dmd7nd1dp/headline.png">
</div>
<div class="topnav">
<nav>
<ul>
<li class="home"><img src="https://s11.postimg.org/ywuxj79j7/logo.png" style="width:240px; height:53px;"></li>
</ul>
</nav>
</div>
<h1 class="text-inside-orange">BESPOKE INSURANCE SOLUTIONS</h1>
</div>
Here is my CSS:
.header {
position: relative;
height: 769px;
}
.header-background {
height: 769px;
width: 100%;
}
.orange-bar {
position: relative;
top: -430px;
left: -160px;
}
.topnav {
position: relative;
top: -890px;
background-color: rgba(0, 0, 0, 0.8);
height: 89px;
border-bottom: 3px solid #EF7440;
overflow: hidden;
}
.topnav ul>li {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
li.home {
position: relative;
right: 40px;
}
li.insurance {
margin-right: 80px;
margin-left: 80px;
left: 15px;
position: relative;
color: white;
font-family: AvantGarde;
letter-spacing: .30em;
}
li.login-signup {
font-style: italic;
font-size: 10px;
position: relative;
left: 20px;
top: 5px;
font-family: Adelle PE;
letter-spacing: .30em;
color: white;
}
li.get-covered {
border-color: #EF7440;
border-style: solid;
color: white;
top: 3px;
font-size: 12px;
position: relative;
left: 35px;
letter-spacing: .30em;
font-family: Adelle PE;
}
li.get-covered {
margin-top: 15px;
padding-bottom: 10px !important;
padding-top: 10px !important;
}
li.login-signup {
padding-top: 30px !important;
position: relative;
left: -35px;
}
li.insurance {
padding-top: 30px !important;
}
body {
border: 0;
margin: 0;
height: 100%;
min-height: 100%;
overflow-x: hidden;
}
.header h1 {
padding-left: 110px;
color: white;
text-align: center;
font-size: 25px;
left: -175px;
letter-spacing: .300em;
position: relative;
top: -613px;
font-family: "AvantGarde";
text-transform: uppercase;
}
This is my way. You should create a div contain BESPOKE INSURANCE SOLUTIONS, set position: absolute, align: top left. It's keep text no changes.
I am working on left sidebar on my HTML page. My left sidebar has few texts which if we click then they should drop down and show few other texts:
Here is my jsfiddle: https://jsfiddle.net/g2ahx6nq/40/
I have these below texts:
OUR DNA
PROGRAMS
RESEARCH
STORIES
So If I click any of the above texts on my left side bar it should drop down and show other texts belonging to them. Technically it should be like this image: https://s3.postimg.org/gbxn8hkf7/home1.png
As you can see in the left sidebar (in the above image), expanded versions of each of the above texts. I have to match the color and font as it is. Below is my HTML code for left bar navigation but somehow my click is not working at all and also not able to match the font and size as well. I am also missing the drop down arrow as well.
<div id="leftBar">
<br />
<svg id="clippedImg" width="0" height="0">
<clipPath id="clipPolygon">
<polygon points="1 100%,131 100%,130 0,0 0">
</polygon>
</clipPath>
</svg>
<nav>
<ul>
<li class="dropdown">
OUR DNA
<ul class="dropdown-content">
<li><i>RISK</i></li>
</ul>
</li>
<li class="dropdown">
PROGRAMS
<ul class="dropdown-content">
<li><i>PROFESSIONAL</i></li>
<li><i>ADVENTURE SPORT</i></li>
<li><i>ENTERTAINMENT</i></li>
<li><i>COLLEGIATE</i></li>
<li><i>INDIVIDUAL</i></li>
<li><i>COMMERCIAL</i></li>
</ul>
</li>
<li class="dropdown">
RESEARCH
<ul class="dropdown-content">
<li><i>CORPORATE SURVEY</i></li>
<li><i>INDIVIDUAL SURVEY</i></li>
</ul>
</li>
<li class="dropdown">
STORIES
</li>
</ul>
</nav>
</div>
And this is my CSS:
nav ul {
list-style-type:none;
margin:0;
padding:0;
}
nav ul li {
display:inline-block;
position:relative;
}
nav ul li a {
color: #fff;
text-decoration: none;
cursor: pointer;
padding: 10px 20px;
display: block;
width: 80px;
}
nav ul li a:hover {
background: #00648C;
}
ul.dropdown-content {
position: absolute;
display: none;
}
What is wrorng I am doing by which my click is not working? And how can we match the font, color as well?
Updated
Try this fiddle https://jsfiddle.net/jgf90mh9/18/
$(document).ready(function(){
$(".dropdown a").click(function(){
$(this).closest('.dropdown').find('.dropdown-content').slideToggle(200);
$(this).closest('.dropdown').siblings('.dropdown').find('.dropdown-content').slideUp(200);
});
});
Try giving the nav ul selector in the css a position and z-index, the 'top' element and img are on top of the list so you are not actualy clicking the list items.
css:
nav ul {
z-index:10;
position:absolute;
list-style-type:none;
margin:0;
padding:0;
}
I haven't fixed the style problems with the list though ;)
Update: also try to add this
nav{
height:auto;
}
and change this position to relative
ul.dropdown-content {
position: relative; //was absolute
display: none;
}
Edit: additional changes made
.dropdown-content li a{
font-size:11px;
}
*{
box-sizing:border-box; //using this on all elements, element size wont change when you set borders. giving a 2px border to a 150px div, the div will remain 150px. Same goes for paddings.
}
nav ul li {
display:inline-block;
position:relative;
width:100%; //makes sure the hover effect is the same width with all Li's
}
nav ul li a{
display:flex;
justify-content:space-between; //spreads the li's text and arrow, arrows on 1 line
}
#leftBar {
background-color: #030303;
box-shadow: 2.996px 0.157px 7.65px 1.35px rgba(40, 40, 41, 0.25);
border-right: solid #EF7440;
border-right-width: 4px;
top: 0px;
bottom: 0px;
left: 0px;
height: 2278px;
position: absolute;
width: 150px; //gives more space for the arrow next to text.
}
Because of z-index: 2 you've set in #clipimgA1 make your image overlap #leftBar div. You can not interact with #leftBar now since it is underneath of #clipimgA1 although you still can see it due to opacity: 0.5 you have set in #clipimgA1. I commented z-index: 2; opacity: 0.5 in #clipimgA1 and it now works as expected
$(document).ready(function(){
$(".dropdown").click(function(e){
e.preventDefault();
var $this = $(this).children(".dropdown-content");
$(".dropdown-content:visible").not($this).slideToggle(200); //Close submenu already opened
$this.slideToggle(200); //Open the new submenu
});
});
* {
margin: 0px;
}
body {
margin: 0px;
overflow-x: hidden;
}
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
td,
div,
ul,
li {
margin: 0px;
padding: 0px;
text-decoration: none;
list-style: none;
}
.login {
position: relative;
top: -50px;
z-index: 9999;
color: white;
text-decoration: none;
padding: 0 10px;
font-size: 13px;
}
.signup {
position: relative;
top: -50px;
z-index: 9999;
color: white;
text-decoration: none;
padding: 0;
font-size: 13px;
}
.above {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
position: relative;
z-index: 9999;
top: -60px;
padding: 0 5px;
}
.fa {
color: white;
margin: 5px;
}
img {
/* Set max width to be 100% of the containing element */
max-width: 100%;
max-height: 100%;
}
body .company-bio p {
font-family: 'agenda';
margin-bottom: 20px;
letter-spacing: .18em;
font-family: 'agenda';
font-weight: 400;
color: rgb(254, 254, 255);
}
div.company-bio {}
body .company-bio {
position: relative;
top: -42px;
padding-top: 40px;
margin-left: 131px;
/*Added Just now */
padding-bottom: 40px;
max-width: 100%;
background: url("https://s30.postimg.org/l04wudgs1/grey-bar.png");
padding-left: 140px;
padding-right: 155px;
font-size: 20px;
font-family: "Adelle PE";
}
.top h1 {
color: #f86d2c;
font-style: italic;
font-size: 37px;
}
.top p {
color: white !important;
background-color: black;
}
.mission-statements .programs {
position: relative;
top: 60px;
width: 300px;
border-style: solid;
border-width: 4px;
text-align: center;
font-size: 19px;
border-color: #EF7440;
padding: 25px;
margin: 25px;
margin-left: auto;
margin-right: auto;
text-shadow: 1.5px 2.598px 7.65px rgba(40, 40, 41, 0.16);
font-family: "adelle regular";
color: rgb(40, 40, 41);
line-height: 1.979;
}
.top h4 {
font-size: 25px;
font-family: "ITC Avant Garde Gothic";
color: rgb(255, 255, 255);
text-transform: uppercase;
line-height: 1.792;
text-align: left;
-moz-transform: matrix( 1.65479981820633, 0, 0, 1.66565153423699, 0, 0);
-webkit-transform: matrix( 1.65479981820633, 0, 0, 1.66565153423699, 0, 0);
-ms-transform: matrix( 1.65479981820633, 0, 0, 1.66565153423699, 0, 0);
position: absolute;
left: 684.247px;
top: 280.77px;
}
.top h2 {
position: absolute;
top: 320px;
left: 450px;
letter-spacing: .3em;
font-size: 22px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
color: rgb(255, 255, 255);
text-transform: uppercase;
line-height: 1.6;
text-align: center;
text-shadow: 0px 3px 6.37px rgba(40, 40, 41, 0.004);
}
body .northmanwild .title {
/* background-image:url(assets/img/Uploads/insta-pics.png); */
width: 100%;
padding-bottom: 40px;
padding-top: 40px;
text-align: center;
font-size: 37px;
margin-top: 0px !important;
margin-bottom: 0px !important;
font-family: "Adelle PE";
color: rgb(255, 255, 255);
font-weight: bold;
font-style: italic;
line-height: 1.979;
text-align: center;
/*text-shadow: 1.5px 2.598px 7.65px rgba(40, 40, 41, 0.5);
opacity: 100%;
fill: 57%;
*/
}
div.leftBar-bottom {
background-image: url("https://s17.postimg.org/yvv4w2gmn/nav-background.png");
float: left;
}
div.northmanwild {
margin-top: -2px;
width: 90.1%;
float: right;
opacity: 0.8;
margin-bottom: -7px;
}
body .footer {
width: 90.3%;
float: right;
color: rgb(40, 40, 41);
padding-top: 30px;
padding-bottom: 20px;
font-weight: normal;
background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url(assets/img/Uploads/footer-bg.png);
}
/*FIGURE OUT PROBLEM WITH MISSION STATEMENTS*/
body .mission-statements {
margin-left: 131px;
padding-bottom: 130px;
padding-left: 45px;
padding-right: 45px;
background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url(assets/img/Uploads/bg-trees.png);
}
body .mission-statements .why {
padding-top: 40px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
padding-bottom: 40px;
padding-left: 40px;
position: relative;
left: -40px;
top: 30px;
}
body .mission-statements .how {
padding-top: 40px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
padding-bottom: 10px;
padding-right: 40px;
}
body .mission-statements .what {
padding-top: 40px;
padding-bottom: 40px;
padding-left: 40px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
position: relative;
left: -40px;
top: 30px;
}
body .mission-statements .why pre {
padding-left: 40px;
}
body .mission-statements .how {
margin-top: 0px !important;
padding-right: 0px;
margin-bottom: 0px !important;
}
/*.top .imgB1
{
position: relative;
top: -225px;
}
*/
.top {
position: relative;
top: 0;
left: 0;
margin-bottom: -7px;
}
.imgA1 {
position: relative;
top: 0;
left: 0;
}
.clippedmain {
position: absolute;
top: 0;
left: 0;
}
#clippedImg {
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
#clipimgA1 {
/*Chrome,Safari*/
-webkit-clip-path: polygon(1px 100%, 131px 100%, 130px 0px, 0px 0px);
position: absolute;
top: 0;
left: 0;
/*z-index: 2;
opacity: 0.5;*/
}
/*Firefox*/
clip-path: url("#clipPolygon");
/* iOS support inline encoded svg file*/
-webkit-mask: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIwIiBoZWlnaHQ9IjAiPgogIDxjbGlwUGF0aCBpZD0ic3ZnQ2xpcCI+CiAgICA8cGF0aCBpZD0ic3ZnUGF0aCIgZD0iTTI1LDI1MCBMNzAsMjUwIDcxLDI4NSAyNjAsMjg1IDI2MSwyNTAgMTYwLDI1MCAxNjAsMTE1IDIyNSwxMTUgMjI1LDkwIDE2MCw5MCAxNjAsNzAgMjUsNzAgeiIvPgogIDwvY2xpcFBhdGg+CiAgPHBhdGggaWQ9InN2Z01hc2siIGQ9Ik0yNSwyNTAgTDcwLDI1MCA3MSwyODUgMjYwLDI4NSAyNjEsMjUwIDE2MCwyNTAgMTYwLDExNSAyMjUsMTE1IDIyNSw5MCAxNjAsOTAgMTYwLDcwIDI1LDcwIHoiICAvPgo8L3N2Zz4=) no-repeat;
}
.imgB1 {
position: absolute;
top: -65px;
left: 70px;
}
.footer .footer-section1 {
float: left;
width: 33%;
}
.footer .footer-section2 .block-title {
position: relative;
width: 338px;
left: -140px;
font-size: 16px !important;
font-family: "AvantGarde";
color: rgb(40, 40, 41);
/* font-style: italic; */
letter-spacing: 4px;
border-bottom: 2px solid #000000;
}
.footer .footer-section2 .block-content {
font-style: italic;
line-height: 1.52;
top: 18px;
left: 52px;
position: relative;
}
.footer .footer-section3 .block-content {
position: relative;
line-height: 1.52;
left: 12px;
letter-spacing: 4px;
top: 15px;
font-style: italic;
}
.footer .footer-section3 .block-title {
border-bottom: 2px solid #000000;
width: 60%;
left: 14px;
position: relative;
}
.footer .footer-section1 .block-content {
position: relative;
line-height: 1.52;
top: 67px;
left: 125px;
font-style: italic;
}
.footer .footer-section2 {
position: relative;
left: -89px;
}
.footer .footer-section2 {
float: left;
width: 33%;
}
.footer .footer-section3 {
float: left;
width: 33%;
}
.scroll-down {
opacity: 1;
-webkit-transition: all .5s ease-in 3s;
transition: all .5s ease-in 3s;
}
.scroll-down {
position: absolute;
bottom: 28px;
left: 55%;
margin-left: -16px;
display: block;
width: 32px;
height: 32px;
background-size: 14px auto;
border-radius: 50%;
z-index: 2;
-webkit-animation: bounce 2s infinite 2s;
animation: bounce 2s infinite 2s;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
.scroll-down:before {
position: absolute;
top: calc(50% - 8px);
left: calc(50% - 6px);
transform: rotate(-45deg);
display: block;
width: 12px;
height: 12px;
content: "";
border: 2px solid white;
border-width: 0px 0 2px 2px;
}
section.ok {
position: relative;
top: 2000px;
}
.copy-rights {
font-size: 16px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
position: relative;
top: 48px;
display: block;
font-size: 12px;
text-align: center;
color: rgb(40, 40, 41);
font-style: italic;
-moz-transform: matrix( 0.99963252426166, 0, 0, 0.99882633931212, 0, 0);
-webkit-transform: matrix( 0.99963252426166, 0, 0, 0.99882633931212, 0, 0);
-ms-transform: matrix( 0.99963252426166, 0, 0, 0.99882633931212, 0, 0);
font-style: normal;
}
#leftBar {
/*background-color: #030303;*/
box-shadow: 2.996px 0.157px 7.65px 1.35px rgba(40, 40, 41, 0.25);
border-right: solid #EF7440;
border-right-width: 4px;
top: 0px;
bottom: 0px;
left: 0px;
height: 2278px;
position: absolute;
width: 131px;
/*Commented today */
/* opacity: 0.5; */
}
/*
#holder {
width: 700px;
margin-left: 263px;
padding-left: 50px;
margin-top: 10px;
height: 100%;
float: right;
position: fixed;
}
*/
#font-face {
font-family: BEBAS;
src: url("http://webdesigncove.com/fonts/BEBAS___.ttf")
}
h1.logo {
font-size: 26px;
font-style: normal;
font-weight: normal;
letter-spacing: normal;
text-transform: uppercase;
line-height: 1.2em;
letter-spacing: -3px;
color: white;
text-align: center;
padding-top: 10px;
}
h1.postTitle {
font-family: BEBAS, Helvetica, Verdana, Sans-Serif;
}
p {
font-family: Helvetica, Arial, sans-serif;
font-size: 15px;
font-style: normal;
font-weight: normal;
letter-spacing: .28em;
line-height: 1.45em;
}
#navigation {
padding: 0;
margin: 0;
text-align: center;
position: relative;
z-index: 3;
}
#navigation li {
list-style-type: none;
margin-bottom: 5px;
}
#navigation a:link {
font-family: "ITC Avant Garde Gothic";
font-size: 15px;
font-style: normal;
}
#navigation a:visited {
color: rgb(255, 255, 255);
}
#navigation a:hover {
color: #FE5B1F;
}
.copy-right-text {
font: Bold 12px 'Open Sans';
color: #ffffff;
padding-top: 10px;
text-align: center;
}
nav ul {
list-style-type:none;
margin:0;
padding:0;
}
nav ul li {
display:inline-block;
position:relative;
}
nav ul li a {
color: #fff;
text-decoration: none;
cursor: pointer;
padding: 10px 20px;
display: block;
width: 80px;
}
nav ul li a:hover {
background: #00648C;
cursor: pointer;
}
ul.dropdown-content {
/*position: absolute;*/
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
<img id="clipimgA1" class="clippedmain" src="https://s28.postimg.org/tkwg9tmdp/homepage-image-1.png" alt="img">
<img class="imgA1" src="https://s28.postimg.org/tkwg9tmdp/homepage-image-1.png">
</div>
<div id="leftBar">
<br />
<svg id="clippedImg" width="0" height="0">
<clipPath id="clipPolygon">
<polygon points="1 100%,131 100%,130 0,0 0">
</polygon>
</clipPath>
</svg>
<nav>
<ul>
<li class="dropdown">
OUR DNA
<ul class="dropdown-content">
<li><i>RISK</i></li>
</ul>
</li>
<li class="dropdown">
PROGRAMS
<ul class="dropdown-content">
<li><i>PROFESSIONAL</i></li>
<li><i>ADVENTURE SPORT</i></li>
<li><i>ENTERTAINMENT</i></li>
<li><i>COLLEGIATE</i></li>
<li><i>INDIVIDUAL</i></li>
<li><i>COMMERCIAL</i></li>
</ul>
</li>
<li class="dropdown">
RESEARCH
<ul class="dropdown-content">
<li><i>CORPORATE SURVEY</i></li>
<li><i>INDIVIDUAL SURVEY</i></li>
</ul>
</li>
<li class="dropdown">
STORIES
</li>
</ul>
</nav>
</div>
<ul class="above">
<li><i class="fa fa-facebook-square"></i></li>
<li><i class="fa fa-twitter-square"></i></li>
<li><i class="fa fa-instagram"></i></li>
</ul>
<a class="login" href="#">Log In |</a>
<a class="signup" href="#">Sign Up</a>
<div class="leftBar-bottom">
</div>
<!-- End Side bar div-->
<div class="company-bio">
<p align="center" style="font-family: Adelle PE">Hello World </p>
<p align="center" style="font-family: Adelle PE">Nice Text! </p>
<p align="center">Hello David</p>
</div>
Updated: I've commented position: absolute from
ul.dropdown-content {
/*position: absolute;*/
display: none;
}
and it instantly achieves some effects you wanted
So i am slightly new to JS and jQuery, but i know html and css very well. I want to know if this is possible to do.
I have some HTML code for a nav in an info area. I have it all set up and I have it so it calls a function on mouseover, this function turns the color of the link to white. And for mouseout it turns it black again. Now I know you can probably do this with css but I need the practice for Js/jQuery. I wrote some code and it works and all but instead it colors all the colors white and it blends in, test the code and you will see. Is there a way to only choose the selected button and color only that one. maybe with an array or something?? I dont really need to know if there is a way to do it with css, i just need to get into the habit of using js/jQuery.
Code:
function colorLink() {
$(".infoNav nav ul li a").css("color", "white");
}
function colorLinkOut() {
$(".infoNav nav ul li a").css("color", "black");
}
* {
margin: 0px;
padding: 0px;
}
.header-wrap {
position: fixed;
}
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: transparent;
}
body {
background: #CCC;
width: 70%;
margin-left: 20%;
margin-top: 0px;
height: 900px;
}
.mainHeader {
padding: 0;
background: #666;
height: 36px;
width: 100%;
border-radius: 5px;
position: relative;
top: 150px;
left: -70px;
box-shadow: 10px 10px 10px #767373;
}
.mainHeader nav ul li {
display: inline-block;
list-style: none;
margin: 10px 0px 0px -30px;
margin-left: 15px;
position: relative;
top: -128px;
left: 10px;
}
.mainHeader nav ul li a {
text-decoration: none;
border-radius: 3px;
color: white;
padding: 7px 20px 10px 20px;
margin-right: -15px;
font-family: 'Eras ITC';
}
.mainHeader nav ul li a:hover {
background: #f18529;
}
.mainHeader nav ul .active {
background: #f18529;
}
.mainInfo {
background: white;
height: 500px;
width: 100%;
position: relative;
top: 200px;
left: -70px;
border-radius: 5px;
box-shadow: 10px 10px 10px #727272;
}
.mainInfo .miInfo p {
font-family: Arial;
padding: 10px 10px 10px 10px;
text-align: left;
}
.mainHeader .logoArea p {
position: relative;
top: -100px;
}
.mainHeader .logoArea img {
position: relative;
top: -130px;
left: 130px;
}
.infoNav nav ul li {
list-style: none;
border: 2px solid black;
padding: 30px;
border-radius: 20px;
width: 140px;
text-align: center;
margin-top: 30px;
position: relative;
left: 35%;
}
.infoNav nav ul li:hover {
background: #f18529;
color: white;
}
.infoNav nav ul li a {
text-decoration: none;
color: black;
font-family: Broadway;
font-size: 30px;
}
#media only screen and (min-width: 150px) and (max-width: 600px) {
body {
width: 100%;
}
.mainHeader {
padding: 0;
background: #666;
height: 70px;
width: 80%;
border-radius: 5px;
position: relative;
top: 150px;
left: -70px;
list-style-type: none;
}
.mainHeader nav ul li {
text-align: center;
height: 100%;
word-break: break-all;
}
.mainHeader nav ul li a {
width: 100%;
height: 20px;
padding: 10px 5px;
display: inline-block;
margin: 10px;
}
.mainInfo {
background: white;
height: 300px;
width: 80%;
position: relative;
top: 200px;
left: -70px;
border-radius: 5px;
box-shadow: 10px 10px 10px #727272;
}
.mainInfo .miInfo {}
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="Script.js"></script>
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
<meta charset="utf-8" />
<title>Website</title>
</head>
<body class="body">
<header class="mainHeader">
<div class="logoArea">
<img alt="logo" src="logo.jpg" width="250px" height="120px">
</div>
<nav>
<ul>
<li><a class="active" href="Index.html">Home<br/></a>
</li>
<li>About<br/>
</li>
<li>Random
</li>
</ul>
</nav>
</header>
</div>
<div class="mainInfo">
<div class="miInfo">
<p>Please choose one of the catagories below:)</p>
<div class="infoNav">
<nav>
<ul>
<li onmouseover="colorLink()" onmouseout="colorLinkOut()">Home<br/>
</li>
<li onmouseover="colorLink()" onmouseout="colorLinkOut()">About<br/>
</li>
<li onmouseover="colorLink()" onmouseout="colorLinkOut()">Random
</li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
Use hover
function colorLink(){
$(this).find("a").css("color", "red");
}
function colorLinkOut(){
$(this).find("a").css("color", "green");
}
$('.infoNav nav li').hover(colorLink, colorLinkOut);
*{margin: 0px;
padding: 0px;}
.header-wrap{
position: fixed;
}
.fixed{
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: transparent;
}
body{
background:#CCC;
width: 70%;
margin-left: 20%;
margin-top: 0px;
height: 900px;
}
.mainHeader{
padding: 0;
background:#666;
height:36px;
width:100%;
border-radius: 5px;
position: relative;
top: 150px;
left: -70px;
box-shadow: 10px 10px 10px #767373;
}
.mainHeader nav ul li{
display:inline-block;
list-style:none;
margin: 10px 0px 0px -30px;
margin-left: 15px;
position: relative;
top: -128px;
left: 10px;
}
.mainHeader nav ul li a{
text-decoration: none;
border-radius: 3px;
color: white;
padding: 7px 20px 10px 20px;
margin-right: -15px;
font-family: 'Eras ITC';
}
.mainHeader nav ul li a:hover{
background: #f18529;
}
.mainHeader nav ul .active {
background: #f18529;
}
.mainInfo{
background:white;
height: 500px;
width: 100%;
position: relative;
top: 200px;
left: -70px;
border-radius: 5px;
box-shadow: 10px 10px 10px #727272 ;
}
.mainInfo .miInfo p{
font-family: Arial;
padding: 10px 10px 10px 10px;
text-align: left;
}
.mainHeader .logoArea p{
position: relative;
top: -100px;
}
.mainHeader .logoArea img{
position: relative;
top: -130px;
left: 130px;
}
.infoNav nav ul li{
list-style: none;
border: 2px solid black;
padding: 30px;
border-radius: 20px;
width: 140px;
text-align: center;
margin-top: 30px;
position: relative;
left: 35%;
}
.infoNav nav ul li:hover{
background: #f18529;
color: white;
}
.infoNav nav ul li a{
text-decoration: none;
color: black;
font-family: Broadway;
font-size:30px;
}
#media only screen and (min-width: 150px) and (max-width: 600px) {
body{
width: 100%;
}
.mainHeader{
padding: 0;
background:#666;
height:70px;
width:80%;
border-radius: 5px;
position: relative;
top: 150px;
left: -70px;
list-style-type: none;
}
.mainHeader nav ul li{
text-align: center;
height: 100%;
word-break: break-all;
}
.mainHeader nav ul li a{
width: 100%;
height: 20px;
padding: 10px 5px;
display: inline-block;
margin: 10px;
}
.mainInfo{
background:white;
height: 300px;
width:80%;
position: relative;
top: 200px;
left: -70px;
border-radius: 5px;
box-shadow: 10px 10px 10px #727272;
}
.mainInfo .miInfo{
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="body">
<header class="mainHeader">
<div class="logoArea">
<img alt="logo" src="logo.jpg" width="250px" height="120px">
</div>
<nav><ul>
<li><a class="active" href="Index.html">Home<br/></a></li>
<li>About<br/></li>
<li>Random</li>
</ul></nav>
</header>
</div>
<div class="mainInfo">
<div class="miInfo">
<p>Please choose one of the catagories below:)</p>
<div class="infoNav">
<nav><ul>
<li>Home<br/></li>
<li>About<br/></li>
<li>Random</li>
</ul></nav>
</div>
</div>
</div>
</body>
Yes there is a way, but if you are using jQuery you'd be better hooking to the events in a jQuery way, so remove those onmouseover="colorLink()" and onmouseout="colorLinkOut()" from the html and replace your javascript for
$(function(){
$(".infoNav li").mouseover(function(){
$(this).find("a").css("color", "white");
});
$(".infoNav li").mouseout(function(){
$(this).find("a").css("color", "black");
});
});
by hooking through jQuery instead of plain javascript you can now use the "this" keyword as a reference to the element that generated the event, that's why $(this) works here, but would not work your previous code.
http://jsfiddle.net/mtd4ouj3/3/