One item will not respond out of three in my secondary navigation menu, held within the footer. The top and bottom links both work when I hover over them, but the middle does not seem to detect me mousing over the option for some reason.
HTML OF FOOTER & MENU ELEMENT:
<footer>
<ul class="social">
<li class="social"> <a href="https://www.facebook.com/Aki-Weininger-104277784411418/" id="profile-link"
target="https://www.facebook.com/Aki-Weininger-104277784411418/"> <i class="fab fa-facebook-f"> </i> </a>
</li>
<li class="social"> <a href="https://www.instagram.com/akiweininger/?hl=en" id="instagram-link"
target="https://www.instagram.com/akiweininger/?hl=en"> <i class="fab fa-instagram"> </i> </a> </li>
<li class="social"> <a href="https://www.behance.net/akiweininger" id="Behance-link" target="https://www.behance.net/akiweininger">
<i class="fab fa-behance"></i> </a> </li>
<li class="social"> <a href="https://www.upwork.com/freelancers/~01d4ae188cd67db90c" id="Upwork-link"
target="https://www.upwork.com/freelancers/~01d4ae188cd67db90c">
<img class="upwork" src="https://i.imgur.com/Z02P8YO.png" alt="upwork">
</a> </li>
</ul>
<div class="navi-title">
Navigation
</div>
<ul class="navi"> <li class="navi">
<a href="PLACEHOLDER">
Home
</a>
</li>
<li class="navi">
<a href="PLACEHOLDER">
Works
</a>
</li>
<li class="navi">
<a href="PLACEHOLDER">
Contact
</a>
</li>
</ul>
</footer>
CSS FOR FOOTER & MENU ELEMENT:
footer {
clear: both;
background-color: #2a7de1;
text-align: center;
padding: 2% 0% 1% 0%;
margin-top: 20%;
position: relative;
}
footer ul.social li.social {
list-style: none;
display: inline;
}
footer > ul.social li.social a {
text-align: center;
font-size: 2vw;
margin: 0% 3% 0% 3%;
overflow: hidden;
text-decoration: none;
}
footer > ul.social li.social a .fab {
color: white;
}
footer > ul.social li.social a:hover .fab {
transform: scale(1.3);
transition: 0.3s;
}
.upwork {
width: 2.2%;
}
.upwork:hover {
transform: scale(1.3);
transition: 0.3s;
}
footer > ul.navi li.navi {
list-style: none;
margin: 0% 0% 0% 75%;
text-align: left;
padding: 0.3%;
}
.navi-title {
color: white;
font-family: 'karla';
font-size: 1.4vw;
text-align:left;
margin: 0% 0% 0.5% 75%;
font-weight: 700;
}
footer > ul.navi li.navi a {
text-decoration: none;
color: white;
font-family: 'karla';
font-size: 1.2vw;
}
ul.social {
position: absolute;
margin-top: 3.8%;
}
footer > ul.navi li.navi a:hover {
text-decoration: underline;
}
Codepen
The element selector below is laying over top of the link. If you add a width:600px; to the element selector below, the hover for the link works. Of course it doesn't look great that way, but it's somewhere to start.
ul.social {
width: 600px;
position: absolute;
margin-top: 3.8%;
}
The issue is with your ul.social in the footer. I looked at it in the inspector.
You can see that it's overlapping the unreachable link, "Works".
As a test, I applied display: none to the ul and the "Works" link was once again clickable. My advice would be to restructure the footer using flexbox, taking care not to use any absolute positioning and overlapping.
Related
I'm working on my portfolio website and I'm not that good with CSS as of now this social bar is coming like this in between and I want it to go down like the bottom of the page
const menuToggle = document.querySelector('.toggle');
const showcase = document.querySelector('.showcase');
menuToggle.addEventListener('click', () => {
menuToggle.classList.toggle('active');
showcase.classList.toggle('active');
})
.social {
/* //position my socials to bottom left */
position: absolute;
scale: 0.09;
bottom: 0;
left: 0;
margin-top: 100%;
margin-left: 40px;
width: 0%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1;
}
.social li {
list-style: none;
}
.social li a {
display: inline-block;
margin-left: 40px;
filter: invert(1);
transform: scale(0.5);
transition: 0.5s;
}
.social li a:hover {
transform: scale(0.65) translateY(-15px);
}
<body>
<section class="showcase">
<header>
<h2 class="logo">
EAzZY/Madhur</h2>
<div class="toggle"></div>
</header>
<video src="pexels-rostislav-uzunov-7513671.mp4" muted loop autoplay></video>
<div class="overlay"></div>
<div class="text">
<h2>đź‘‹ I am Madhur</h2>
</div>
<ul class="social">
<li>
<img src="https://via.placeholder.com/48">
</li>
<li>
<img src="https://via.placeholder.com/48">
</li>
<li>
<img src="https://via.placeholder.com/48">
</li>
<li>
<img src="https://via.placeholder.com/48">
</li>
<li>
<img src="https://via.placeholder.com/48">
</li>
</ul>
</section>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<section id="home"></section>
<section id="about">
<h1>about</h1>
</section>
<section id="contact">
<h1>contact</h1>
</section>
</body>
So without seeing your html I don't know how exactly where your social media bar is. I see you are using absolute positioning which can get goofy if the parent container it is in is not 100% height of the window. Which may be happening here. See my example below. If you want it to sit at the bottom of the screen and the screen does not scroll you will have to make the parent container the height of the screen.
.full-height {
width: 100%;
height: 100vh;
background-color: black;
overflow-x: hidden;
position: relative;
}
.social {
width: 200px;
height: 50px;
background-color: blue;
position: absolute;
bottom: 20px;
left: 20px;
}
<div class="full-height">
<ul class="social"> </ul>
<div>
It would be better to have your html code as well. But assuming the situation, I guess it might be like this:
<div class="container">
<ul class="social">
<li>
<a href="#">
<i class="fa-solid fa-house icons"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa-solid fa-house icons"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa-solid fa-house icons"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa-solid fa-house icons"></i>
</a>
</li>
</ul>
</div>
Your CSS code which works, adjust it like this
/* Your container should have position relative and a height of the viewport */
.container {
position: relative;
border: 1px solid red;
height: 15rem;
}
.social {
position: absolute;
bottom: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
z-index: 1;
}
.social li {
list-style: none;
}
.social li a {
display: inline-block;
color : #fff;
transform: scale(0.5);
transition: 0.5s;
}
.social li a:hover {
transform: scale(0.65) translateY(-15px);
}
to do that you can use absolute positioning.
we set our chosen element position to absolute and its container position to relative.
so you choose body as its container and set position for body to relative.
You can change the position of social class to fixed instead of absolute.
Trying to build my first project, a restaurant website but having some trouble with toggling the nav bar. The nav bar links direct the user to the specified section, but the nav bar remains open after that section is reached/ How do I get it to close after clicking on a link?
This is the JavaScript I'm using:
//select element function
const selectElement=function(element){
return document.querySelector(element);
};
let menuToggler=selectElement('.menu-toggle');
let body=selectElement('body');
menuToggler.addEventListener('click',function(){
body.classList.toggle('open');
});
the HTML of the header/navbar section :
<script src="https://unpkg.com/scrollreveal" charset="utf-8"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="container">
<nav class="nav" id="navbar">
<div class="menu-toggle" id="menu-toggle">
<i class="fas fa-bars"></i>
<i class="fas fa-times"></i>
</div>
<img src="" alt="">
<ul class="nav-list">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Menu
</li>
<li class="nav-item">
Order Online
</li>
<li class="nav-item">
Make a Reservation
<li class="nav-item">
Contact Us
</li>
</ul>
</nav>
</div>
</header>
<!-- Header ends-->
CSS of the header, using font awesome
.nav{
height: 7.2rem;
display: flex;
align-items: center;
justify-content: center;
}
.menu-toggle{
color: #fff;
font-size: 2.2rem;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 2.5rem;
cursor: pointer;
z-index: 1800;
}
/*to hide x of nav bar*/
.fa-times{
display: none;
}
.nav-list{
list-style: none;
position: fixed;
top: 0;
left: 0;
width: 70%;
height:100vh;
background-color: var(--main-font-color-dark);
padding: 4.4rem;
display: flex;
flex-direction: column;
justify-content: space-around;
z-index: 1850;
transform: translateX(-100%); /*hides nav bar*/
transition: transform .5s;
}
/*before nav clicked*/
.nav::before{
content: '';
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,.8);
z-index: 1000;
opacity: 0;
trasform:scale(0);
transition: opacity .5s;
}
.open .fa-times{
display: block;
}
/*hides hamburger icon on clicking it*/
.open .fa-bars{
display: none;
}
.open .nav-list{
transform: translateX(0);
}
.open .nav::before{
opacity: 1;
transform: scale(1);
}
let navbar= document.getElementById("navbar")
let link= document.getElementById("link-a")
let showMenu= document.getElementById("show-menu")
link.addEventListener('click',function(){
document.getElementById("navbar").style.display = "none"
});
showMenu.addEventListener('click',function(){
document.getElementById("navbar").style.display = "flex"
});
#navbar{
height: 40px;
width: 100%;
background: red;
}
<div id="navbar" >
<a id="link-a">Click me to hide menu</a>
</div>
<div id="show-menu"> Show menu</div>
small demo to toggle menu
$(document).ready(function(){
$('.outer').click(function () {
$('.inner').slideUp();
/*alert("I BIMS");*/
});
});
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
background: #0b2027;
/*line-height: 18px;*/
height: 100%;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}
a {
text-decoration: none;
color: #fff;
}
.btn-menu {
top: 51px;
display: block;
padding: 20px;
background: #23282d;
}
.btn-menu .icon {
float: right;
}
.verticalMenu {
padding-top: 40px;
width: 20%;
min-width: 300px;
height: 100%;
display: inline-block;
/*line-height: 18px;*/
background: #23282d;
}
.verticalMenu .menu {
width: 100%;
height: 100%;
}
.verticalMenu ul{
list-style: none;
}
.verticalMenu .menu li a{
color: #fff;
display: block;
padding: 15px 20px;
}
.verticalMenu .menu .outer a:hover{
background-color: #00b9eb;
color: #fff;
}
.verticalMenu .menu .inner a:hover{
color: #00b9eb;
}
.verticalMenu .menu .icon{
font-size: 12px;
line-height: 18px;
}
.verticalMenu .menu .icon.left{
float: left;
margin-right: 10px;
}
.verticalMenu .menu .icon.right{
float: right;
margin-left: 10px;
}
.verticalMenu .menu ul{
/*display: none;*/
}
.verticalMenu .menu ul li a {
background: #32373c;
color: #e9e9e9;
}
.verticalMenu .menu .active > a{
background: #1a95d5;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="verticalMenu">
<!--Menu<i class="icon fa fa-bars"></i>-->
<ul class="menu">
<li class="outer"><i class="icon left fa fa-tachometer-alt"></i> Dashboard</li>
<li class="outer"><i class="icon left fa fa-folder"></i> Dokumentverwaltung <i class="icon right fa fa-chevron-down"></i></li>
<ul>
<li class="inner"><i class="icon left fa fa-upload"></i> Upload Datei/Sammlung</li>
<li class="inner"><i class="icon left fa fa-plus-circle"></i> Dateil/Sammlung erstellen</li>
</ul>
<li class="outer"><i class="icon left fa fa-key"></i>Rechteverwaltung <i class="icon right fa fa-chevron-down"></i></li>
<ul>
<li class="inner"><i class="icon left fa fa-file"></i> Datei</li>
<li class="inner"><i class="icon left fa fa-users"></i> Gruppe</li>
<li class="inner"><i class="icon left fa fa-folder-open"></i> Sammlung</li>
</ul>
<li class="outer"><i class="icon left fa fa-user"></i>Userverwaltung <i class="icon right fa fa-chevron-down"></i></li>
<ul>
<li class="inner">User erstellen</li>
<li class="inner">User löschen</li>
<li class="inner">Gruppe erstellen</li>
<li class="inner">Gruppe löschen</li>
<li class="inner">User-Gruppe zuordnen</li>
<li class="inner">User-Gruppe löschen</li>
</ul>
</ul>
</div>
I want a accodion-menu. If the users hits one elment of the "outer"-menu it should succeed as follows:
if(this submenu is closed){
1. open it
2. close the other submenu
} else
{
do nothing
}
It doesn't even react like this. So seems like I'm calling the wrong tag, with the .slideUp() function. Doesn't matter if I use slideUp() or slideDown() - please help :-)
Put this jQuery :
$(document).ready(function(){
$('.outer').click(function () {
$('.inner').slideUp();
$(this).next().find('.inner').slideDown();
});
});
It will slideUp all '.inner' classes and then it will select the good outer with $(this) selector, choose the elements after (I mean the ul), find all '.inner' classes and slide them down.
Check at this jsfiddle : jsfiddle
Wish it helped you.
EDIT : If you want the menu to be wrapped at the beginning, you can make it with Jquery :
$(document).ready(function(){
$('.inner').slideUp();
$('.outer').click(function () {
$('.inner').slideUp();
$(this).next().find('.inner').slideDown();
});
});
or with CSS :
.inner{
display:none;
}
I'm coding a website, i have a navigation bar on top of it, and a sidebar on the left. I want to turn this Fiddle into this one. It can use CSS, JQuery, JavaScript and Bootstrap, when you click the icon, the sidebar drags out to the right. And when you click it again, it collapse to the left.
<ul id="navbar">
<li class="title" id="sidebar_switch"><i class="fa fa-bars" aria- hidden="true"></i></li>
<li class="title"><img alt="Logo" src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-6-xxl.png" height="16px" width="16px"></li>
<li class="title">Title</li>
</ul>
please have a look at the following solution based on your code using CSS3 translate:
HTML:
<div class="sidebar">
<p>
This sidebar goes all screen down, and if you scroll the webpage, the sidebar stays at the same place everytime, the scro
</p>
</div>
<div class="content">
<ul id="navbar">
<li class="title" id="sidebar_switch"><i class="fa fa-bars" aria-hidden="true"></i></li>
<li class="title"><img alt="Logo" src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-6-xxl.png" height="16px" width="16px"></li>
<li class="title">Title</li>
</ul>
<div class="main">
aaaaaaaaaa
</div>
</div>
CSS:
body {
height: 100%;
width: 100%;
margin: 0px;
font-family: sans-serif;
overflow: hidden;
}
a {
text-decoration: none;
}
.title {
float: left;
display: block;
padding: 14px 16px;
}
#navbar {
font-weight: bold;
text-align: center;
float: left;
background-color: #333;
color: white;
list-style-type: none;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
}
.sidebar{
position:fixed;
top:0px;
left:0px;
width:100%;
color:red;
}
.slide{
-webkit-transform: translate3d(25%,0,0);
}
.content{
width:100%;
height: 30em;
position:absolute;
left:0px;
top:0px;
background: white;
-webkit-transition:all .2s linear;
}
.content .slide{
-webkit-transform: translate3d(25%,0,0);
}
i{
cursor: pointer;
}
JS:
$('i').click(function(){
$('.content').toggleClass('slide');
});
JS Fiddle Demo
I have an accordion on my website and I would like for the accordion to be open at the right level depending on where the active class is. I have made a JSFiddle.
JS:
$(document).ready(function ($) {
$('.servicesub').find('.servicesubitem').click(function () {
if ($(this).next().is(':visible')) {
//Collapse
$(this).next().slideToggle('fast');
$(this).removeClass('active');
// $("#footer-wrapper").animate({marginTop: "0px"}, 'fast');
} else {
//Expand
$(this).next().slideToggle('fast');
$(this).siblings().removeClass('active');
$(this).addClass('active');
//hide other panels
$(".servicesubli").not($(this).next()).slideUp('fast');
//$("#footer-wrapper").animate({marginTop: "200px"}, 'fast');
}
});
});
HTML:
<div class="col-xs-12 col-md-3 col-lg-3 servicesub" id="servicesub" >
<li class="servicesubitem active">
<span class="subitem">Web Design,
<br>
Multimedia & Email</span><span class="fa1 fa-globe"> </span>
</li>
<div class="servicesubli">
<ul>
<a href="domains.php">
<li>
Domain Registration
</li>
</a>
<a href="webdesign.php">
<li>
Web Design & Development
</li>
</a>
<a href="webhosting.php">
<li>
Web Hosting
</li>
</a>
<a href="email.php">
<li>
Managed Email Systems
</li>
</a>
</ul>
</div>
<li class="servicesubitem">
<span class="subitem">Vessel
<br>
Security</span><span class="fa1 fa-lock"> </span>
</li>
<div class="servicesubli">
<ul>
<a href="tracking.php">
<li>
Yacht Tracking
</li>
</a>
<a href="ssas.php">
<li>
SSAS
</li>
</a>
<a href="#">
<li>
SAT C
</li>
</a>
</ul>
</div>
</div>
CSS:
* Service Sub */
.servicesub { padding:10px; }
.servicesub ul { list-style-type: none; padding: 0px; color: #fff;}
.servicesub li{ font-size: 14px; height: 70px; padding: 17px 0px 10px 20px; margin-top: 10px; text-transform: uppercase; }
.servicesub li a {text-decoration: none;}
.servicesub li a:hover {color:#fff;}
.servicesub li { background-color: #017CEB; }
.servicesub li:hover { background-color: #015BAC; }
.servicesub li.active { background-color: #015BAC; }
.servicesub span:after { color:#fff; font-family: FontAwesome; display: inline-block; width: 1.2em; font-size: 40px; position: absolute; text-align: center; margin-top: -9px; }
#servicesub.stick { position: fixed; top: 80px; max-width: 293px; }
.subitem { color:#fff; height:58px; width: 215px; position: absolute; right: 10px; text-align: center; }
.servicesubitem { cursor: pointer; }
.servicesubli { cursor: pointer; display: none; }
.servicesubli.default { display: block; }
.servicesubli ul { width: 100%; font-size: 14px;}
.servicesubli li { padding: 8px; margin-top: 1px; text-transform: uppercase; height: 35px; text-align: center;}
.servicesubli a { text-decoration: none; color: #fff; }
.servicesub .getintouch { background-color: #00539f; padding: 10px; height: auto;}
.servicesub .getintouch:hover { background-color: #00539f; }
.servicesub .getintouch h3 { color: #fff; text-align: center; }
.servicesub .getintouch p { color:#fff; text-align: center; }
As you can see the accordion works to click on and the active class (which is set manually for this demo) is there I just want it so that the correct accordion part is toggled when the page is loaded. Thanks in advance.
To recycle your logic, You can just add your .active class to whichever element you wish, then search for .servicesubli.active on ready. Observe the following...
<div class="servicesubli active">
$(function() {
[...]
$('.servicesubli.active').slideToggle('fast');
});
JSFiddle Link - demo
Per comments, if you wish to target off servicesubitem.active, just modify to the following...
$('.servicesubitem.active').next('.servicesubli').addClass('active').slideToggle('fast');
JSFiddle Link - demo - .servicesubitem.active selector
Well you just need to trigger the click event once the page is loaded like below:
$('.servicesub').find('.active').trigger( "click" );
See the jsfiddle here: http://jsfiddle.net/beroza/a1mbgyqx/