i need to change the "active" class depending on the site you are right now when clicking the header.
Ive seen some examples using a php check if you are on the page "noten.php" and it would change the navbar class to active accordingly, also checked some Javascript like this
$('.navbar-nav .nav-link').click(function(){
$('.navbar-nav .nav-item').removeClass('active');
$(this).addClass('active');
})
but nothing worked
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="/">Projekt</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Startseite</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/noten.php">Noten</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Soon</a>
</li>
</ul>
We don't know much about your PHP logic, but the implementation may be pretty simple:
<?php
$uri_path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
$uri_segments = explode('/', $uri_path);
?>
<li class="nav-item <?php echo 'active page-' . $uri_segments[0]; ?>">
<a class="nav-link" href="/">Startseite</a>
</li>
For the url http://foobar/first/second will add the class page-first.
Ive found a way.
Adding this at the top of my header include
<?php
$pg = basename(substr($_SERVER['PHP_SELF'],0,strrpos($_SERVER['PHP_SELF'],'.'))); // get file name from url and strip extension
?>
and then adding this to the Navbar itself
<li class="nav-item <?php if($pg=='index'){?>active<?php }?>">
<a class="nav-link" href="/">Startseite</a>
</li>
Related
I have html for a navbar (from bootstrap) which I have to copy paste every time I add a new page to my website. I want to factor out the navbar html to a separate file and have every other html file just inherit the html for it. I am using vanilla JS, HTML and CSS so stuff like {%extends ...%} is not really an option.
Navbar html:
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="index.html">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="about_me.html">About Me<span class="sr-only"></span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="ec.html">Extracirriculuars<span class="sr-only"></span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="interests.html">Interests<span class="sr-only"></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/dddictionary">Github</a>
</li>
</ul>
</div>
</nav>
Any help is appreciated!
I have a strange problem. In my PHP/HTML program I am able to use JQUERY, but I cannot use JQUERY to modify attributs of elements.
The click, val and submit functions work fine, but the addClass, removeClass and attr functions don't!
$('#mVote').click(function() {
alert("Vote");
$("a.active").each(function() {
$(this).removeClass("active");
})
$('#mVote').addClass("active");
$('#mVote').attr("test", "test");
$("#mMode").val("vote");
$("#menu").submit();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Abstimmung</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<form id="menu" method="POST">
<input type="hidden" id="mMode" name="mode">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a id="mVote" class="nav-link mItem" aria-current="page" href="#">Abstimmung</a>
</li>
<li class="nav-item">
<a id="mLogout" class="nav-link mItem" aria-current="page" href="#">Abmelden</a>
</li>
<li class="nav-item">
<a id="mUser" class="nav-link mItem" aria-current="page" href="#">Benutzerdaten</a>
</li>
<li class="nav-item">
<a id="mCharts" class="nav-link mItem" aria-current="page">Edit Charts</a>
</li>
<li class="nav-item">
<a id="mUpdSong" class="nav-link mItem" aria-current="page">Update Song DB</a>
</li>
<li class="nav-item">
<a id="mUpdImg" class="nav-link mItem " aria-current="page">Update Covers</a>
</li>
<li class="nav-item">
<a id="mTest" class="nav-link mItem" aria-current="page">Test</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</form>
</div>
</div>
</nav>
I am using bootstrap 5.1.3 and JQUERY 3.6.0
In a small test program the addClass, removeClass and attr functions work fine!
Has anybody any idea what the problem could be?
Thanks for your support!
Edit
I made a big thinking problem.
The functions are working, but they are useless!
Due to the folling submit a POST is executing and is overriding the changes!
Due to the fact, that PHP is only running on the server which sends the HTML code to the client, I have to use a POST parameter to set the active class name to the active menu item.
Changes should be made in your JS code line 3
From:
$('."navbar-brand').addClass("active");
To:
$('.navbar-brand').addClass("active");
It's throwing an error and blocking the rest of the code from executing.
I have a bootstrap navbar and I am trying to use javascript to change which nav link has the active click based on which navlink was clicked. The problem I am having is that when the user clicks a nav link the javscript works fine, but then when the browser navigates to the corresponding page the changes that the javascript made to the HTML is lost.
CODE:
document.querySelectorAll(".nav-item").forEach((link) => {
link.addEventListener("click", highlightActive, false);
});
function highlightActive(e) { document.querySelector(".active").classList.remove("active");
e.target.classList.add("active");
console.log(`Link clicked: ${e.target}`);
}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">LCSRanker</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav nav-pills">
<li class="nav-item active">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/create/predictions">Create</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/show/standings">Standings</a>
</li>
</ul>
</div>
</nav>
Add the active class to the correct nav item in each html file.
Edit: Since the user commented that he's using EJS and not plain html files, the previous answer is not valid.
You can check the URL when the page loads and add the active class accordingly
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
So I just recently started practicing HTML and CSS on my own time. I just started building a website using bootstrap and I'm having trouble with this navigation bar: navbar You can find it on this webstie: https://getbootstrap.com/docs/4.0/components/navbar/
and scroll down to "Nav" (i dont know how to include HTML code here)
What I want to do is have the items "Home" "Features" "Pricing" and "Disabled" "Search" (A search bar that I will implement) floating to the right. Eventually I will have something like:
NavBar-----------------------------------------------------------------Home Features Pricing Disabled #Search
But I can't seem to do it. I've tried to use span tags, ul tags, I've tried to remove some div elements but nothing is working. Any help?
Also I have a question. If I put:
"Navbar"
inside a div, then it is still inline with the rest of the nav elements (Home, Pricing etc...) which are in a different div. How is that possible?
Aren't divs block elements?
Learn and use FlexBox
It is a very powerful css layout library that is supported by most browsers.
Check out an example here for the Nav Bar. There are many ways you can right align. One way is to have an empty element just to the left of the nav elements that takes up remaining space which pushes the elements all the way to the right.
To achieve this for the Bootstrap example
All I did was add
<div style="flex-grow: 1;"></div>
Right below
<div class="collapse navbar-collapse" id="navbarSupportedContent">
And right above
<ul class="navbar-nav mr-auto">
If you're only looking to use Bootstrap features, you can achieve this by wrapping your links with this:
<ul class="nav navbar-nav navbar-right">
<links>
</ul>
Without using bootstrap:
.align-left { float: left }
.align-right { float: right }
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="align-left">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse align-right" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
<div style="clear: both;"></div>
</nav>
You can use the class mr-auto to fix the elements to the right.
Your code will become :
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
I've made navbar using Bootstrap4 and when I open website as mobile screen links in menu doesn't work. Here is my code:
<nav class="navbar navbar-expand-sm navbar-dark" style="background-color: #E2BA28">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Brand -->
<a class="navbar-brand" href="https://www.example.com"><img src="logo" width="60" class="d-inline-block align-top" alt=""></a>
<!-- Links -->
<div class="collapse navbar-collapse justify-content-end" id="nav-content">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link eak-link" href="https://www.example.com">example</a>
</li>
<li class="nav-item">
<a class="nav-link eak-link" href="https://www.example.com">example</a>
</li>
<li class="nav-item">
<a class="nav-link eak-link" href="#">example</a>
</li>
<li class="nav-item">
<a class="nav-link eak-link" href="https://www.example.com">example</a>
</li>
<li class="nav-item">
<a class="nav-link eak-link eak-abc" href="https://www.example.com">example</a>
</li>
</ul>
</nav>
If it does help I'm using this js:
$(document).ready(function(){
$('.nav-item').hover(function(){
$(this).toggleClass('animated bounceIn')
});
});
Thanks for help !
Apart from adding bootstrap's js code at the footer of your page, you'll need to also includejQuery.
Here's a working pen:
CodePen