i get this horizonatal scroll bar when i add my content to my "section3__container" container even if they are small in size . I have tried alot of things like overFlow hidden overflow-x hidden reducing size of content but the horizontal bar keeps appearing. i need help to remove this horizontal scroll bar.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="/static/styles/style.css" type="text/css">
<link rel='icon' href='/static/images/logo.jpeg' type='image/x-icon'/>
</head>
<body>
<div id="container">
<div id="container__section1">
<nav id="container__section1__destopNav">
chinaza
<ul>
<li class="navItem" ><span id="active"></span> Home</li>
<li class="navItem"><span></span>About</li>
<li class="navItem"><span></span>skill</li>
<li class="navItem"><span></span>Service</li>
<li class="navItem"><span></span>Project</li>
<li class="navItem"><span></span>Contact</li>
<li class="navItem"><a href=""><i class="fa fa-moon-o" aria-hidden="true"></i>
</a></li>
</ul>
</nav>
<nav id="container__section1__mobilepNav">
<ul id="container__section1__mobilepNav__container">
<li id="container__section1__mobilepNav__container__1">chinaza</li>
<li id="container__section1__mobilepNav__container__2">
<ul id="container__section1__mobilepNav__container__2_1">
<li id="theme">
<i class="fa fa-moon-o" aria-hidden="true"></i>
</li>
<li id="menu">
<i class="fa fa-bars" aria-hidden="true"></i>
</li>
<ul id="menu_content">
<li class="navItem"><span></span> Home</li>
<li class="navItem"><span></span>About</li>
<li class="navItem"><span></span>skill</li>
<li class="navItem"><span></span>Service</li>
<li class="navItem"><span></span>Project</li>
<li class="navItem"><span></span>Contact</li>
</ul>
</ul>
</li>
</ul>
</nav>
</div>
<div id="section2" >
<ul id="section2__container">
<li id="section2__container__text" class="section2__container__class">
<ul id="section2__container__text__container">
<li>
<ul id="section2__container__text__container__textContainer__socialMedia">
<li><i class="fa fa-github" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin-square" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter-square" aria-hidden="true"></i></li>
</ul>
</li>
<li id="section2__container__text__container__textContainer">
<h1>Hi, Am Chinaza</h1>
<h4>Frontend developer </h4>
<p> high level experience in web
design and development knowledge,
producing quality work
</p>
<div id="section2__container__text__container__textContainer__container">Contact me</div>
</li>
</ul>
</li>
<li id="section2__containerImage" class="section2__container__class">
<div id="section2__containerImage__container1" class="section2__containerImage__containers">
<div id="section2__containerImage__container2" class="section2__containerImage__containers">
<img src="static/images/about3.svg " alt="">
</div>
</div>
</li>
</ul>
</div>
<div id="section3">
<h1 id="section3__about">About me</h1>
<h4 id="section3_introduction">My introduction</h4>
<ul id="section3__container">
<li id="section3__container__1" class="section3__container__items">
<img src="static/images/undraw_Developer_activity_re_39tg.svg" alt="">
</li>
<li id="section3__container__2" class="section3__container__items">
<p>web developer, with extensive knowledge
and years of experience, working in web
technology and UI/Ux design, delivering quality
work.
</p>
<ul id="section3__container__2__container">
<li>
<h1>3 +</h1>
<p>Years experinece</p>
</li>
<li>
<h1>3</h1>
<p>Completed project</p>
</li>
<li>
<h1>1</h1>
<p>Companies worked</p>
</li>
</ul>
<div id="section3__container__2__download">
Download <i class="fa fa-arrow-circle-down" aria-hidden="true"></i>
</div>
</li>
</ul>
</div>
</div>
<script src="/static/home.js"></script>
</body>
</html>
$navFontSize: 18px;
$navcolor:black;
$maincolour: rgb(54, 54, 168);
$fadeAsh:rgb(114, 112, 112);
$minwidth:290px;
$h1FontSize:40px;
$h4FontSize:20px;
$h1FontSizeMobile:30px;
$h4FontSizeMobile:20px;
$paragraph:23px;
#mixin button {
width: 170px;
height: 45px;
text-align: center;
line-height: 45px;
margin-top: 40px;
a{
text-decoration: none;
display: inline-block;
width: 100%;
height: 100%;
font-size: 20px;
border: 2px solid $maincolour;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
background-color: rgb(236, 232, 247);
transition: background-color 1s;
}
&:hover a{
background-color: $maincolour;
color: white;
border: none;
}
}
*{
margin: 0;
padding: 0;
}
#container{
width: 100vw;
height: 100vh;
}
#container__section1{
width: 100%;
height: 80px;
z-index: 2000;
#container__section1__destopNav{
width:100%;
height: 100px;
position: fixed;
z-index: 200;
#logo{
text-decoration: none;
padding: 30px;
line-height: 30px;
color: $navcolor;
font-size:25px;
}
ul{
display: flex;
flex-direction: row;
text-align: center;
margin: 0 auto;
width: 600px;
list-style: none;
justify-content: space-evenly;
li{
position: relative;
padding: 9px;
span{
position: absolute;
bottom: 0;
left: 0;
height: 0px;
width: 0;
transition: width 2s height 4s;
background-color: rgb(54, 54, 168);
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
#active{
height: 3px;
width: 100%;
background-color: $maincolour;
}
a{
text-decoration: none;
font-size: $navFontSize;
color: $navcolor;
width: 100%;
padding: 5px;
}
}
li:hover span{
height: 3px;
width: 100%;
background-color: rgb(81, 100, 209);
}
}
}
}
#section2{
width: 100%;
height: auto;
z-index: -1;
margin-top: 70px;
min-width: $minwidth;
#section2__container{
width: 85%;
display: flex;
flex-wrap: wrap-reverse;
list-style: none;
margin: 0;
padding: 0;
margin: 0 auto;
justify-content: space-evenly;
height: 100%;
.section2__container__class{
list-style: none;
height: 400px;
.section2__containerImage__containers{
margin-top: 40px;
width: 270px;
height: 270px;
}
#section2__containerImage__container1{
position: relative;
transform: translateY(4px) rotateZ(-5deg);
background-color: #3636a8;
margin: 0 auto;
}
#section2__containerImage__container2{
position: absolute;
bottom: 0;
transform: translateY(4px) rotateZ(5deg);
img{
width: 100%;
height: 100%;
}
}
}
#section2__container__text #section2__container__text__container{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
margin: 0;
padding: 0;
list-style: none;
height: 100%;
#section2__container__text__container__textContainer__socialMedia{
flex: 1;
width: 100px;
height: 200px;
list-style: none;
vertical-align : middle;
margin-top: 90px;
padding: 0;
padding-right: 30px;
li{
padding-top: 25px;
font-size: 20px;
color:rgb(54, 54, 168);
}
}
#section2__container__text__container__textContainer{
flex: 2;
h1{
font-size: $h1FontSize;
margin-top: 20px;
}
h4{
color: $fadeAsh;
font-size: 23px;
margin-top: 15px;
}
p{
color: $fadeAsh;
margin-top: 15px;
width: 330px;
font-size: 20px;
}
#section2__container__text__container__textContainer__container{
#include button()
}
}
}
}
}
#section3{
width: 100%;
overflow-x: hidden;
#section3__about{
overflow-x: hidden;
text-align: center;
font-size: $h1FontSize;
}
#section3_introduction{
text-align: center;
color:$fadeAsh;
font-size: $h4FontSize;
margin-top: 25px;
}
#section3__container{
display: flex;
flex-wrap: wrap;
width: 80%;
margin: 0 auto;
height: fit-content;
list-style: none;
margin-top: 60px;
#section3__container__1{
text-align: center;
img{
width: 314px;
height: 314px;
}
}
.section3__container__items{
flex: 1;
}
#section3__container__2 {
p{
width: 70%;
color: $fadeAsh;
font-size: $paragraph;
}
#section3__container__2__container{
list-style: none;
display: flex;
flex-wrap: nowrap;
margin-top: 30px;
width: 85%;
li{
text-align: center;
width: 100%;
}
li h1{
text-align: center;
}
}
#section3__container__2__download{
#include button()
}
}
}
}
#container__section1__mobilepNav{
display: none;
}
#media(max-width:1024px){
#container{
height: 100%;
}
#container__section1__destopNav{
display: none;
}
#container__section1__mobilepNav{
display:inline-block;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 65px;
box-shadow:0px 4px 20px rgb(189, 188, 188);
z-index: 1;
#container__section1__mobilepNav__container{
height: 60px;
box-shadow:0px 4px 20px rgb(189, 188, 188);
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
padding-top: 20px;
background-color: white;
li{
width: 100px;
}
li #logo2{
text-decoration: none;
font-size:20px;
padding-left: 20px;
}
#container__section1__mobilepNav__container__1{
text-align: left;
}
#container__section1__mobilepNav__container__2{
#container__section1__mobilepNav__container__2_1{
display: flex;
list-style: none;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
width: 100px;
#menu_content{
position: absolute;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
width:0%;
padding-top: 46px;
height:0rem;
top: -173px;
left: 0;
transition: width 2s height 4s;
list-style: none;
height:9rem;
width:100%;
display: none;
:nth-child(2){
text-align: left;
}
.navItem a{
text-decoration: none;
}
}
#menu{
&:hover + #menu_content{
height:9rem;
width:100%;
display: block;
display: flex;
justify-content: space-around;
}
}
}
}
}
}
#section2{
margin-top: 0px;
#section2__container{
width: 100%;
.section2__container__class{
.section2__containerImage__containers{
margin-top: 40px;
width: 210px;
height: 210px;
}
}
}
}
#section3{
#section3__about{
font-size:$h1FontSizeMobile;
}
#section3__container{
width: 100%;
#section3__container__1{
text-align: center;
img{
width: 210px;
height: 210px;
}
}
}
#section3__container #section3__container__2{
text-align: center;
p{
width: 90%;
margin: 0 auto;
}
#section3__container__2__container{
width: 100%;
}
#section3__container__2__download{
margin: 0 auto;
margin-top: 40px;
}
}
}
}
#media(max-width:690px){
#section2__container__text{
width: 100%;
min-width:$minwidth;
}
#section2__containerImage{
position: relative;
}
#section2__container__text__container__textContainer__socialMedia{
position: absolute;
top: 50px;
}
#section2 #section2__container #section2__container__text #section2__container__text__container
{
width: 90%;
margin: 0 auto;
}
#section2 #section2__container #section2__container__text #section2__container__text__container
#section2__container__text__container__textContainer{
margin: 0 auto;
p{
width: 90%;
}
h1{
font-size: 30px;
}
}
#section2 #section2__container .section2__container__class{
height: 300px;
}
}```
body {
overflow-x: hidden; /* Hide horizontal scrollbar */
}
Resource: W3Schools
Related
How to style my progress bar so it looks like the design? I tried to moved the text but they keep staying in the circle. Also not sure how to create the circle within another circle dot with css. It should be non clcikable. Here is the css and html files. Also not sure how to let active/finished steps be in a tick icon.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>XXXXXX</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div id="progress">
<div id="progress-bar"></div>
<ul id="progress-text">
<li class="step active">1</li>
<li class="step">2</li>
<li class="step">3</li>
<li class="step">4</li>
<li class="step">5</li>
</ul>
</div>
<button id="progress-prev" class="btn" disabled>Prev</button>
<button id="progress-next" class="btn">Next</button>
<script src="./bar script.js"></script>
</body>
</html>
--------------------- css file
#progress {
position: relative;
margin-bottom: 30px;
}
#progress-bar {
position: absolute;
background: #4584ff;
height: 5px;
width: 0%;
top: 50%;
left: 0;
}
#progress-text {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
}
#progress-text::before {
content: "";
background-color: lightgray;
position: absolute;
top: 50%;
left: 0;
height: 5px;
width: 100%;
z-index: -1;
}
#progress-text .step {
border: 3px solid lightgray;
border-radius: 100%;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
background-color: #fff;
font-family: sans-serif;
font-size: 14px;
position: relative;
z-index: 1;
}
#progress-text .step.active {
border-color: #4584ff;
background-color: #4584ff;
color: #fff;
}
.btn {
background: lightgray;
border: none;
border-radius: 3px;
padding: 6px 12px;
}
Here is the reference picture
I hope that's what you meant
#progress {
position: relative;
margin-bottom: 30px;
}
#progress-bar {
position: absolute;
background: #4584ff;
height: 5px;
width: 0%;
top: 50%;
left: 0;
}
#progress-text {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
}
#progress-text::before {
content: "";
background-color: lightgray;
position: absolute;
top: 50%;
left: 0;
height: 5px;
width: 100%;
z-index: -1;
}
#progress-text .step {
border: 3px solid lightgray;
border-radius: 100%;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
background-color: #fff;
font-family: sans-serif;
font-size: 14px;
position: relative;
z-index: 1;
}
#progress-text .step.active {
border-color: #4584ff;
background-color: #4584ff;
color: #4584ff;
}
.btn {
background: lightgray;
border: none;
border-radius: 3px;
padding: 6px 12px;
}
/* added css */
#progress-text .step {
display:flex;
justify-content:center;
}
#progress-text .step label{
margin-top:120%;
font-size:.7rem;
font-weight:bold;
font-color:inherit;
}
#progress-text .step.active::after {
content:"✓";
color:#fff;
z-index:2;
position:absolute;
top:2px;
left:8px;
font-size:12px;
font-weight:bold;
}
#progress-text .step.progress{
border-color:#4584ff;
}
#progress-text .step.progress::after{
content:"•";
transform:scale(3);
position:absolute;
left:10px;
top:1.5px;
color:#4584ff;
}
#progress-text .step.progress label{
color:#4584ff;
}
<div id="progress">
<div id="progress-bar"></div>
<ul id="progress-text">
<li class="step active">
<label>Review</label>
</li>
<li class="step active">
<label>Assignment</label>
</li>
<li class="step progress">
<label>Investigation</label>
</li>
<li class="step">
<label>Handling</label>
</li>
<li class="step">
<label>Resolution</label>
</li>
</ul>
</div>
<button id="progress-prev" class="btn" disabled>Prev</button>
<button id="progress-next" class="btn">Next</button>
I am Currently having trouble making my website responsive. To explain clearly the problem, Currently, the website is following the width of the tab, however, the problem arises that the text does not follow along and it overlays the images placed in the boxes.
Help would be greatly appreciated!
#import url("https://fonts.googleapis.com/css2?family=Nunito:wght#200;300;400;600&display=swap");
*{
font-family: 'Nunito', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav{
background: #1b1b1b;
}
nav:after{
content: '';
clear: both;
display: table;
}
nav .logo{
float: left;
color: white;
font-size: 27px;
line-height: 70px;
padding-left: 60px;
}
nav ul{
display: flex;
justify-content: center;
align-items: center;
list-style: none;
float: right;
margin-right: 40px;
}
nav ul li{
display: inline-block;
background: #1b1b1b;
margin: 0 5px;
}
nav ul li a{
color: white;
text-decoration: none;
line-height: 70px;
font-size: 18px;
padding: 8px 15px;
}
nav ul li a:hover{
color: cyan;
}
nav ul ul li a:hover{
color: cyan;
box-shadow: none;
}
nav ul ul{
position: absolute;
top: 90px;
opacity: 0;
visibility: hidden;
transition: top .3s;
}
.background{
background-color: #212529;
width: 100%;
height: 200px;
position: relative;
}
.overlay{
width: 100%;
height: 100%;
color: white;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
position: relative;
left: -30%;
}
.overlay h3{
margin-bottom: 20px;
color: crimson;
font-size: 20px;
}
.overlay p{
font-size: 35px;
}
.main h1{
display: flex;
text-align: center;
justify-content: center;
margin-top: 20px;
font-size: 50px;
}
.text{
width: 50%;
height: 50px;
padding-top: 20px;
white-space: initial;
margin: 0 auto;
word-wrap: break-word;
}
body{
margin: 0;
font-family: sans-serif;
}
.section{
background-color: #F5F5F5;
display: flex;
justify-content: space-between;
padding: 40px;
width: 80%;
margin-top: 50px;
float: left;
}
.section img{
height: 250px;
}
.section h1{
margin-left: 100px;
color: black;
}
.section p{
margin-left: 100px;
width: 55%;
height: 50px;
white-space: initial;
margin-left: 100px;
margin-top: 20px;
word-wrap: break-word;
}
.section2{
background-color: #F5F5F5;
display: flex;
justify-content: space-between;
padding: 40px;
width: 80%;
margin-top: 50px;
float: right;
}
.section2 img{
height: 250px;
}
.section2 h1{
margin-left: 100px;
color: black;
}
.section2 p{
margin-left: 100px;
width: 55%;
height: 50px;
white-space: initial;
margin-left: 100px;
margin-top: 20px;
word-wrap: break-word;
}
.section2 sup{
font-size: 10px;
opacity: 0.5;
}
.section3{
background-color: #F5F5F5;
display: flex;
justify-content: space-between;
padding: 40px;
width: 80%;
margin-top: 50px;
float: left;
}
.section3 img{
height: 250px;
}
.section3 h1{
margin-left: 100px;
color: black;
}
.section3 sup{
font-size: 10px;
opacity: 0.5;
}
.section3 p{
margin-left: 100px;
width: 55%;
height: 50px;
white-space: initial;
margin-left: 100px;
margin-top: 20px;
word-wrap: break-word;
}
.section4{
background-color: #F5F5F5;
display: flex;
justify-content: space-between;
padding: 40px;
width: 80%;
margin-top: 50px;
float: right;
}
.section4 img{
height: 250px;
}
.section4 h1{
margin-left: 100px;
color: black;
}
.section4 p{
margin-left: 100px;
width: 55%;
height: 50px;
white-space: initial;
margin-left: 100px;
margin-top: 20px;
word-wrap: break-word;
}
.footer{
background-color: #000;
padding: 40px;
clear: both;
}
.footer .social{
text-align: center;
padding-bottom: 25px;
color:#4b4c4d;
}
.footer .social a{
display: inline-block;
height: 40px;
width: 40px;
background: #424242;
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color:#ffffff;
transition: all 0.5s ease;
}
.footer .social a:hover{
color:#24262b;
background-color: #ffffff;
}
.footer ul{
margin-top: 0;
padding: 0;
list-style: none;
font-size: 18px;
line-height: 1.6;
margin-bottom: 0;
text-align: center;
}
.footer ul li a{
color:#fff;
text-decoration: none;
}
.footer ul li{
display: inline-block;
padding: 0 15px;
}
.footer .copyright{
margin-top: 15px;
text-align: center;
font-size: 20px;
color:#fff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../CSSFolder/Class2.css">
</head>
<body>
<nav>
<div class="logo">Revolutionary Fitness</div>
<ul>
<div class="items">
<li>Home</li>
<li>Classes</li>
<li>Products</li>
<li>Login</li>
<li>Feedback</li>
</div>
</ul>
</nav>
<div class="background">
<div class="overlay">
<h3>Classes</h3>
<p>Insert Something Here...</p>
</div>
</div>
<div class="main">
<h1>Classes, coaches and community</h1>
<div class="text">
<p>At Virgin Active, we do health and fitness differently.
We have expertly crafted exercise experiences that are the perfect blend of intelligent programming and feel-good movement.
We've got everything from Yoga to HIIT, so you can move your body any way you want.
</p>
</div>
</div>
<div class="section">
<img src="../ImageFolder/Yoga.jpg" alt="Yoga">
<div class="ClassText">
<h1>Yoga</h1>
<p>
Choose from Classes with dynamism,energy and athleticism, to an authentic and peaceful experience.
<br><br>
Classes include: Align,Flow,Calm,SkyPark Yoga
<br><br>
Sign Up<span> to book this class</span>
</p>
</div>
</div>
<div class="section2">
<div class="ClassText">
<h1>Cycle</h1>
<p>
Custom designed bikes, choreographed lighting and fresh daily beats to inspire you for every ride
<br><br>
Classes include: Cycle Spirit, Cycle Burn, RPM<sup>TM</sup>, THE TRIP<sup>TM</sup>
<br><br>
Sign Up<span> to book this class</span>
</p>
</div>
<img src="../ImageFolder/Cycle.jpg" alt="Cycle">
</div>
<div class="section3">
<img src="../ImageFolder/Les.jpg" alt="Les">
<div class="ClassText">
<h1>Les Mils<sup>TM</sup></h1>
<p>
Mixing the hottest music with cutting edge-exercise science, motivation and the
energy of many, Les Mills<sup>TM</sup> group fitness classes make you fall in love with fitness
Discover our range of world-class group fitness workouts below.
<br><br>
Classes include: BodyPump<sup>TM</sup>,BodyCombat<sup>TM</sup>,THETRIP<sup>TM</sup>
<br><br>
Sign Up<span> to book this class</span>
</p>
</div>
</div>
<div class="section4">
<div class="ClassText">
<h1>Reformer Pilates</h1>
<p>
Hundreds of Reformer classes on offer from morning to night.
<br><br>
Classes include: Beginner,Intermediate
<br><br>
Sign Up<span> to book this class</span>
</p>
</div>
<img src="../ImageFolder/Reformer.jpg" alt="Reformer">
</div>
<footer class="footer">
<div class="social">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-whatsapp"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<ul class="list">
<li>About Us</li>
<li>Contact Us</li>
<li>FAQs</li>
</ul>
<p class="copyright">
<small>©2022 Revolutionary Fitness</small>
</p>
</footer>
</body>
</html>
Use flexbox in .background also remove left & width from .overlay.
#import url("https://fonts.googleapis.com/css2?family=Nunito:wght#200;300;400;600&display=swap");
* {
font-family: 'Nunito', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
background: #1b1b1b;
}
nav:after {
content: '';
clear: both;
display: table;
}
nav .logo {
float: left;
color: white;
font-size: 27px;
line-height: 70px;
padding-left: 60px;
}
nav ul {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
float: right;
margin-right: 40px;
}
nav ul li {
display: inline-block;
background: #1b1b1b;
margin: 0 5px;
}
nav ul li a {
color: white;
text-decoration: none;
line-height: 70px;
font-size: 18px;
padding: 8px 15px;
}
nav ul li a:hover {
color: cyan;
}
nav ul ul li a:hover {
color: cyan;
box-shadow: none;
}
nav ul ul {
position: absolute;
top: 90px;
opacity: 0;
visibility: hidden;
transition: top .3s;
}
.background {
background-color: #212529;
width: 100%;
height: 200px;
position: relative;
/* USE FLEXBOX */
display: flex;
align-items: center;
justify-content: flex-start;
/* ADD SOME PADDING FOR BETTER UI */
padding-inline: 16px; /* LEFT and Right */
}
.overlay {
height: 100%;
color: white;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
position: relative;
}
.overlay h3 {
margin-bottom: 20px;
color: crimson;
font-size: 20px;
}
.overlay p {
font-size: 35px;
}
.main h1 {
display: flex;
text-align: center;
justify-content: center;
margin-top: 20px;
font-size: 50px;
}
.text {
width: 50%;
height: 50px;
padding-top: 20px;
white-space: initial;
margin: 0 auto;
word-wrap: break-word;
}
body {
margin: 0;
font-family: sans-serif;
}
.section {
background-color: #F5F5F5;
display: flex;
justify-content: space-between;
padding: 40px;
width: 80%;
margin-top: 50px;
float: left;
}
.section img {
height: 250px;
}
.section h1 {
margin-left: 100px;
color: black;
}
.section p {
margin-left: 100px;
width: 55%;
height: 50px;
white-space: initial;
margin-left: 100px;
margin-top: 20px;
word-wrap: break-word;
}
.section2 {
background-color: #F5F5F5;
display: flex;
justify-content: space-between;
padding: 40px;
width: 80%;
margin-top: 50px;
float: right;
}
.section2 img {
height: 250px;
}
.section2 h1 {
margin-left: 100px;
color: black;
}
.section2 p {
margin-left: 100px;
width: 55%;
height: 50px;
white-space: initial;
margin-left: 100px;
margin-top: 20px;
word-wrap: break-word;
}
.section2 sup {
font-size: 10px;
opacity: 0.5;
}
.section3 {
background-color: #F5F5F5;
display: flex;
justify-content: space-between;
padding: 40px;
width: 80%;
margin-top: 50px;
float: left;
}
.section3 img {
height: 250px;
}
.section3 h1 {
margin-left: 100px;
color: black;
}
.section3 sup {
font-size: 10px;
opacity: 0.5;
}
.section3 p {
margin-left: 100px;
width: 55%;
height: 50px;
white-space: initial;
margin-left: 100px;
margin-top: 20px;
word-wrap: break-word;
}
.section4 {
background-color: #F5F5F5;
display: flex;
justify-content: space-between;
padding: 40px;
width: 80%;
margin-top: 50px;
float: right;
}
.section4 img {
height: 250px;
}
.section4 h1 {
margin-left: 100px;
color: black;
}
.section4 p {
margin-left: 100px;
width: 55%;
height: 50px;
white-space: initial;
margin-left: 100px;
margin-top: 20px;
word-wrap: break-word;
}
.footer {
background-color: #000;
padding: 40px;
clear: both;
}
.footer .social {
text-align: center;
padding-bottom: 25px;
color: #4b4c4d;
}
.footer .social a {
display: inline-block;
height: 40px;
width: 40px;
background: #424242;
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer .social a:hover {
color: #24262b;
background-color: #ffffff;
}
.footer ul {
margin-top: 0;
padding: 0;
list-style: none;
font-size: 18px;
line-height: 1.6;
margin-bottom: 0;
text-align: center;
}
.footer ul li a {
color: #fff;
text-decoration: none;
}
.footer ul li {
display: inline-block;
padding: 0 15px;
}
.footer .copyright {
margin-top: 15px;
text-align: center;
font-size: 20px;
color: #fff;
}
<nav>
<div class="logo">Revolutionary Fitness</div>
<ul>
<div class="items">
<li>Home</li>
<li>Classes</li>
<li>Products</li>
<li>Login</li>
<li>Feedback</li>
</div>
</ul>
</nav>
<div class="background">
<div class="overlay">
<h3>Classes</h3>
<p>Insert Something Here...</p>
</div>
</div>
<div class="main">
<h1>Classes, coaches and community</h1>
<div class="text">
<p>At Virgin Active, we do health and fitness differently. We have expertly crafted exercise experiences that are the perfect blend of intelligent programming and feel-good movement. We've got everything from Yoga to HIIT, so you can move your body any
way you want.
</p>
</div>
</div>
<div class="section">
<img src="../ImageFolder/Yoga.jpg" alt="Yoga">
<div class="ClassText">
<h1>Yoga</h1>
<p>
Choose from Classes with dynamism,energy and athleticism, to an authentic and peaceful experience.
<br><br> Classes include: Align,Flow,Calm,SkyPark Yoga
<br><br>
Sign Up<span> to book this class</span>
</p>
</div>
</div>
<div class="section2">
<div class="ClassText">
<h1>Cycle</h1>
<p>
Custom designed bikes, choreographed lighting and fresh daily beats to inspire you for every ride
<br><br> Classes include: Cycle Spirit, Cycle Burn, RPM<sup>TM</sup>, THE TRIP<sup>TM</sup>
<br><br>
Sign Up<span> to book this class</span>
</p>
</div>
<img src="../ImageFolder/Cycle.jpg" alt="Cycle">
</div>
<div class="section3">
<img src="../ImageFolder/Les.jpg" alt="Les">
<div class="ClassText">
<h1>Les Mils<sup>TM</sup></h1>
<p>
Mixing the hottest music with cutting edge-exercise science, motivation and the energy of many, Les Mills<sup>TM</sup> group fitness classes make you fall in love with fitness Discover our range of world-class group fitness workouts below.
<br><br> Classes include: BodyPump<sup>TM</sup>,BodyCombat<sup>TM</sup>,THETRIP<sup>TM</sup>
<br><br>
Sign Up<span> to book this class</span>
</p>
</div>
</div>
<div class="section4">
<div class="ClassText">
<h1>Reformer Pilates</h1>
<p>
Hundreds of Reformer classes on offer from morning to night.
<br><br> Classes include: Beginner,Intermediate
<br><br>
Sign Up<span> to book this class</span>
</p>
</div>
<img src="../ImageFolder/Reformer.jpg" alt="Reformer">
</div>
<footer class="footer">
<div class="social">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-whatsapp"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<ul class="list">
<li>About Us</li>
<li>Contact Us</li>
<li>FAQs</li>
</ul>
<p class="copyright">
<small>©2022 Revolutionary Fitness</small>
</p>
</footer>
P.S - added some padding in .background.
I want to create this Image style with css. I have created section but I am facing difficulty to rotate it. I want green section straight but when I am rotating main wrapper all things are rotate. but that is wrong.
for reference please check Image
http://prntscr.com/jempp4
Any type of help will be appreciated. Not sure If I have explained my problem is good way.
Thanks in advance.
.banner-bg{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
transform: rotate(-15deg);
}
.banner-bg .banner-bg-sec{
width: 33.3333%;
position: relative;
}
.bg-green{
background: #528E72;
}
.bg-blue{
background: #4C6CC1;
}
.bg-blue2{
background: #4475D4;
}
.bg-red{
background: #CB431B;
}
.bg-red2{
background: #F54F1D;
}
.bg-inner{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 15px;
text-align: center;
box-shadow: 0px 4px 1px -2px rgba(0,0,0,0.2);
}
.bg-text{
font-size: 28px;
color: rgba(255,255,255,0.6);
}
.bg-icon{
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}
.bg-icon li{
display: inline-block;
vertical-align: middle;
}
.bg-icon li a{
text-decoration: none;
display: block;
font-size: 22px;
color: #fff;
padding-right: 20px;
}
<div class="banner-bg">
<div class="banner-bg-sec bg-blue">
<div class="bg-inner bg-text bg-blue2">
<span>HIGH SCHOOLS</span>
</div>
</div>
<div class="banner-bg-sec bg-green"></div>
<div class="banner-bg-sec bg-red">
<div class="bg-inner bg-red2">
<ul class="bg-icon">
<li>
<a href="#">
F
</a>
</li>
<li>
<a href="#">
T
</a>
</li>
<li>
<a href="#">
I
</a>
</li>
</ul>
</div>
</div>
</div>
you can rotate only the title of the column and use clip-path to crop the main container, push the blue one a bit to the bottom and to make the title cover the whole width, widen it a little bit and use overflow-x:hidden for its parent, see the result in this fiddle : https://jsfiddle.net/fyhv9r8h/
#header {
background: url('https://kilianvalkhof.com/wp-content/themes/kvsixteen/static/img/bg2.jpg');
width: 100%;
height: 230px;
position: absolute;
}
.banner-bg {
position: absolute;
top: 100px;
width: 100%;
height: 160px;
display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
clip-path: polygon(0% 38%, 100% 0%, 100% 100%, 0% 100%);
}
.banner-bg .banner-bg-sec {
width: 33.3333%;
position: relative;
overflow-x: hidden;
}
.bg-green {
background: #528E72;
}
.bg-blue {
background: #4C6CC1;
top: 38px;
}
.bg-blue2 {
background: #4475D4;
}
.bg-red {
background: #CB431B;
}
.bg-red2 {
background: #F54F1D;
}
.bg-inner {
position: absolute;
top: 0;
left: -10px;
width: 100%;
padding: 15px;
text-align: center;
box-shadow: 0px 4px 1px -2px rgba(0, 0, 0, 0.2);
transform: rotate(-6deg)
}
.bg-text {
font-size: 28px;
color: rgba(255, 255, 255, 0.6);
}
.bg-icon {
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}
.bg-icon li {
display: inline-block;
vertical-align: middle;
}
.bg-icon li a {
text-decoration: none;
display: block;
font-size: 22px;
color: #fff;
padding-right: 20px;
}
<div id="header">
</div>
<div class="banner-bg">
<div class="banner-bg-sec bg-blue">
<div class="bg-inner bg-text bg-blue2">
<span>HIGH SCHOOLS</span>
</div>
</div>
<div class="banner-bg-sec bg-green"></div>
<div class="banner-bg-sec bg-red">
<div class="bg-inner bg-red2">
<ul class="bg-icon">
<li>
F
</li>
<li>
T
</li>
<li>
I
</li>
</ul>
</div>
</div>
</div>
Hmm interesting.. maybe have a look at transform:skewY instead of rotate... though you'll have to "unskew" the text or find other way to place it...
.banner-bg{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
transform: skewY(-15deg);
}
span, ul {
transform: skewY(15deg) rotate(-15deg);
}
.banner-bg .banner-bg-sec{
width: 33.3333%;
position: relative;
}
.bg-green{
background: #528E72;
}
.bg-blue{
background: #4C6CC1;
}
.bg-blue2{
background: #4475D4;
}
.bg-red{
background: #CB431B;
}
.bg-red2{
background: #F54F1D;
}
.bg-inner{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 15px;
text-align: center;
box-shadow: 0px 4px 1px -2px rgba(0,0,0,0.2);
}
.bg-text{
font-size: 28px;
color: rgba(255,255,255,0.6);
}
.bg-icon{
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}
.bg-icon li{
display: inline-block;
vertical-align: middle;
}
.bg-icon li a{
text-decoration: none;
display: block;
font-size: 22px;
color: #fff;
padding-right: 20px;
}
<div class="banner-bg">
<div class="banner-bg-sec bg-blue">
<div class="bg-inner bg-text bg-blue2">
<span>HIGH SCHOOLS</span>
</div>
</div>
<div class="banner-bg-sec bg-green"></div>
<div class="banner-bg-sec bg-red">
<div class="bg-inner bg-red2">
<ul class="bg-icon">
<li>
<a href="#">
F
</a>
</li>
<li>
<a href="#">
T
</a>
</li>
<li>
<a href="#">
I
</a>
</li>
</ul>
</div>
</div>
</div>
I have questions about how to reproduce the following:
I have the menu like this:
body {
background: white;
margin: 0;
padding: 0;
}
/*
/ nav
*/
nav {
width: 100%;
background: #000;
border-bottom: 5px solid white;
position: relative;
font-family: 'Decker';
}
nav:after {
content: '';
height: 8px;
width: 100%;
background: inherit;
position: absolute;
bottom: -15px;
left: 0px;
z-index: 1;
}
nav ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 100%;
margin: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: .6em;
}
nav li {
display: inline-block;
list-style: none;
position: relative;
padding: 0 .5em;
}
nav li:last-child a:before {
display: none;
}
nav li a {
color: #fff;
display: inline-block;
padding: 1.6em 0.6em 0.7em 0.6em;
text-decoration: none;
position: relative;
font-size: 18px;
line-height: 1;
}
nav li a:before {
content: "|";
display: block;
position: absolute;
right: -10px;
top: 1.6em;
-webkit-transform: translateY(-4%);
transform: translateY(-4%);
line-height: inherit;
font-size: inherit;
color: #fff;
}
nav li a:after {
display: none;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
nav li a:hover {
background: #b42024;
color: #fff;
text-decoration: none;
}
nav li a.active {
background: #b42024;
color: #fff;
text-decoration: none;
}
nav li a.active:after {
display: block;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
nav li a:hover:after {
display: block;
}
<nav>
<ul>
<li>
Home
</li>
<li>
About Us
</li>
<li>
Products
</li>
<li>
Contact
</li>
</ul>
</nav>
But, I don't know how to make the drop-down list like the picture shown above.
I hope someone can help me. Thank you in advance!
Hey This is what You want :) I hope
body {
background: white;
margin: 0;
padding: 0;
}
nav {
width: 100%;
background: #000;
border-bottom: 5px solid white;
position: relative;
}
nav:after {
content: '';
height: 8px;
width: 100%;
background: inherit;
position: absolute;
bottom: -15px;
left: 0px;
z-index: 1;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav a {
color: #fff;
text-decoration: none;
}
.nav__cat {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 100%;
margin: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: .6em;
}
.nav__li {
display: inline-block;
list-style: none;
position: relative;
padding: 0 .5em;
}
.nav__li:last-child a:before {
display: none;
}
.nav__li:hover > a {
background: red;
}
.nav__li:hover > a:after {
display: block;
}
.nav__li:hover .sub__category {
visibility: visible;
opacity: 1;
}
.nav__li > a {
display: inline-block;
padding: 25.6px 0.6em 0.7em 0.6em;
position: relative;
font-size: 18px;
line-height: 1;
}
.nav__li > a:before {
content: "|";
display: block;
position: absolute;
right: -10px;
top: 25.6px;
-webkit-transform: translateY(-4%);
transform: translateY(-4%);
line-height: inherit;
font-size: inherit;
}
.nav__li > a:after {
display: none;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #ffaf1a;
z-index: 2;
}
.sub__category {
visibility: hidden;
opacity: 0;
}
.sub__category {
position: absolute;
top: 100%;
left: 0px;
min-width: 160px;
width: 100%;
z-index: 3;
margin: 0 .5em;
padding-top: 25.6px;
-webkit-transition: all .12s linear;
transition: all .12s linear;
}
.sub__li {
text-align: center;
border-bottom: 2px #000 solid;
background: red;
}
.sub__link {
padding: .7em 1em;
display: block;
font-size: 14px;
}
.sub__link:hover {
background: #fff;
color: #000;
}
<nav>
<ul class="nav__cat">
<li class="nav__li">Menu 1</li>
<li class="nav__li">Menu 23
<ul class="sub__category">
<li class="sub__li">
Subcategory
</li>
<li class="sub__li">
Subcategory 2
</li>
<li class="sub__li">
Subcategory 3
</li>
</ul>
</li>
<li class="nav__li">Menu 345
<ul class="sub__category">
<li class="sub__li">
Subcategory
</li>
<li class="sub__li">
Subcategory 2
</li>
<li class="sub__li">
Subcategory 3
</li>
</ul>
</li>
<li class="nav__li">Menu 4567</li>
<li class="nav__li">Menu 56789</li>
</ul>
</nav>
For starters, you obviously will need some content in each of the menus!
Make sure to open this in the full page.
There is still a lot more styling work that needs to be done to achieve the result you want, but hopefully this helps you get moving in the right direction.
body {
background: white;
margin: 0;
padding: 0;
}
/*
/ nav
*/
nav {
width: 100%;
background: #000;
border-bottom: 5px solid white;
position: relative;
font-family: 'Decker';
}
nav:after {
content: '';
height: 8px;
width: 100%;
background: inherit;
position: absolute;
bottom: -15px;
left: 0px;
z-index: 1;
}
nav .mainmenu {
/*display: -webkit-box;
display: -ms-flexbox;
display: flex;*/
text-align: center;
max-width: 100%;
margin: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: .6em;
}
nav .firstlevel {
display: inline-block;
list-style: none;
position: relative;
padding: 0 .5em;
}
nav .firstlevel:last-child a:before {
display: none;
}
nav .firstlevel a {
width: 120px;
color: #fff;
display: inline-block;
padding: 1.6em 0.6em 0.7em 0.6em;
text-decoration: none;
position: relative;
font-size: 18px;
line-height: 1;
}
nav .firstlevel a:before {
content: "|";
display: block;
position: absolute;
right: -10px;
top: 1.6em;
-webkit-transform: translateY(-4%);
transform: translateY(-4%);
line-height: inherit;
font-size: inherit;
color: #fff;
}
nav .firstlevel a:after {
display: none;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
nav .firstlevel a:hover {
background: #b42024;
color: #fff;
text-decoration: none;
}
nav .firstlevel a.active {
background: #b42024;
color: #fff;
text-decoration: none;
}
nav .firstlevel a.active:after {
display: block;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
nav .firstlevel a:hover:after {
display: block;
}
.firstlevel{
vertical-align: top;
}
.submenu_group{
display:none;
padding-left: 0px;
}
li{
list-style-type: none;
}
li .submenu{
display: block;
width: 120px;
}
.active:hover .submenu_group{
display: block;
}
<body>
<nav>
<ul class="mainmenu">
<li class='firstlevel active'>
Home
<ul class='submenu_group'>
<li>
<a class='submenu'>first item</a>
</li>
<li>
<a class='submenu'>second item</a>
</li>
<li>
<a class='submenu'>third item</a>
</li>
</ul>
</li>
<li class='firstlevel'>
<div>
About Us
</div>
</li>
<li class='firstlevel'>
<div>
Products
</div>
</li>
<li class='firstlevel'>
<div>
Contact
</div>
</li>
</ul>
</nav>
</body>
Here a fiddle of improved #Our_Benfactors answer
fiddle
body {
background: white;
margin: 0;
padding: 0;
}
/*
/ nav
*/
nav {
width: 100%;
background: #000;
border-bottom: 5px solid white;
position: relative;
font-family: 'Decker';
}
nav:after {
content: '';
height: 8px;
width: 100%;
background: inherit;
position: absolute;
bottom: -15px;
left: 0px;
z-index: 1;
}
nav .mainmenu {
/*display: -webkit-box;
display: -ms-flexbox;
display: flex;*/
text-align: center;
max-width: 100%;
margin: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: .6em;
}
nav .firstlevel {
display: inline-block;
list-style: none;
position: relative;
padding: 0 .5em;
}
nav .firstlevel:last-child a:before {
display: none;
}
nav .firstlevel a {
width: 120px;
color: #fff;
display: inline-block;
padding: 1.6em 0.6em 0.7em 0.6em;
text-decoration: none;
position: relative;
font-size: 18px;
line-height: 1;
}
nav .firstlevel a:before {
content: "|";
display: block;
position: absolute;
right: -10px;
top: 1.6em;
-webkit-transform: translateY(-4%);
transform: translateY(-4%);
line-height: inherit;
font-size: inherit;
color: #fff;
}
nav .firstlevel a:after {
display: none;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
nav .firstlevel a:hover {
background: #b42024;
color: #fff;
text-decoration: none;
}
nav .firstlevel a.active {
background: #b42024;
color: #fff;
text-decoration: none;
}
nav .firstlevel a.active:after {
display: block;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
.active .submenu_group a:after {
background: transparent;
}
.active .submenu_group a {
background:#b42024;
}
.active .submenu_group a:hover {
background: #fff;
color:#000;
border-top: 2px inset #000;
border-bottom: 2px inset #000;
}
.active .submenu_group li:first-child a:hover {
border-top: 0;
}
nav .firstlevel a:hover:after {
display: block;
}
.firstlevel{
vertical-align: top;
}
.submenu_group{
display:none;
padding-left: 0px;
}
.active .submenu_group li:first-child a {
margin-top: 28px;
}
.active .submenu_group a {
padding: 10px;
}
.active:hover .submenu_group {
display: block;
position: absolute;
background: #000;
}
li{
list-style-type: none;
}
li .submenu{
display: block;
width: 120px;
}
.active:hover .submenu_group{
display: block;
}
<body>
<nav>
<ul class="mainmenu">
<li class='firstlevel active'>
Home
<ul class='submenu_group'>
<li>
<a class='submenu'>first item</a>
</li>
<li>
<a class='submenu'>second item</a>
</li>
<li>
<a class='submenu'>third item</a>
</li>
</ul>
</li>
<li class='firstlevel'>
<div>
About Us
</div>
</li>
<li class='firstlevel'>
<div>
Products
</div>
</li>
<li class='firstlevel'>
<div>
Contact
</div>
</li>
</ul>
</nav>
</body>
I am testing my navigation bar for a project and I am using basic Html/css
and i have added Jquery so that the hover effect could affect the parent element.
$(document).ready(function () {
$(".nav-level-2").hover(
function () {
$("li>a").css("background", "white");
}
);
$(".nav-level-2").mouseleave(
function () {
$("li>a").css("background", "none");
});
});
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
display: none;
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
li>a:hover + .nav-level-2{
display: block;
}
.nav-level-2:hover {
display:block;
}
.row{
display: flex;
flex: 0 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
}
.list-container {
padding: 0px;
}
.col-lg-2{
flex-basis: 16.666666667%;
max-width: 16.666666667%;
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-flex: 0;
background: red;
margin-left: 5px;
}
.main-nav>.inner .nav-level-2 .nav-level-2-container .heading {
text-transform: uppercase;
color: #000;
letter-spacing: 1px;
margin-bottom: 20px;
font-size: 14px;
margin: 0 0 20px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div class="list-container shop col-lg-2">
<h3 class="heading"> Shop by</h3>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
What I am trying to achieve is when I hover over the red block,I am trying to make parent element ('What's New') to show with color #000 and background white;
SEE THIS IMAGE <--
I know that when i hover 'What's New' it does change color to white, but when I hover over redblock for navigation, the background disappears with 'What's New' disappearing with black background.
No need for JavaScript to do what you want. I think this is what you are looking for? Basically, I am using the :hover on the parent div to change the child element's background and colour.
.nav-whats-new:hover a {
background:white;
color:black;
}
Example:
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.nav-whats-new:hover a {
background:white;
color:black;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
display: none;
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
li>a:hover + .nav-level-2{
display: block;
}
.nav-level-2:hover {
display:block;
}
.row{
display: flex;
flex: 0 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
}
.list-container {
padding: 0px;
}
.col-lg-2{
flex-basis: 16.666666667%;
max-width: 16.666666667%;
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-flex: 0;
background: red;
margin-left: 5px;
}
.main-nav>.inner .nav-level-2 .nav-level-2-container .heading {
text-transform: uppercase;
color: #000;
letter-spacing: 1px;
margin-bottom: 20px;
font-size: 14px;
margin: 0 0 20px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div class="list-container shop col-lg-2">
<h3 class="heading"> Shop by</h3>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
See the edited jQuery. It's what I changed. Change background none to transparent and add the color css styles.
Is this what you wanted?
$(document).ready(function () {
$(".nav-level-2").hover(
function () {
$("li>a").css("background", "white");
$("li>a").css("color", "black");
}
);
$(".nav-level-2").mouseleave(
function () {
$("li>a").css("background", "transparent");
$("li>a").css("color", "white");
}
);
});
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
display: none;
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
li>a:hover + .nav-level-2{
display: block;
}
.nav-level-2:hover {
display:block;
}
.row{
display: flex;
flex: 0 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
}
.list-container {
padding: 0px;
}
.col-lg-2{
flex-basis: 16.666666667%;
max-width: 16.666666667%;
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-flex: 0;
background: red;
margin-left: 5px;
}
.main-nav>.inner .nav-level-2 .nav-level-2-container .heading {
text-transform: uppercase;
color: #000;
letter-spacing: 1px;
margin-bottom: 20px;
font-size: 14px;
margin: 0 0 20px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div class="list-container shop col-lg-2">
<h3 class="heading"> Shop by</h3>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>