We Keep Coding

How i can underline the current page inside my bootstrap <nav>

I have the following bootstrap code which define our main menu navigation :-
<div class="col-xl-9 col-lg-9">
<div class="main-menu d-none d-lg-block">
<nav>
<ul id="navigation">
<li>home</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
but i need to make the current page underline using bootstrap if possible?

Put a class in the one that is active and in css give the underline to the class
Like this:
<li class="active">home</li>
css:
.active{
border-bottom: xxxx;
border-color:xxxx;
border-style:xxx;
}

You need some JavaScript for this. Basically, you need to add a class dynamically, e.g. active to your active <li> element and then add some styles to this class. Check this article for further details.

Perfect scrollbar not functional with content loaded dynamically using insertAdjacentHTML

I am trying to dynamically load some links from an array(JSON encoded values) as a list inside a div. In my real application this array comes from PHP. I am using insertAdjacentHTML('beforeend', "link content") to set the content.
To style the same I am using "accordion slider" and "Perfect Scrollbar", I have achieved to combine both successfully. I am able to display the links as I want inside the div, but the scroller seems to be disappeared now.
Please check the fiddle here - https://jsfiddle.net/prashu421/2mpL61x7/
If you would check the links that aren't loaded dynamically are scrollable and the scrollbar is displayed there.
I couldn't find any clear reference on the internet for my case.
Any help is greatly appreciated.
Thanks for your consideration.

You're including dynamic HTML on the load event, but initializing the scrollbar on jQuery's $(document).ready() function) which's triggered before the dynamic html load.
So to solve this, put everything in the same function or simply at the end of your document as seen in the code of this fiddle-
https://jsfiddle.net/kumar4215/svhscqcp/
<div id="bloc-accordeon">
<ul class="accordion">
<li id="one" class="files">
One
<ul class="sub-menu" id="firstClub" style="font-size: 12px;">
<!--Container for dynamically generated links-->
</ul>
</li>
<li id="two" class="mail">
Two
<ul class="sub-menu">
</ul>
</li>
<li id="three" class="cloud">
Three
<ul class="sub-menu">
</ul>
</li>
</ul>
</div>

Change navigation on window-scroll with a line under Menu-Item

I have a script that makes active menu item with moving line, but this is one-page and I want that during scroll active menu change. I tried diffrent scripts here but it doesn't work.
Here is the HTML code:
<div class="nav-container">
<ul class="menu">
<li><a class="active" href="#home">Home</a></li>
<li>Skup</li>
<li>Sprzedaż</li>
<li>Serwis</li>
<li>Kontakt</li>
<div id="line"></div>
</ul>
JS(on fiddle because stack wants more details) :
https://jsfiddle.net/6y6qj02y/

You are looking for the Scrollspy.
This is how you can do it:

Use Javascript and fixed url's to navigate between menu pages [duplicate]

I have a menu with several options, I would like to know how to load different HTML into the same div (called #content) depending on the buttons you press of the menu.
I have this code for the menu:
<div id="mainmenu">
<ul id="menu">
<li>Accueil</li>
<li>Qui suis-je?
<ul>
<li>Biographie</li>
<li>Discographie</li>
</ul>
</li>
<li>Porfolio</li>
<li>Contact</li>
</ul>
</div>
What do I need to do to send, for example, "index.html" into div#content when I press in the menu the option "Accueil"?

Using jQuery ajax you can do it
HTML
<div id="mainmenu">
<ul id="menu">
<li>Accueil</li>
<li>Qui suis-je?
<ul>
</div>​
JAVASCRIPT(jQuery)
​​$(function(){
$('#menu li a').on('click', function(e){
e.preventDefault();
var page_url=$(this).prop('href');
$('#content').load(page_url);
});
});
jQuery load

You can use jQuery, it makes stuff like this easy:
Then you can do this:
$('#content>div').load('index.html');
You can either put this in onclick on some button, or in other place in your javascript code...

bootstrap navbar class=active change when coming from a separate page

I've been trying out solutions to similar cases but none of them work so far.
Here's the problem, I have 2 html files total. On my navigation bar, I have 4 options. 3 of them refer to id's on the same page(index) and the 4th refers to the separate page. Now coming from the separate page back to the index, the active menu item isn't the right "active" one. Like if I click on 'about' on the support page, the active menu item is 'home'. or if I click on 'contact', the active menu item becomes 'about'. The content that appears is correct. But the active menu item isn't.
Here's from the index.html file:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="current">Home</li>
<li>About</li>
<li class="support" >Support</li>
<li >Contact</li>
</ul>
</div>
and here's from support.html:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li class="current">Support</li>
<li >Contact</li>
</ul>
</div>
This is one of the solutions that I tried with no results:
https://stackoverflow.com/a/11539359
JS is not my strong suit, thank you so much for your help!

There were lot of issues with the way you are loading scripts for example
$(document).ready(function() {
$('#ind').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
you are calling this before the jquery is loaded so it gives $ is undefined error, so the solution is to move all the script at the end, and there is one inline script also for menu handler, move that to document ready functions
I have included the fix in the following file HTML Zip files, you will find all JS moved to end. Its working fine for me now
One more thing make your contact height same as other container or remove extra margin/padding from Physicians section