body{
background: #080808;
color: #fff;
}
#header{
width: 100%;
height: 100vh;
background-image: url();
background-position: center;
background-size: cover;
padding-bottom: 50
}
.container{
padding: 10px 10% ;
}
nav{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.logo{
width: 140px;
}
nav ul li{
display: inline-block;
list-style: none;
margin: 10px 20px;
}
nav ul li a{
position: relative;
text-decoration: none;
color: #fff;
}
nav ul li a::after{
content: "";
position: absolute;
bottom: -6px;
left: 0;
width: 0;
height: 3px;
background-color: red;
}
nav ul li a:hover::after{
width: 100%;
}
<div class="container">
<nav>
<img src="" class="logo">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</div>
I want to add a hover effect to the ul li but the code seems not to work.
I think this is how it should be but the css seems not to work for some reason. Thanks anyways
I also tried using the opacity tag but it still doesn't work.
Edit: I have now edit the HTML Code. The problem is that the hover effect doen't appear.
What I want is to make a hover effect for the ul li.
I think that you have to put the text inside the a tags
body{
background: #080808;
color: #fff;
}
#header{
width: 100%;
height: 100vh;
background-image: url();
background-position: center;
background-size: cover;
padding-bottom: 50
}
.container{
padding: 10px 10% ;
}
nav{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.logo{
width: 140px;
}
nav ul li{
display: inline-block;
list-style: none;
margin: 10px 20px;
}
nav ul li a{
position: relative;
text-decoration: none;
color: #fff;
}
nav ul li a::after{
content: "";
position: absolute;
bottom: -6px;
left: 0;
width: 0;
height: 3px;
background-color: red;
transition-duration: 300ms;
}
nav ul li a:hover::after{
width: 100%;
}
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</div>
As i am running the html and css code the list of testimonials are 8 but , when i increased the size of the screen to 950px the list of 8 items start coming out of the background, so please can anyone give me the hint that where the code is wrong
const mobileBtn = document.getElementById('mobile-cta');
nav = document.querySelector('nav');
mobileBtnExit = document.getElementById('mobile-sta');
mobileBtn.addEventListener('click' , () => {
nav.classList.add('mobile-menu');
})
mobileBtnExit.addEventListener('click' , () => {
nav.classList.remove('mobile-menu');
})
:root {
--primary-color: #007af3;
}
body{
background: #F2F2F2;
margin: 0 ;
font-family: 'Poppins';
}
.navbar {
background: white;
padding: 1em;
.logo{
text-decoration: none;
font-weight: bold;
color: black ;
font-size: 1.2em;
span {
color: var(--primary-color);
}
}
nav{
display: none;
}
.container{
display: flex;
place-content: space-between;
}
.mobile-menu{
cursor: pointer;
}
}
a{
color: #444444;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
section{
padding: 5em 2em;
}
.hero{
text-align: center;
}
.left-col{
.subhead{
text-transform: uppercase;
font-weight: bold;
color: gray;
letter-spacing: .3em;
}
h1{
font-size: 2.5em;
line-height: 1.3em;
margin-top: .2em;
}
.primary-cta{
background: var(--primary-color);
color: white;
text-decoration: none;
padding: .6em 1.3em;
font-size: 1.4em;
border-radius: 5em;
font-weight: bold;
display: inline-block;
}
.watch-video-cta{
display: block;
margin-top: 1em;
img {
margin-right: .5em;
}
}
}
.hero-img{
width: 70% ;
margin-top: 3em;
}
section.features-section{
background: #20272e;
color: white;
}
ul.feature-list{
margin: 0;
padding-left: .1em;
display: grid;
grid-template-columns: repeat(auto-fit , minmax(19rem, 1fr));
li{
font-size: 1.1em;
margin-bottom: 1em;
margin-left: 2em;
position: relative;
&:before{
content: '';
left: -2em;
position: absolute;
width: 20px;
height: 20px;
background-image: url('../2021frontend/images/bullet.svg');
background-size: contain;
margin-right: .5em;
}
}
}
.features-section img{
display: none;
}
.testimonials-section{
background: var(--primary-color);
color: white;
li{
width: #006bd6;
text-align: center;
padding: 2em 1em;
width: 75%;
margin: 0 auto 5em auto;
border-radius: 1em;
img{
width: 5em;
height: 5em;
border: 5px solid #006bd6;
border-radius: 50%;
margin-top: -4.5em;
}
}
}
h2{
font-size: 2em;
}
label{
display: block;
font-size: 1.2em;
margin-bottom: .5em;
}
input, textarea{
width: 100%;
padding: .8em;
margin-bottom: 1em;
border-radius: .3em;
border: 1px solid gray;
box-sizing: border-box;
}
input[type="submit"]{
background-color: var(--primary-color);
color: white;
font-weight: bold;
font-size: 1.3em;
border: none;
margin-bottom: 5em;
border-radius: 5em;
display: inline-block;
padding: .8em 6.7em;
width: unset;
cursor: pointer;
}
iframe{
width: 100%;
height: 300px;
}
nav.mobile-menu{
display: block;
}
nav{
position: fixed;
z-index: 999;
width: 66%;
right: 0;
top: 0;
background: #20272e;
height: 100vh;
padding: 1em;
ul.primary-nav{
margin-top: 5em;
}
li{
a{
color:white;
text-decoration: none;
display: block;
padding: .5em;
font-size: 1.3em;
text-align: right;
&:hover{
font-weight: bold;
}
}
}
}
.mobile-mobile-closed {
float: right;
margin: .5em;
cursor: pointer;
}
//now here we desinging the pc version of the website
#media only screen and (min-width: 768px){
.mobile-menu, .mobile-menu-closed{
display: none;
}
.navbar .container{
display: grid;
grid-template-columns: 180px auto;
justify-content: unset;
}
.navbar nav{
display: flex;
justify-content: space-between;
background: none;
position: unset;
height: auto;
width: 100%;
padding: 0;
ul{
display: flex;
}
a{
color: black;
font-size: 1em;
padding: .1em 1em;
}
ul.primary-nav{
margin: 0;
}
li.current a{
font-weight: bold;
}
li.go-premium-cta a{
color: var(--primary-color);
border: 3px solid var(--primary-color);
font-weight: bold;
border-radius: 5em;
margin-top: -.2em;
&:hover{
background: var(--primary-color);
color: white;
}
}
}
}
#media only screen and (min-width: 950px) {
.container{
width: 950px;
margin: 0 auto;
}
section{
padding: 10em 4em;
}
.hero .container{
display: flex;
justify-content: space-between;
text-align: left;
.left-col{
margin: 3em 3em 0 5em;
h1 {
font-size: 3em;
width: 90%;
}
}
}
.hero-img{
width: 30%;
margin-right: 8em;
}
.hero-cta{
display: flex;
}
.primary-cta{
margin-right: 1em;
}
ul.features-list{
display: block;
margin-left: 5em;
li{
font-size: 1.4em;
&:before{
width: 30px;
height: 30px;
}
}
}
.features-section{
position: relative;
}
.features-section img{
display:block;
position: absolute;
right: 0;
width: 325px;
bottom: -6em;
height: 250px;
}
.testimonials-section ul{
display: flex;
li {
margin: 0 1em;
flex-basis: 33.333333%;
}
}
.contact-section{
position: relative;
display: flex;
}
.contact-right{
position: absolute;
right: 0;
top: 0;
width: 45%;
height: 100%;
iframe{
height: 100%;
}
}
}
//here we done the styling of 1220px and after
#media only screen and (min-width: 1220px){
.features-section{
&:before{
content: '';
position: absolute;
width: 10%;
height: 20em;
background: var(--primary-color);
left: 0;
top: -4em;
}
&:after{
content: '';
position: absolute;
width: 200px;
height: 18em;
background: url('../2021frontend/images/dots.svg') no-repeat;
top: -1em;
left: auto;
}
}
}
<div class="navbar"> <!-- here class is the name given to the div block so that the css identify it for styling it-->
<div class="container">
<a class="logo" href="#">Let's<span>Code</span></a>
<img id="mobile-cta" class="mobile-menu" src="2021frontend/images/menu.svg" alt="Open navigation">
<nav>
<img id="mobile-sta" class="mobile-menu-closed" src="2021frontend/images/exit.svg" alt="Closed navigation">
<ul class="primary-nav">
<li class="home">Home</li>
<li>Events</li>
<li>Registration</li>
</ul>
<ul class="secondary-nav">
<li>GrowYourMoney</li>
<li>Projects</li>
</ul>
</nav>
</div>
</div>
<section class="hero">
<div class="container">
<div class="left-col">
<p class="subhead">Share with the World & Grow with the World</p>
<h1>We are here to make the Future</h1>
<div class="hero-cta">
Click Here
<a href="#" class="watch-video-cta">
<img src="2021frontend/images/watch.svg" alt="Watch a video">Watch a Video
</a>
</div>
</div>
<img src="2021frontend/images/illustration.svg" class="hero-img" alt="illustration-images">
</div>
</section>
<section class="features-section">
<div class="container">
<ul class="feature-list">
<li>Full Stack Web Development</li>
<li>Full Stack Mobile App Development</li>
<li>Cloud tech</li>
<li>Devops</li>
<li>Web3 Development</li>
<li>Stock Market</li>
</ul>
<img src="2021frontend/images/holding-phone.jpg" alt="Man holding phone">
</div>
</section>
<section class="testimonials-section">
<div class="container">
<ul>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"has a strong hold in full stack web Development, leader of team antidote in sih prefinal round"</blockquote>
<cite>- saksham bansal</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"starting my journey as a full stack developer and interested in web3 domain"</blockquote>
<cite>- sayan halder</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"currently doing frontend development with bootstrap and loves playing football and cricket"</blockquote>
<cite>- varun sharma</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"currently learning web Development and see myself in future as a android developer "</blockquote>
<cite>- parth barara</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"iam the tomper of the class and likes chemistry very much"</blockquote>
<cite>- sakshi gupta</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"i dont know what i am doing but my boyfriend loves me very much"</blockquote>
<cite>- nandini gulati</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"same as nandini"</blockquote>
<cite>- kushi suri</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"iam the don of kv, dont even try to fight with me in palam"</blockquote>
<cite>- sribash paul</cite>
</li>
</ul>
</div>
</section>
<br>
<section class="contact-section">
<div class="contact-left">
<h2>Contact</h2>
<form action="">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Your Name"> <br>
<br>
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="#email.com"> <br>
<br>
<label for="message">Message</label> <br>
<textarea name="message" id="message" cols="30" rows="10"></textarea> <br>
<br>
<input type="submit" class="send-message-cta" value="Send Message">
</form>
</div>
<div>
<div class="contact-right">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d28026.467037845872!2d77.08443149999997!3d28.59052415000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390d1b3f9902dce7%3A0xdf51d27e693abbea!2sPalam%2C%20New%20Delhi%2C%20Delhi!5e0!3m2!1sen!2sin!4v1649777392215!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
<img src="2021frontend/images/" alt="">
</section>
By default display: flex; will try and put everything onto one row. Where you have .testimonials-section ul { in your 950px breakpoint add flex-wrap: wrap;
One thing to note, and I may be mistaken here, is that flex-basis doesn't take margins into consideration, so you will find that your testimonials will be 2 per row instead of 3 because of the horizontal margins you've set. You can fix this by change flex-basis: 33.3333% to flex-basis: calc(33.3333% - 2em);
I have been trying to make a news website. It is just for practice and so far i was able to make a responsive navbar and custom scrollbar for it. However I am unable to make responsive news cards after that for some reason. I want to make responsive news cards under the h1 which includes a clickable link photo , A link heading , a small description and link to the author of the article to be shown on it. Can someone please explain me the issue and send me a solution ?
const selectElement = (element) => document.querySelector(element);
selectElement('.mobile-menu') .addEventListener('click',() => {
selectElement('header').classList.toggle('active');
})
*,
*::before,
*::after{
margin: 0;
padding: 0;
}
html{
font-size: 10px;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}
a{
text-decoration: none;
display: block;
}
.container{
max-width: 98rem;
margin: 0 auto;
padding: 0 2.2rem;
}
header{
position:fixed;
top: 0px;
z-index: 1400;
height: 5rem;
width: 100%;
background-color: rgba(0,0,0,0.8);
backdrop-filter: blur(2rem);
}
.nav-list{
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 -1rem;
}
.nav-list-mobile{
display:none;
}
.nav-link{
font-size: 1.4rem;
color: #fff;
padding: 0 1rem;
transition: .3s;
}
.nav-link:hover{
color: greenyellow;
}
.nav-link-logo{
width: 1.6rem;
height: 5rem;
background: url("apple.svg") center no-repeat;
background-size: 22px;
}
.nav-link-search{
width: 1.6rem;
height: 5rem;
background: url("magnifying-glass.svg") center no-repeat;
}
.nav-link-bag{
width: 1.6rem;
height: 4.4rem;
background: url("magnifying-glass.svg") center no-repeat;
}
#media screen and (max-width: 767px){
header{
height: 4.8rem;
transition: background .36s cubic-bezier(0.32,0.08,0.24, 1),;
height: .56s cubic-bezier(0.32,0.08,0.24, 1);
}
header .container{
padding: 0;
}
.nav-list{
margin-top: 0;
}
.nav-list-mobile{
display: flex;
}
.nav-item{
width: 4.8rem;
height: 4.8rem;
display: flex;
justify-content: center;
}
.nav-item-hidden{
display: none;
}
.mobile-menu{
position: relative;
z-index: 1500;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
}
.line{
position: absolute;
width: 1.7rem;
height: 1px;
background-color: #fff;
transition: margin-top .3192s cubic-bezier(0.04,0.04,0.12,0.96);
}
.line-top{
margin-top: -1rem;
margin-left: 10px;
}
.line-mid{
margin-top: 0rem;
margin-left: 20px;
}
.line-bottom{
margin-top: 1rem;
margin-left: 10px;
}
.active .line-top{
margin-top: 0;
transform: rotate(45deg);
transition: transform .3192s .1s cubic-bezier(0.04,0.04,0.12,0.96) ;
}
.active .line-mid{
display: none;
}
.active .line-bottom{
margin-top: 0;
transform: rotate(-45deg);
transition: transform .3192s .1s cubic-bezier(0.04,0.04,0.12,0.96) ;
}
header.active{
height: 100%;
background-color: #000;
transition: .3s;
}
.nav-link-logo{
width: 1.8rem;
height: 4.8rem;
position: relative;
z-index: 1500;
}
.nav-link-bag{
width: 100%;
height: 4.8rem;
}
.nav{
position: relative;
}
.nav-link{
font-size:1.7rem;
padding: 0;
margin: auto 0;
}
.nav-list-larger{
position: fixed;
top: 0;
left: 0;
width: 0;
height: 0;
display: block;
padding: 10.5rem 5rem;
z-index: 1000;
box-sizing: border-box;
opacity: 0;
visibility: hidden;
transition: opacity .3s;
}
.active .nav-list-larger{
width: 100%;
height: 100vh;
opacity: 1;
visibility: visible;
}
.active .nav-link-bag{
opacity: 0;
transition: opacity .3s;
}
.nav-list-larger .nav-item{
width: 100%;
justify-content: center;
}
.nav-list-larger .nav-item:nth-child(9){
border-bottom: none;
}
.active .nav-list-larger .nav-item{
animation: fadeIn 1s ease-in;
}
#keyframes fadeIn {
from{
opacity: 0;
}
to{
opacity: 1;
}
}
}
h1{
margin-top: 5rem;
margin-left: 20px;
font-weight: bolder;
font-size: 24px;
}
::-webkit-scrollbar{
width: 17px;
}
::-webkit-scrollbar-track{
border: 7px solid rgba(0,0,0,0.8);
box-shadow: inset 0 0 2.5px 2px rgba(0,0,0,0.8);
}
::-webkit-scrollbar-thumb{
background: linear-gradient(45deg,#06dee1,greenyellow);
border-radius: 15px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>News</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<nav class="nav">
<ul class="nav-list nav-list-mobile">
<li class="nav-item">
<div class="mobile-menu">
<span class="line line-top"></span>
<span class="line line-mid"></span>
<span class="line line-bottom"></span>
</div>
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
<!-- /.nav-list nav-list-mobile -->
<ul class="nav-list nav-list-larger">
<li class="nav-item nav-item-hidden">
</li>
<li class="nav-item">
Tech
</li>
<li class="nav-item">
Science
</li>
<li class="nav-item">
Travel
</li>
<li class="nav-item">
How To ?
</li>
<li class="nav-item">
More
</li>
<li class="nav-item">
</li>
<li class="nav-item nav-item-hidden">
</li>
</ul>
<!-- /.nav-list nav-list-larger -->
</nav>
</div>
</header>
<h1>Trending Now</h1>
<script src="main.js"></script>
</body>
</html>
Here is a rough and dirty example. CSS Code is added at the end of the example css.
Explanation:
All cards are placed into a wrapper div (here: .cards-wrapper) to anchor the card-grid.
In this case it is an very simple grid just to be example. It is done with css flexbox: on mobile it expands the cards to 100%, on tablet there are 2 columns and on wider screens there are 4 columns. The settings for the the respinsive columns are in the css elements #media... If you need introducing to flexbox see here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
All cards are wrapped in a div (here: card). That divs are part of the flexbox grid as they are the direct childs of the flexbox container. And the .card div is the parent card container to style the cards as well.
In the .card div the elements: image with link, headline with link, text, Author with link. Stylings are rough and dirty just to be example too.
If you are not experienced you may notice a little 'trick': the image fullfills the complete width of the card. The content part has a padding. This is possible because the card is devided in a head (.card-image div) and contend (.card-contentdiv). The image div has no margins and paddings. The link has been set to an block element and text-sizings has been set to zero to avoid white space effects. The content area has paddings prepared in the wrapper div .card-content. The other styling are as I think self-explaining ;-)
Hope it helps ... ;-)
const selectElement = (element) => document.querySelector(element);
selectElement('.mobile-menu') .addEventListener('click',() => {
selectElement('header').classList.toggle('active');
})
*,
*::before,
*::after{
margin: 0;
padding: 0;
}
html{
font-size: 10px;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}
a{
text-decoration: none;
display: block;
}
.container{
max-width: 98rem;
margin: 0 auto;
padding: 0 2.2rem;
}
header{
position:fixed;
top: 0px;
z-index: 1400;
height: 5rem;
width: 100%;
background-color: rgba(0,0,0,0.8);
backdrop-filter: blur(2rem);
}
.nav-list{
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 -1rem;
}
.nav-list-mobile{
display:none;
}
.nav-link{
font-size: 1.4rem;
color: #fff;
padding: 0 1rem;
transition: .3s;
}
.nav-link:hover{
color: greenyellow;
}
.nav-link-logo{
width: 1.6rem;
height: 5rem;
background: url("apple.svg") center no-repeat;
background-size: 22px;
}
.nav-link-search{
width: 1.6rem;
height: 5rem;
background: url("magnifying-glass.svg") center no-repeat;
}
.nav-link-bag{
width: 1.6rem;
height: 4.4rem;
background: url("magnifying-glass.svg") center no-repeat;
}
#media screen and (max-width: 767px){
header{
height: 4.8rem;
transition: background .36s cubic-bezier(0.32,0.08,0.24, 1),;
height: .56s cubic-bezier(0.32,0.08,0.24, 1);
}
header .container{
padding: 0;
}
.nav-list{
margin-top: 0;
}
.nav-list-mobile{
display: flex;
}
.nav-item{
width: 4.8rem;
height: 4.8rem;
display: flex;
justify-content: center;
}
.nav-item-hidden{
display: none;
}
.mobile-menu{
position: relative;
z-index: 1500;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
}
.line{
position: absolute;
width: 1.7rem;
height: 1px;
background-color: #fff;
transition: margin-top .3192s cubic-bezier(0.04,0.04,0.12,0.96);
}
.line-top{
margin-top: -1rem;
margin-left: 10px;
}
.line-mid{
margin-top: 0rem;
margin-left: 20px;
}
.line-bottom{
margin-top: 1rem;
margin-left: 10px;
}
.active .line-top{
margin-top: 0;
transform: rotate(45deg);
transition: transform .3192s .1s cubic-bezier(0.04,0.04,0.12,0.96) ;
}
.active .line-mid{
display: none;
}
.active .line-bottom{
margin-top: 0;
transform: rotate(-45deg);
transition: transform .3192s .1s cubic-bezier(0.04,0.04,0.12,0.96) ;
}
header.active{
height: 100%;
background-color: #000;
transition: .3s;
}
.nav-link-logo{
width: 1.8rem;
height: 4.8rem;
position: relative;
z-index: 1500;
}
.nav-link-bag{
width: 100%;
height: 4.8rem;
}
.nav{
position: relative;
}
.nav-link{
font-size:1.7rem;
padding: 0;
margin: auto 0;
}
.nav-list-larger{
position: fixed;
top: 0;
left: 0;
width: 0;
height: 0;
display: block;
padding: 10.5rem 5rem;
z-index: 1000;
box-sizing: border-box;
opacity: 0;
visibility: hidden;
transition: opacity .3s;
}
.active .nav-list-larger{
width: 100%;
height: 100vh;
opacity: 1;
visibility: visible;
}
.active .nav-link-bag{
opacity: 0;
transition: opacity .3s;
}
.nav-list-larger .nav-item{
width: 100%;
justify-content: center;
}
.nav-list-larger .nav-item:nth-child(9){
border-bottom: none;
}
.active .nav-list-larger .nav-item{
animation: fadeIn 1s ease-in;
}
#keyframes fadeIn {
from{
opacity: 0;
}
to{
opacity: 1;
}
}
}
h1{
margin-top: 5rem;
margin-left: 20px;
font-weight: bolder;
font-size: 24px;
}
::-webkit-scrollbar{
width: 17px;
}
::-webkit-scrollbar-track{
border: 7px solid rgba(0,0,0,0.8);
box-shadow: inset 0 0 2.5px 2px rgba(0,0,0,0.8);
}
::-webkit-scrollbar-thumb{
background: linear-gradient(45deg,#06dee1,greenyellow);
border-radius: 15px;
}
/* **********************************
ADDED
cards css
********************************** */
/* corection: header to front */
header {
z-index: 999;
}
/* card mini-grid to make reponsive */
.cards-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px 0;
}
.card {
flex-basis: 100%;
box-sizing: border-box;
margin-bottom: 20px;
}
#media only screen and (min-width: 768px) {
.cards-wrapper {
margin: 20px 20px;;
}
.card {
flex-basis: 49%;
}
}
#media only screen and (min-width: 1024px) {
.card {
flex-basis: 24%;
}
}
/* card mini-styling */
.card {
border: 2px solid #333;
border-radius: 10px;
overflow: hidden;
}
.card-image img {
width: 100%;
height: auto;
margin: 0;
}
.card-image a {
display: block;
font-size: 0;
line-height: 0;
margin: 0;
}
.card-content {
padding: 10px;
}
.card h2 a {
margin-bottom: 10px;
color: #333;
}
.card-author {
margin-top: 10px;`enter code here`
}
.card-author a {
display: inline;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>News</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<nav class="nav">
<ul class="nav-list nav-list-mobile">
<li class="nav-item">
<div class="mobile-menu">
<span class="line line-top"></span>
<span class="line line-mid"></span>
<span class="line line-bottom"></span>
</div>
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
<!-- /.nav-list nav-list-mobile -->
<ul class="nav-list nav-list-larger">
<li class="nav-item nav-item-hidden">
</li>
<li class="nav-item">
Tech
</li>
<li class="nav-item">
Science
</li>
<li class="nav-item">
Travel
</li>
<li class="nav-item">
How To ?
</li>
<li class="nav-item">
More
</li>
<li class="nav-item">
</li>
<li class="nav-item nav-item-hidden">
</li>
</ul>
<!-- /.nav-list nav-list-larger -->
</nav>
</div>
</header>
<h1>Trending Now</h1>
<!--
#############################################
ADDED
cards html
#############################################
-->
<div class="cards-wrapper">
<div class="card">
<div class="card-image">
<a href="#">
<img src="https://dummyimage.com/600x400/000/0011ff&text=card">
</a>
</div>
<div class="card-content">
<h2>Titel with link</h2>
<div class="card-description">
<p>Li Europan lingues es membres del sam familie.
Lor separat existentie es un myth. Por scientie,
musica, sport etc, litot Europa usa li sam vocabular.</p>
</div>
<div class="card-author">
Author: Jonny Brown
</div>
</div>
</div><!-- .card -->
<div class="card">
<div class="card-image">
<a href="#">
<img src="https://dummyimage.com/600x400/000/0011ff&text=card">
</a>
</div>
<div class="card-content">
<h2>Titel with link</h2>
<div class="card-description">
<p>Li Europan lingues es membres del sam familie.
Lor separat existentie es un myth. Por scientie,
musica, sport etc, litot Europa usa li sam vocabular.</p>
</div>
<div class="card-author">
Author: Jonny Brown
</div>
</div>
</div><!-- .card -->
<div class="card">
<div class="card-image">
<a href="#">
<img src="https://dummyimage.com/600x400/000/0011ff&text=card">
</a>
</div>
<div class="card-content">
<h2>Titel with link</h2>
<div class="card-description">
<p>Li Europan lingues es membres del sam familie.
Lor separat existentie es un myth. Por scientie,
musica, sport etc, litot Europa usa li sam vocabular.</p>
</div>
<div class="card-author">
Author: Jonny Brown
</div>
</div>
</div><!-- .card -->
<div class="card">
<div class="card-image">
<a href="#">
<img src="https://dummyimage.com/600x400/000/0011ff&text=card">
</a>
</div>
<div class="card-content">
<h2>Titel with link</h2>
<div class="card-description">
<p>Li Europan lingues es membres del sam familie.
Lor separat existentie es un myth. Por scientie,
musica, sport etc, litot Europa usa li sam vocabular.</p>
</div>
<div class="card-author">
Author: Jonny Brown
</div>
</div>
</div><!-- .card -->
<script src="main.js"></script>
</body>
</html>
I've seen many questions similar but haven't found the answer to my problem yet.
I need to make this menu dropdown responsive with the page but as it is absolute , I am not sure how to make this happen. Using JS is not a problem eather .Any solution will do.
header{
nav{
min-width: 280px;
max-width: 479px;
margin: 0 auto;
clear: both;
position: relative;
.logo{
padding: 13px 0 10px 9px;
float: left;
}//End of logo
ul{
list-style-type: none;
border-bottom: 2px solid $white;
margin-bottom: 6px;
li{
line-height: 23px;
.nav-img{
line-height: 50px;
float: right;
margin-right: 18px;
}
.nav-content{
position: absolute;
top: 60px;
overflow: hidden;
background-color: $dropdownColor;
//margin: 0 auto;
min-width: 280px;
//width: 100%;
max-width: 440px;
padding: 0px 20px;
max-height: 0px;
.arrow{
float: right;
padding-top: 13px;
}
.nav-sub{
.second-menu{
li{
font-size: 12px;
display: inline-block;
line-height: 8px;
}
li+li:before {
padding: 2px;
color: $white;
content: "/\00a0";
}
}
a{
display: inline-block;
text-decoration: none;
color: $white;
font-weight: bold;
}
input{
width: 100%;
padding: 5px;
border: none;
background-image: url("../images/search_icon.png");
background-repeat: no-repeat;
background-position: center right 10px;
margin: 15px 0;
}
}
}
}
li:first-child{
padding-top: 13px;
}
li:last-child{
padding-bottom: 20px;
}
}//End of menu
}//End of nav
}//End of header
<header>
<nav>
<div class="logo">
<img src="./images/logo.png" alt="Error loading image!">
</div>
<ul>
<li>
<img src="./images/menu_shape.png" alt="Error loading image!">
<div class="nav-content">
<a class="arrow" href=""><img src="./images/dropdown_arrow.png" alt="Error loading image!"></a> <div class="nav-sub">
<ul>
<li>About Us
<!--<ul>
<li>Production</li>
<li>Energy & Commodities</li>
<li>Transport</li>
<li>Industrial Services</li>
</ul>-->
</li>
<li>Divisions</li>
<li>Investors</li>
<li>Corporate Responsibility</li>
</ul>
<ul class="second-menu">
<li>Home</li>
<li>Media Centre</li>
<li>Careers</li>
<li>Contact Us</li>
</ul>
<input type="search" placeholder="Search">
</div>
</div>
</li>
</ul>
</nav>
</header>
Here are the images.
I know that I can put the width in pixels but it won't be responsive than.
Using media queries to change css rules by resolution
https://developer.mozilla.org/en/docs/Web/CSS/Media_Queries/Using_media_queries
I am trying to get my nav bar dropdown list to work using JavaScript.
I got everything working except for when I hover over the rest of the items, the dropdown only shows up under the first link? I tried working around it and putting it in lists but I'd rather not and when I do I just then end up ruining the whole nav bar.
Here's what I mean:
style.css
body {
font-family: Raleway;
font-size: 13px;
margin: 0;
padding: 0;
height: 100%;
}
a {
text-decoration: none;
color: rosybrown
}
#title {
background-color:white;
float: left;
padding-left: 2%;
position: absolute;
padding-top: 1.5%;
}
#nav {
background-color: white;
height: 79px;
min-width: 600px;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
z-index: 2;
}
#nav a {
text-decoration: none;
}
#nav a:link {
color: grey;
}
#nav a:hover {
background-color: lightgrey;
}
#nav a:visited {
color: maroon;
}
#nav a:active {
color: maroon;
}
#navLink {
padding-top: 2.5%;
padding-right: 2%;
letter-spacing: 3px;
float: right;
}
#navLink div {
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: whitesmoke;
}
#navLink div a {
position: relative;
display: block;
margin: 0;
width: auto;
padding: 5px 10px;
text-align: left;
}
.container {
width: 100%;
}
#content {
padding-top: 10%;
padding-left: 15%;
padding-right: 15%;
text-align: justify;
letter-spacing: 1px;
line-height: 150%;
padding-bottom: 60px;
}
.image {
width: 100%;
max-height: 500px;
object-fit: fill;
}
.image:hover {
opacity: 0.8;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
#footer {
background-color: rgba(33, 33, 33, 0.89);
position: fixed;
bottom:0px;
left:0xp;
width:100%;
color:white;
clear:both;
text-align:center;
padding:5px;
}
.stopFloat {
clear:both;
left: 0px;
right: 0px;
bottom: 0px;
}
Here's my navbar code snippet:
<div id="nav">
<div id="title">
<img src="pics/logo.png" width="160" height="39" alt="">
</div>
<div id="navLink">
<a href="index.html"
onmouseover="dropDown('dd1')"
onmouseout="closeddtime()">Home</a>
<div id="dd1"
onmouseover="cancelddclosetime()"
onmouseout="closeddtime()">
Video
Who
What
</div>
<a href="02_advLayout/index.html"
onmouseover="dropDown('dd2')"
onmouseout="closeddtime()">Content</a>
<div id="dd2"
onmouseover="cancelddclosetime()"
onmouseout="closeddtime()">
About Us
Coffee
Shop
Class
</div>
<a href="05_js_fw/index.html"
onmouseover="dropDown('dd3')"
onmouseout="closeddtime()">JS Framework</a>
<div id="dd3"
onmouseover="cancelddclosetime()"
onmouseout="closeddtime()">
Video
Who
What
</div>
Labs
</div>
</div>
The issue is with your DOM structure. In your code, you have to give separate left offsets for each drop-down to display it properly under the parent. But in case you are changing the navigation later, you have to adjust the css also to maintain alignment.
So i feel it is better to restructure your code. May be you can refer the below navigation. It is a simple css navigation with out any js.
ul, li{
margin: 0;
padding: 0;
list-style: none;
}
li{
position: relative;
display: inline;
margin: 0 20px;
}
li ul{
position: absolute;
width: 150px;
left: 0;
top: 100%;
display: none;
}
li:hover ul{
display: block;
}
li ul li{
display: block;
margin: 10px 0;
}
<div id="nav">
<div id="title">
<img src="pics/logo.png" width="160" height="39" alt="">
</div>
<div id="navLink">
<ul>
<li>Menu</li>
<li>Menu
<ul>
<li>Sub menu</li>
<li>Sub menu
</li>
<li>Sub menu</li>
<li>Menu</li>
</ul>
</li>
<li>Sub menu</li>
<li>Sub menu</li>
</ul>
</div>
</div>