In this codepen demo, I able to animate the displaying of an underline on nav elements. But, how do I keep the underline on the current page? The current page is titled Support-Tracker.
css:
.navbar .navbar-nav .nav-item .nav-link {
position: relative;
text-decoration: none;
font-size: 1.2em;
font-weight: bold;
color: white;
cursor: pointer;
padding-right: 2em;
padding-left: 2em;
justify-content: center;
}
.navbar .navbar-nav .nav-item .nav-link::before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #FFF;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
.navbar .navbar-nav .nav-item .nav-link:hover::before {
visibility: visible;
transform: scaleX(1);
}
nav element:
<nav class="navbar navbar-expand-lg navbar-dark navbar-custom">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link">EU34</a></li>
<li class="nav-item"><a class="nav-link">Support-Tracker</a></li>
<li class="nav-item"><a class="nav-link">CNDNet Rolling Log</a></li>
</ul>
</nav>
When you access the specific page you add the "targeted" navigation item (.nav-item) an class, like "active" or "current-page".
If you done this and added the following CSS Code to your css file, everything should work fine.
.navbar .navbar-nav .nav-item.current-page .nav-link::before {
visibility: visible;
transform: scaleX(1);
}
--
So your navbar on the current page looks something like that:
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link">EU34</a></li>
<li class="nav-item current-page"><a class="nav-link">Support-Tracker</a></li>
<li class="nav-item"><a class="nav-link">CNDNet Rolling Log</a></li>
</ul>
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 am making a menu with pure Vanilla JS, because I want it to implement it in an Angular 8 project.
It is working good at some point, because it opens the hidden menu very good. The thing is that when I want to open a second level hidden menu , then it closes everything. For example if you click in 'Soluciones' link, then it opens the submenu very good. After that you must be able to click 'Correo y herramientas' in order to show a second level hidden menu, which is: Correo 1, Correo 2, Correo 3 links; but before showing this last links, it closes everything.
I have a codepen link to show this: https://codepen.io/Bungo808/pen/ZEBpmXG
Any advice would be helpfull!!
My HTML
<div class="red">
<nav id="nav" class="sub-menu open">
<ul class="list-unstyled">
<li id="subb">
<a class="link">Quiénes somos</a>
<img id="iplus" class="splus" src="../../assets/img/splus.svg" alt="">
<ul id="smenu" >
<li>
<a class="link">Sobre eSource</a>
</li>
<li>
<a class="link">Amarello</a>
</li>
</ul>
</li>
<li id="subb">
<a class="link">Soluciones</a>
<img id="iplus" class="splus" src="../../assets/img/splus.svg" alt="">
<ul id="smenu" >
<li id="subb">
<a class="link">Correo y herramientas</a>
<ul>
<li><a class="link">Correo 1</a></li>
<li><a class="link">Correo 2</a></li>
<li><a class="link">Correo 3</a></li>
</ul>
</li>
<li id="subb">
<a class="link">Infrastructure as a Service</a>
<ul>
<li><a class="link">Infra 1</a></li>
<li><a class="link">Infra 2</a></li>
<li><a class="link">Infra 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<div class="overlay"></div>
</div>
My JS
let list_items = document.querySelectorAll('#subb');
// Show Submenu
for (let i = 0; i < list_items.length; i++) {
list_items[i].addEventListener("click", show);
}
function show() {
this.classList.toggle("myClass");
console.log('I clicked it!')
}
A part of my CSS, which is the responsible to open the hidden menu
.sub-menu {
padding: 0 0 0 2%;
left: 0px;
top: 0;
transition: all 0.3s ease;
height: 100%;
width: 280px;
position: fixed;
margin: 0;
background-color: #f9f9f9;
border-radius: 0;
z-index: 10;
overflow: hidden;
}
.sub-menu > ul {
width: 100%;
height: 100%;
margin-top: 60px;
}
.sub-menu li {
position: relative;
display: block;
list-style: none;
padding: 2px 0 2px 14px;
margin-left: 0;
cursor: pointer;
color: white;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
&:first-child{
// border: 1px solid red;
}
}
.sub-menu li a {
color: #40465f;
font-size: 16px;
font-weight: 300;
width: 100%;
display: block;
line-height: 22px;
padding: 6px 0;
&:hover{
color: #2487FC;
text-decoration: none;
}
}
.sub-menu ul ul li a {
color: #40465f;
font-size: 14px;
font-weight: 300;
width: 100%;
line-height: 22px;
padding: 6px 0;
&:hover{
color: #2487FC;
text-decoration: none;
}
}
.sub-menu ul ul ul li a {
color: #40465f;
font-size: 14px;
font-weight: 300;
width: 100%;
display: block;
line-height: 22px;
padding: 6px 0;
&:hover{
color: #2487FC;
text-decoration: none;
}
}
.sub-menu ul ul{
display: none;
background: white;
}
#subb.myClass > ul{
display: block;
}
.sub-menu ul ul ul{
display: none;
border: 1px solid red;
}
The click event is propagating over and over again. So eventually the class gets toggled off. To prevent this add .stopPropagation(); to your show() function like this:
function show(e) {
e.stopPropagation();
this.classList.toggle("myClass");
console.log('I clicked it!')
}
This question already has answers here:
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
Closed 2 years ago.
So when the default color for my Nav items is black. Now i'm trying to use my css to change the color to white but it isn't working. bothe the nav brand and the nav links
could it be the scripts on the page affecting it? if not how do i change the default bootstrap css settings
.navbar{
padding: 20px 0px;
box-shadow: none;
background-color: transparent;
}
.navbar-brand{
font-size: 28px;
font-weight: 700;
color: #3a3a3a;
}
.navbar .navbar-expand-md .navbar-nav .nav-link{
position: relative;
font-size: 16px;
font-weight: 300;
color: #ffffff;
padding: 0px 30px 0px;
transition: all .5s ease-in-out;
}
.navbar-nav .nav-item .nav-link::before {
content: '';
position: absolute;
bottom: 0px;
left: 0;
width: 0px;
height: 2px;
background: #ffffff;
transition: all .5s ease-in-out;
}
.navbar-nav .nav-item .nav-link:hover::before,
.navbar-nav .nav-item .nav-link.active::before {
width: 40px;
}
<nav class="navbar navbar-expand-md navbar-light fixed-top">
<div class="container">
<a class="navbar-brand" href="#page-top">Otikes Fitness</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#page-top">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#About">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
The problem is with the CSS selector. Instead of .navbar .navbar-expand-md .navbar-nav .nav-link it should be .navbar.navbar-expand-md .navbar-nav .nav-link because .navbar-expand-md isn't a child of .navbar, it's the same element.
.navbar.navbar-expand-md .navbar-nav .nav-link {
position: relative;
font-size: 16px;
font-weight: 300;
color: #ffffff;
padding: 0px 30px 0px;
transition: all .5s ease-in-out;
}
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.
I've been playing around with my bootstrap navbar. Its original position was set as "fixed". Now that I have sent it to absolute there's a horizontal scrollbar that appears. How can I prevent the scrollbar from appearing? Thanks!
Keep in mind that "overflow-x: auto;" and "white-space: nowrap;" in my nav ID was just a method I tried to prevent the horizontal scrollbar from appearing.
#nav {
height: 100px;
display: block;
position: absolute;
top: 0;
width: 100%;
transition: all ease .5s;
z-index: 9999;
overflow-x: auto;
white-space: nowrap;
}
#logo {
height: 45px;
transition: all ease .5s;
margin-top: 15px;
margin-left: 50px;
}
#nav a {
transition: all ease .5s;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: white;
}
.navbar-default .navbar-nav > li > a {
margin-right: 50px;
margin-top: 30px;
font-size: 18px;
font-weight: bolder;
}
<div class="navbar navbar-default" id = "nav">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="img/logo.png" id="logo" alt="Logo Motive Digital"/></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>ABOUT</li>
<li>SERVICES</li>
<li>WORK</li>
<li>CONTACT</li>
</ul>
</div>
You should take care of its parent's margin, which is body :
body{
margin:0px;
}
By changing overflow-x:auto to overflow-x:hidden I was able to fix my issue.