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.
Related
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
I'm creating a navigation bar where, initially, you have images. Upon hovering over them, the image's opacity goes down to 0 and text's goes up to 1. So the text should replace the image.
I have done so, but the problem I'm trying to solve is to position text on top of the image centered both horizontally and vertically.
Only the first one of the list has CSS applied, thought I would figure out on one element first and then apply solution to the rest later.
Here's my codepen: https://codepen.io/Cryptooo/pen/NWGwQwv
.menu-icons li {
margin-top: 50%;
}
.menu-icons {
display: flex;
flex-direction: column;
align-items: center;
}
.menu-center {
display: flex;
flex-direction: column;
align-items: center;
}
#home {
height: 25px;
width: 27px;
}
.menu-center #home,
.menu-center .home-txt {
transition: opacity 0.3s ease-in-out;
}
.menu-center .home-txt {
position: absolute;
color: #08efcc;
opacity: 0;
}
.menu-center:hover #home {
opacity: 0;
}
.menu-center:hover .home-txt {
opacity: 1;
}
<nav class="menu-section">
<ul class="menu-icons">
<div class="menu-center">
<li>
<img id="home" src="/Images/Home.png">
</li>
<div class="home-txt">Home</div>
</div>
<div class="menu-center">
<li>
<img id="about" src="/Images/About.png">
</li>
<div class="about-txt">About</div>
</div>
<div class="menu-center">
<li>
<img id="skills" src="/Images/Skills.png">
</li>
<div class="skills-txt">Skills</div>
</div>
<div class="menu-center">
<li>
<img id="work" src="/Images/Work.png">
</li>
<div class="work-txt">Work</div>
</div>
<div class="menu-center">
<li>
<img id="contact" src="/Images/Contact.png">
</li>
<div class="contact-txt">Contact</div>
</div>
</ul>
</nav>
Here is how it works for me, assuming I understand your question!
.menu-icons li {
margin-top: 50%;
list-style-type: none;
}
.menu-icons {
display: flex;
flex-direction: column;
align-items: center;
}
.menu-center {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
#home {
height: 25px;
width: 27px;
}
.menu-center #home,
.menu-center .home-txt {
transition: opacity 0.3s ease-in-out;
}
.menu-center .home-txt {
position: absolute;
left: 0;
width: 100%;
top: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #08efcc;
opacity: 0;
}
.menu-center:hover #home {
opacity: 0;
}
.menu-center:hover .home-txt {
opacity: 1;
}
<nav class="menu-section">
<ul class="menu-icons">
<div class="menu-center">
<li>
<img id="home" src="/Images/Home.png">
</li>
<div class="home-txt">Home</div>
</div>
<div class="menu-center">
<li>
<img id="about" src="/Images/About.png">
</li>
<div class="about-txt">About</div>
</div>
<div class="menu-center">
<li>
<img id="skills" src="/Images/Skills.png">
</li>
<div class="skills-txt">Skills</div>
</div>
<div class="menu-center">
<li>
<img id="work" src="/Images/Work.png">
</li>
<div class="work-txt">Work</div>
</div>
<div class="menu-center">
<li>
<img id="contact" src="/Images/Contact.png">
</li>
<div class="contact-txt">Contact</div>
</div>
</ul>
</nav>
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.
Hello I have manually made a toggle navigation button that kicks in at 980px on my project. It works fine, it displays the navigation.
However, when I try to slideToggle the menu to make it show in a more elegant way, the direction of the height growht is from bottom to top.
I have attached a video with the behaviour. Here it is: https://www.screencast.com/t/wAkkHiRP5h
A jsFiddle with the functionality can be found here: https://jsfiddle.net/grimhilt/7x49x6sk/
The HTML is:
<nav id="main-navigation" class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a href="#navbar-brand-centered" class="main-nav-trigger">
<span>
<em aria-hidden="true"></em>
</span>
</a>
<div id="logo" class="navbar-brand navbar-brand-centered">
<a href="/">
<img src="assets/img/logo.png" alt="logo" class="img-responsive">
</a>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="navbar-brand-centered">
<ul class="nav navbar navbar-nav navbar-left">
<li>ALbums</li>
<li>Boxes</li>
<li>DVD Cases</li>
<li>Shop</li>
</ul>
<ul class="nav navbar navbar-nav navbar-right">
<li>About us</li>
<li>Journal</li>
<li>Contact</li>
<li><i class="fa fa-search" aria-hidden="true"></i></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
The CSS:
#main-navigation.nav-open #navbar-brand-centered,
#navbar-brand-centered {
/*
show primary nav - mobile only
:target is used to show navigation on no-js devices
*/
display: block;
}
#main-navigation #navbar-brand-centered {
position: absolute;
background-color: #9e865f;
z-index: 2;
top: 100px;
left: 0;
width: 100%;
display: none;
box-shadow: 0 14px 20px rgba(0, 0, 0, 0.2);
overflow: hidden;
text-align: center;
border: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
The jQuery is:
var mainHeader = $('#main-navigation');
mainHeader.on('click', '.main-nav-trigger', function(event){
// open primary navigation on mobile
event.preventDefault();
mainHeader.toggleClass('nav-open');
$( "#navbar-brand-centered" ).slideToggle( "slow" );
});
How can I make the #navbar-brand-centered height animate from top to bottom as it should? Thanks a bunch!
Just remove these lines:
mainHeader.toggleClass('nav-open');
$('#navbar-brand-centered').toggleClass('is-visible');
and add display:none to the main-navigation id
var mainHeader = $('#main-navigation');
mainHeader.on('click', '.main-nav-trigger', function(event) {
// open primary navigation on mobile
event.preventDefault();
// mainHeader.toggleClass('nav-open');
// $('#navbar-brand-centered').toggleClass('is-visible');
$("#navbar-brand-centered").slideToggle("slow")
});
#main-header {
position: absolute;
min-height: 100px;
z-index: 10;
top: 0;
left: 0;
width: 100%;
display: table;
}
#main-navigation {
display: none;
display: table-cell;
vertical-align: middle;
padding: 45px 0;
margin-bottom: 0;
background-color: #151725;
border: none !important;
}
#main-navigation.nav-open #navbar-brand-centered,
#navbar-brand-centered ul:target {
/*
show primary nav - mobile only
:target is used to show navigation on no-js devices
*/
display: block;
}
#main-navigation #navbar-brand-centered {
position: absolute;
background-color: #9e865f;
z-index: 2;
top: 100px;
left: 0;
width: 100%;
display: none;
box-shadow: 0 14px 20px rgba(0, 0, 0, 0.2);
overflow: hidden;
text-align: center;
border: none;
/*-webkit-backface-visibility: hidden;*/
/*backface-visibility: hidden;*/
}
#main-navigation.nav-open #navbar-brand-centered {
display: block;
}
#main-navigation .main-nav-trigger {
float: right;
display: inline-block;
height: 100%;
text-transform: uppercase;
right: 0;
}
#main-navigation .main-nav-trigger em,
#main-navigation .main-nav-trigger em::after,
#main-navigation .main-nav-trigger em::before {
/* this is the menu icon */
display: block;
position: relative;
height: 2px;
width: 22px;
background-color: #9e865f;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="main-header">
<nav id="main-navigation" class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a href="#navbar-brand-centered" class="main-nav-trigger">
<span>
<em aria-hidden="true"></em>
</span>
</a>
<div id="logo" class="navbar-brand navbar-brand-centered">
<a href="/">
<img src="assets/img/logo.png" alt="logo" class="img-responsive">
</a>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="navbar-brand-centered">
<ul class="nav navbar navbar-nav navbar-left">
<li>ALbums</li>
<li>Boxes</li>
<li>DVD Cases</li>
<li>Shop</li>
</ul>
<ul class="nav navbar navbar-nav navbar-right">
<li>About us</li>
<li>Journal</li>
<li>Contact</li>
<li><i class="fa fa-search" aria-hidden="true"></i></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</header>
Ok so i think the key here is understanding what the .slideToggle() does.
It will toggle between display:block; when shown and display:none; when hidden. It does this with a sliding animate on the height of the element.
In your code you are also messing with the display properties:
$('#navbar-brand-centered').toggleClass('is-visible');
mainHeader.toggleClass('nav-open');
So your adding display:block; then the jQuery fucntion is turning toggling it.
So if you remove this, it works. see eaxmple:
var mainHeader = $('#main-navigation');
mainHeader.on('click', '.main-nav-trigger', function(event){
// open primary navigation on mobile
event.preventDefault();
//mainHeader.toggleClass('nav-open');
//$('#navbar-brand-centered').toggleClass('is-visible');
$( "#navbar-brand-centered" ).slideToggle( "slow" )
});
#main-header {
position: absolute;
min-height: 100px;
z-index: 10;
top: 0;
left: 0;
width: 100%;
display: table;
}
#main-navigation {
display: table-cell;
vertical-align: middle;
padding: 45px 0;
margin-bottom: 0;
background-color: #151725;
border: none !important;
}
#main-navigation.nav-open #navbar-brand-centered,
#navbar-brand-centered ul:target {
/*
show primary nav - mobile only
:target is used to show navigation on no-js devices
*/
display: block;
}
#main-navigation #navbar-brand-centered {
position: absolute;
background-color: #9e865f;
z-index: 2;
top: 100px;
left: 0;
width: 100%;
display: none;
box-shadow: 0 14px 20px rgba(0, 0, 0, 0.2);
overflow: hidden;
text-align: center;
border: none;
/*-webkit-backface-visibility: hidden;*/
/*backface-visibility: hidden;*/
}
#main-navigation.nav-open #navbar-brand-centered {
//display: block;
}
#main-navigation .main-nav-trigger {
float: right;
display: inline-block;
height: 100%;
text-transform: uppercase;
right: 0;
}
#main-navigation .main-nav-trigger em,
#main-navigation .main-nav-trigger em::after,
#main-navigation .main-nav-trigger em::before {
/* this is the menu icon */
display: block;
position: relative;
height: 2px;
width: 22px;
background-color: #9e865f;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<header id="main-header">
<nav id="main-navigation" class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a href="#navbar-brand-centered" class="main-nav-trigger">
<span>
<em aria-hidden="true"></em>
</span>
</a>
<div id="logo" class="navbar-brand navbar-brand-centered">
<a href="/">
<img src="assets/img/logo.png" alt="logo" class="img-responsive">
</a>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="navbar-brand-centered">
<ul class="nav navbar navbar-nav navbar-left">
<li>ALbums</li>
<li>Boxes</li>
<li>DVD Cases</li>
<li>Shop</li>
</ul>
<ul class="nav navbar navbar-nav navbar-right">
<li>About us</li>
<li>Journal</li>
<li>Contact</li>
<li><i class="fa fa-search" aria-hidden="true"></i></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
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