Develop Reference

Removing the the drop down home menu in bar and keeping (HOME ONE) as main page of the code

I’ve recently started learning and trying to code for personal personal us and also just a new hubby. I wanted to know how to Removing the the drop down home menu in bar and keeping the (HOME ONE) as main page of the website. I’ve watched videos and searched and I followed instructions but the lay out of the bar on the website. any help would be greatly appertained. thank you in advance. here is the code and also it was a sample template i got and trying to work on.enter image description here
<div id="navbar-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav mr-auto">
<li class="nav-item dropdown active">
Home <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu" role="menu">
<li class="active">Home One</li>
<li>Home Two</li>
</ul>
</li>

HTML adding a background music that will not stop or start from the beginning when ever i go to another page

So basically I'm making a simple website, my home section is as follows, there's also the other sections which are sorta similar, but my question is that I want a background music to play without stopping or restarting whenever I go to "about", "meeting" and what not.
ps: i'm using notepad++
<ul>
<li><a class="active" href="Home.html">Home</a>
</li>
<li>About
</li>
<li>Meeting
</li>
<li>Personailty
</li>
<li style="float:right">Patching Up
</li>
</ul>
<h1>Test</h1>
<p class="paragraph1">Hello there!</p>

Want to convert a menu url to a # using javascript when a mobile device is detected

I have a drop down superfish menu in my responsive site and while I have the menu changing to a mobile friendly sidr slide menu for most mobile devices the client would still like to have the orginal dropdown menu showing when a tablet is in landscape orientation.
This obviously creates the usual hover issue with touch devices especially since we have the top li (of a drop down) also providing a href.
My thoughts were that for those particular top level li's we'd add a class on which we could then run some javascript to replace the usual url link with a # when a mobile device is detected. That would make the top li a touch item instead of a hover link item.
Anyway below is what I have constructed to date and I had though this would work but so far I can't seem to get it to replace the original url with the #
<script>
$(document).ready(function($){
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad|android)/);
if (agentID) {
$('#sf-menu.sf-menu li.idevice a').attr('href', '#');
}
});
</script>
I'm guessing I'm missing something really obvious but I've got to that point where I've exhausted my knowledge level - I'm not really a coder, more an enthusiastic tinkerer :).
Below is a snippet of the menu code for reference.
<div id="mateen">
<ul id="sf-menu" class="sf-menu">
<li class="menu-item">Home</li>
<li class="idevice">Advantages
<ul>
<li >Mateenbar Advantages</li>
<li >Superior Performance</li>
<li >Research and Testing</li>
<li >Frequently Asked Questions</li>
<li >Middle East</li>
</ul>
</li>
<li class="idevice">Products & Specifications
<ul>
<li >MateenBar</li>
<li >MateenDowel</li>
<li >MateenBolt</li>
</ul></li>
<li class="idevice">Applications & Projects
<ul>
<li >Corrosion & Marine</li>
<li >Roads & Transportation</li>
<li >Tunnelling & Cutting</li>
<li >Electro-magnetic</li>
<li >Projects</li>
</ul>
</li>
<li >Downloads</li>
<li class="idevice">Contacts
<ul>
<li >Locations</li>
<li >About Pultron</li>
</ul>
</li>
</ul>
</div>
Any advice or help accepted at this point - hope I've provided enough relevant information.
Thanks

The problem is with the selector. Change the following statement
$('#sf-menu.sf-menu li.idevice a').attr('href', '#');
to
$('#sf-menu > li > a').attr("href","#")
For your reference:
https://css-tricks.com/child-and-sibling-selectors/

Simplifying click and toggle function with jquery

I need some help making jQuery click and toggle function being simplified.
JS FIDDLE
This is what I have:
HTML
<div class="category-list-content">
<h4><strong>Category</strong></h4>
<ul class="category-list">
<li class="">
Company
</li>
<li class="">
Industry
</li>
<li class="">
Job Title
</li>
<li class="">
Tenure
</li>
<li class="">
Seniority Level
</li>
</ul>
</div>
ABOVE are my main category list
<div class="category-list-sub-content">
<h4><strong>Sub Category</strong></h4>
<ul class="segmentation-list ">
<p>Company</p>
<li class="">9lenses</li>
</ul>
<ul class="category-list ">
<p>Industry</p>
<li class="">Avation</li>
<li class="">Software</li>
<li class="">Mobile</li>
<li class="">Cars</li>
</ul>
<ul class="category-list">
<p>Job Title</p>
<li class="">UI Developer</li>
<li class="">UX Developer</li>
<li class="">Designers</li>
<li class="">Web Developers</li>
</ul>
<ul class="category-list">
<p>Tenure</p>
<li class=""> 5 years</li>
<li class="">< 5 years</li>
<li class="">> 5 years</li>
<li class="">10 years</li>
<li class="">1 year</li>
</ul>
<ul class="category-list ">
<p>Seniority Level</p>
<li class="">Team Lead</li>
<li class="">Juniour Employee</li>
<li class="">Intern</li>
<li class="">Director</li>
<li class="">CEO</li>
</ul>
</div>
This are sub-category list.
I was wanting to make something like when I click on the Company Sub category of Company will show and other sub-categories remain hidden. and when I click on the Industry , Industry subcategory will show and other will be hidden. Same goes for every category. Something like tab effect. I can do this by adding classes on each categories and sub-categories and giving .show() and .hide() functions. but it will huge to add unique classes. Also I may add more categories and sub categories later. So is there any good way to make this work how I describe ? If you need to alter(add any class or ID) anything to make this work that will be fine.
Any help will be appreciated. I am really suffering with this.

What you can do is setting a #hash in every tag of you category menu like:
<li class="">
Company
</li>
Set the id corresponding on in your "main category list" like :
<ul class="segmentation-list " id="company">
<p>Company</p>
Then set an event on each tag, detect the #hash and show only the right div. A little research on something called the web could have helped you. I'm not gonna give you the complete code, try doing it yourself if you don't want other downvoting your question.

Bootstrap sidebar links are not contracting & collapsing properly

I am using bootstrap sidebar.
Its only two levels sidebar nav on the website. I have added two more levels, now its four level sidebar. I am receiving a random issue
that some time when I click on second nav of same level it doesn't open nor other nav collapse, until and unless I scroll down. Then it starting working back again.
Like in the below ScreenShot. By clicking on 'Alerts' it should open and accessing should collapse but its not. But on scrolling it working fine.
I have added the code. Please do let me know if i can add anything more.
<body data-spy="scroll" data-target=".p8-sidebar" onLoad="fixNavbarIssue()">
<div class="p8-sidebar hidden-print hidden-sm hidden-xs bs-docs-sidebar hidden-print affix" role="complementary">
<ul class="nav p8-sidenav nav-stacked">
<li class="active">
Console
<ul class="nav">
<li class="">Login
</li>
<li class="">Understanding Console
</li>
<li class="">Connected Users
</li>
<li class="">Connected Consoles
</li>
<li class="">Logout
</li>
</ul>
</li>
<li class=""> Alerts
<ul class="nav">
<li class="">
Creating a New Alert
<ul class="nav">
<li>Basic Information
</li>
<li>Send To
</li>
<li>Event Name
</li>
<li class="">Short Message
</li>
<li class="">Long Message
</li>
<li class="">
Require Acknowledgement
</li>
</ul>
Bootstrap css/js are unchanged.