I thought I did everything right but my code doesn't work. I intend to change the background for the selected tab. Here's my trial.
<script>
$('#navigation li').click(function() {
$('#navigation li').removeClass('active');
$(this).addClass('active');
});
</script>
The html is here
<ul class="navbar-nav ml-auto" id="navigation">
<li class="nav-item active">
<a class="nav-link " href="{% url 'home' %}" id="nav">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'view' %}" id="nav">Work</a>
</li>
</ul>
the active class
<style>
.active{background-color:black}
</style>
I've tried making comparisons to available examples here on stackoverflow but not working for me.
I managed to accomplish your goal with the following code:
<!DOCTYPE html>
<head>
<style>
.active{background-color:black}
</style>
</head>
<body>
<ul class="navbar-nav ml-auto" id="navigation">
<li onclick="changeBackground(this.id)" class="nav-item" id="home">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li onclick="changeBackground(this.id)" id="work" class="nav-item">
<a class="nav-link" href="#" id="work">Work</a>
</li>
</ul>
<script>
function changeBackground(id) {
// First remove all "active classes"
let otherElements = document.getElementsByClassName("nav-item")
for (index=0; index < otherElements.length; index++) {
otherElements[index].classList.remove("active")
}
// Then add the class to the just clicked element
let clickedNavItem = document.getElementById(id)
clickedNavItem.classList.add("active")
}
</script>
</body>
</html>
Related
I want to active nav-bar menu when clicked from nav bar, i am using the following code, to active nav menu when clicked, but it is not working for me.
i am using bootstrap classes for add nav-bar into my webpage.
please help me to find where i am mistaken?
$(document).ready(function() {
$(".mr-auto .nav-item").bind("click", function(event) {
event.preventDefault();
var clickedItem = $(this);
$(".mr-auto .nav-item").each(function() {
$(this).removeClass("active");
});
clickedItem.addClass("active");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header id="main-header" class="header header1">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="./">
<img src="images/site-logo.png" alt="Site-logo">
</a>
<div id="toggle-icon" class="icon-btn">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="menu-nav" class="navigation-menu">
<div class="navbar-collap" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="./">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="careers">Careers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio">Portfolio</a>
</li>
<li class="nav-item contact-link">
<a class="nav-link" href="contact">Contact-us</a>
</li>
</ul>
<div class="button">
<a class="btn btn1" id="cont" href="contact.php">contact us <i class="icon-feature-6"></i></a>
</div>
</div>
</div>
</nav>
</header>
The .active class does not highlight the nav-link.
Solution 1
add css:
.mr-auto .nav-item.active a{background: blue;color:#fff}
Solution 2
Try this:
$(document).ready(function() {
$(".mr-auto .nav-item a").bind("click", function(event) {
event.preventDefault();
var clickedItem = $(this);
$(".mr-auto .nav-item a.active").removeClass("active btn-primary");
clickedItem.addClass("active btn-primary");
});
});
I have to customize sidebar that is provided by COREUI 4.x theme. Below is the code for my sidebar
<div class="app-body">
<div class="sidebar">
<nav class="sidebar-nav">
<ul class="nav">
<li class="nav-item">
<a
class="nav-link"
routerLink="/dashboard"
[routerLinkActive]="['active']"
[routerLinkActiveOptions]="{ exact: true }"
>
<i class="icon-speedometer"></i> Dashboard
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#"
routerLink="/alerts-configuration"
[routerLinkActive]="['active']"
[routerLinkActiveOptions]="{ exact: true }"
>
<i class="icon-layers"></i> Alert Configuration
</a>
</li>
<li
class="nav-item nav-dropdown"
dropdown
[routerLinkActive]="['active']"
[routerLinkActiveOptions]="{ exact: true }"
>
<a class="nav-link nav-dropdown-toggle">
<i class="icon-puzzle"></i>Administration
</a>
<ul class="nav-dropdown-items">
<li class="nav-item">
<a
class="nav-link"
routerLink="/device-management/devices"
[routerLinkActive]="['active']"
[routerLinkActiveOptions]="{ exact: true }"
>
<i class=""></i>Devices Management
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
routerLink="/sites"
[routerLinkActive]="['active']"
[routerLinkActiveOptions]="{ exact: true }"
>
<i class="icon-settings"></i>Sites Management
</a>
</li>
</ul>
</li>
</ul>
</nav>
<button class="sidebar-minimizer brand-minimizer" type="button"></button>
</div>
</div>
Now when I try to click on Administration, it wont open the dropdown and also when I try to minimize from the arrow on the bottom, this wont work as well. Please help!
I was having this issue also. I figured out that if the JavaScript files that control sidebar animation are added before the page is generated the sidebar doesn't work.
The solution:
Add the CORE UI JavaScript files at the end.
Looks a little like this:
<html>
<body>
{the entire html page}
<script src="https://coreui.io/demo/free/3.4.0/js/main.js" async defer></script>
</body>
</html>
"async defer" may or may not be necessary.
With coreui 4.x and BS 5 you should add data-coreui="navigation" to the sidebar-nav element and it will start working correctly.
Please find below my code that is working.
<li class="nav-item nav-dropdown " [appIsAuthorized]="roleconst.ProductAdminAbove" (click)="status=!status"
[ngClass]="status ? 'open' : ''">
<a class="nav-link nav-dropdown-toggle ">
<i class="nav-icon icon-puzzle"></i> Management
</a>
This question already has answers here:
How to center nav-items in Bootstrap? [duplicate]
(3 answers)
Bootstrap NavBar with left, center or right aligned items
(14 answers)
Closed 2 years ago.
I have two navbars, one of which I want the text centered, but I'm having trouble understanding why I am unsuccessful in doing so. I am new to navbars in general as well as bootstrap, so I apologize If my mistake is obvious. Is it something I should be implementing in the bootstrap end, or is it something that can be addressed within the <style> tags? Thanks.
<nav class="navbar navbar-expand-md navbar-dark" style="background-color: #CBB677">
<ul class="nav navbar-nav navbar-center">
<li class="nav-item active">
<a class="nav-link" href="CoordinatorHomePage.aspx" >COORDINATORS</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="TeacherHomePage.aspx">TEACHERS</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="ParentsHome.aspx">PARENTS</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="StudentHome.aspx">STUDENTS</a>
</li>
</ul>
</nav>
IMO, Bootstrap is unnecessarily hard. I use raw CSS JS and HTML, but I'll try to help.
Bootstrap has this example on their site:
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
That should be what you're looking for.
You could also implement a navbar in raw HTML/CSS/JS:
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" src="index.css">
<title>Navbar</title>
</head>
<body>
<navbar>
<button onclick="window.location.href = '#'" class="active">Something</button>
<button onclick="window.location.href = '#'">Something else</button>
<button onclick="window.location.href = '#'">A third thing</button>
</navbar>
</body>
</html>
/* index.css */
navbar {
width: 100%;
height: 10%;
background-color: #d4d4d4;
position: fixed;
top: 0px;
left: 0px;
text-align: center;
}
navbar>button {
color: #00ccff;
}
navbar>button.active {
color: #00ccff;
}
Lets say that i have a navbar with a brand text and 3 links like so:
PetesPCworld | Hardware | Software | Support |
Using this example: If i click on lets say "Hardware" then everything is okay, i can use the Brand text (PetesPCworld) to go back to the home page, but if i do this once again, lets say i click on the "Hardware" again, then i cant go back to the homepage using the Brand text.
And by default you start at the home page (duh..)
HTML CODE:
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Peter">
<title>Számítógépes Hardver</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="main-style/main-style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<!-- W A R N I N G !!!! --------------- W A R N I N G !!!! -->
<!-- This is basically a school project, and in no way i'm a professional ! -->
<!-- Oh boi, this is some fine spaghet.. -->
<body>
<div id="nav-container" class="jumbotron text-center" style="margin-bottom:0">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- I think the problem is here with this <a> tag. -->
<a class="navbar-brand" href="#home">Számítógépes Hardver</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav nav">
<li class="nav-item">
<a class="nav-link" href="#MOBOandCPU" data-toggle="tab">Alaplapok, CPU</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Memory-Types" data-toggle="tab">Memóriák</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bővítőkártyák</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Monitorok</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nyomtatók</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lapolvasók</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Háttértárak</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kábelek</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Mutató Eszközök</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Multimédiás eszközök</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Hordozható Adattárolók</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Elavult Technológiák</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="tab-content">
<div class="tab-pane active" id="home">
<div id="header-container" class="jumbotron text-center" style="margin-bottom:0">
<h2 id="header">Számítógépes Hardver</h2>
</div>
</div>
<div class="tab-pane" id="MOBOandCPU">
<p>dancing polish cow</p>
</div>
<div class="tab-pane" id="Memory-Types">
<p>dancing ukranian toilet</p>
</div>
</div>
</body>
</html>
CSS Code
#nav-container{
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
}
#header{
padding: 1%;
}
#header-container{
padding: 0px;
margin: 0px;
}
This will be lot's of typing involved.
I've got a page I need to slightly change design when the size is decreased. Including but not limited to some parts of menus swapping places and extra design features on some fields
At the moment I am trying to strictly stick to Bootstrap 4 documentation on responsive breakpoints (https://getbootstrap.com/docs/4.0/layout/overview/)
Just giving an example of one of the menus
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Navigation Menu</title>
<script src="Libs/JQuery/jquery-3.3.1.slim.min.js"></script>
<script>window.jQuery || document.write('<script src="Libs/JQuery/jquery-3.3.1.slim.min.js"><\/script>')</script>
<script src="Libs/Popper/popper.min.js"></script>
<script src="Libs/Bootstrap/js/bootstrap.bundle.js"></script>
<link rel="stylesheet" type="text/css" href="Libs/Bootstrap/css/bootstrap.css" media="all">
<link rel="stylesheet" type="text/css" href="Css/TopMenu.css" media="all">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="top-menu">
<a class="navbar-brand" href="#"><img src="Images/logo.png" alt="Logo">
<!-- Carousel -->
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse main-navbar" id="main-navbar">
<ul class="nav navbar-nav mr-auto navbar-one" id="navbar-one">
<li class="nav-item">
<a class="nav-link" href="#">PRODUKTE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DIENSTLEISTUNGEN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">UNTERNEHMEN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">NEWSROOM-STORY</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SPOTLIGHT:TECHNIK
<?php //echo $spotlight; ?>
</a>
</li>
</ul>
<ul class="nav navbar-nav smaller_font mr-auto navbar-two" id="navbar-two">
<li class="nav-item">
<a class="nav-link text-danger" href="#">KUNDEN-COCKPIT</a>
</li>
<li class="nav-itemv">
<a class="nav-link text-danger" href="#">SHOP</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DATENSCHUTZ</a>
</li>
<li class="nav-itemv">
<a class="nav-link" href="#">KONTAKT</a>
</li>
</ul>
<!-- Language Menu -->
<ul class="nav navbar-nav mr-auto language-menu" id="language-menu">
<li class="nav-item">
<a class="nav-link" href="#">DE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">EN</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
And the extra css is as follows
.smaller_font{
font-size: 80%;
}
#include media-breakpoint-down(md){
.main-navbar{
border-bottom: solid 1px;
}
}
At the moment I am trying to use #include media-breakpoint-down(md){...}
But I get no reaction from the design which does absolutely NOTHING when I decrease the size.
The idea is that the fields in the menu are going to have 1px bottom border.
I know that there's also an option of making invisible elements and then making them visible as discussed here bootstrap 4 responsive utilities visible / hidden xs sm lg not working
or setting width in pixels with "#media" tag but using "#include media-breakpoint-down()" tag seems to make more sense overall (just a gut feeling).
I need someway to get things to work on small scale, so that I can build from there :-)
"At the moment I am trying to use #include
media-breakpoint-down(md){...} But I get no reaction from the design
which does absolutely NOTHING when I decrease the size."
This isn't CSS...
#include media-breakpoint-down(md){
.main-navbar{
border-bottom: solid 1px;
}
}
It's SASS. SASS is "compiled" into CSS server-side using a SASS processor. The browser doesn't understand SASS, it only understands CSS.
Some good info found here so decided to go with imperfect, but still good solution of creating invisible object in your code.