I'm building a new site, using some code I wrote for an old one, but incorporarting some slightly more sophisticated PHP includes and the code seems to behave differently on the two sites.
I have a bootstrap Navbar in both, that should auto-highlight the active page. I'm loading in the navbar from a .php layout file that detects which page is open and inserts the correct link:
if($currentpage=="/rehearsal.php")
{echo '<li class="nav-item active">
<a class="nav-link" href="/rehearsal.php">Rehearsal<span class="sr-only">(current)</span></a></li>';
} else {
echo '<li class="nav-item">
<a class="nav-link" href="/rehearsal.php">Rehearsal</a></li>';
}
However on the new site I get the following (rehearsal should be highlighted black rather than having (current) next to it):
with the following Page Source:
However the other site displays as intended but has the same Page Source layout:
I'm guessing something elswhere in the code must be specifying this behaviour, but I'm not sure where to look. I've tried moving the inlude formats between sites and the problem persists. Here is the code for the problematic layout template:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="room4.css">
<title><?=$title?></title>
</head>
<body>
<header>
<h1>Room4 Studios</h1>
</header>
<div>
<?php
$currentpage = $_SERVER['REQUEST_URI'];
?>
<nav class="navbar navbar-expand-md navbar-light" style="background-color: #68B3E2;">
<a class="navbar-brand" href="#"><img class="header_logo" src="images/logo.png" width="120" height="120" alt="..."></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">
<?php if($currentpage=="/index.php")
{echo '<li class="nav-item active">
<a class="nav-link" href="/index.php">Home<span class="sr-only">(current)</span></a></li>';
} else {
echo '<li class="nav-item">
<a class="nav-link" href="/index.php">Home</a></li>';
}
if($currentpage=="/rehearsal.php")
{echo '<li class="nav-item active">
<a class="nav-link" href="/rehearsal.php">Rehearsal<span class="sr-only">(current)</span></a></li>';
} else {
echo '<li class="nav-item">
<a class="nav-link" href="/rehearsal.php">Rehearsal</a></li>';
}
if($currentpage=="/recording.php")
{echo '<li class="nav-item active">
<a class="nav-link" href="/recording.php">Recording<span class="sr-only">(current)</span></a></li>';
} else {
echo '<li class="nav-item">
<a class="nav-link" href="/recording.php">Recording</a></li>';
}
if($currentpage=="/video.php")
{echo '<li class="nav-item active">
<a class="nav-link" href="/video.php">Video<span class="sr-only">(current)</span></a></li>';
} else {
echo '<li class="nav-item">
<a class="nav-link" href="/video.php">Video</a></li>';
}
if($currentpage=="/hire.php")
{echo '<li class="nav-item active">
<a class="nav-link" href="/hire.php">Hire<span class="sr-only">(current)</span></a></li>';
} else {
echo '<li class="nav-item">
<a class="nav-link" href="/hire.php">Hire</a></li>';
}
if($currentpage=="vouchers.php")
{echo '<li class="nav-item active">
<a class="nav-link" href="vouchers.php">Gift Vouchers<span class="sr-only">(current)</span></a></li>';
} else {
echo '<li class="nav-item">
<a class="nav-link" href="vouchers.php">Gift Vouchers</a></li>';
}
if($currentpage=="/contact.php")
{echo '<li class="nav-item active">
<a class="nav-link" href="/contact.php">Contact<span class="sr-only">(current)</span></a></li>';
} else {
echo '<li class="nav-item">
<a class="nav-link" href="/contact.php">Contact</a></li>';
}
if($currentpage=="/blog.php")
{echo '<li class="nav-item active">
<a class="nav-link" href="/blog.php">Blog<span class="sr-only">(current)</span></a></li>';
} else {
echo '<li class="nav-item">
<a class="nav-link" href="/blog.php">Blog</a></li>';
}
?>
</ul>
<a class="right_btn btn-primary btn-lg" href="/booknow.php" role="button">BOOK NOW</a>
</div>
</div>
<main>
<?=$output?>
</main>
<footer>
© IJDB 2017
</footer>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
-->
</body>
</html>
And here is how i reference it from the public site:
<?php
$title = 'Room4 Studios';
ob_start();
include __DIR__ . '/../templates/rehearsal.html.php';
$output = ob_get_clean();
include __DIR__ . '/../templates/layout.html.php';
Any help or insights would be much appreciated
Incase this helps anyone the problem was I was using code written for Bootstrap 4, and linking Bootstrap 5.
.sr-only is now .visually-hidden
&
and the active nav-bar is now referenced from within the <a tag rather than the <li tag:
<a class="nav-link active">
rather than
<a class="nav-link active">
Related
I'm having a problem with the navbar in Laravel 8; specifically the whole navbar is shown on the view but the dropdown is not working.
In fact, when I click, the drop-down menu does not open.
This is layout.blade.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{asset('css/app.css')}}">
<title>Document</title>
</head>
<body>
<x-navbar/>
{{$slot}}
<script src="{{asset('js/app.js')}}"></script>
</body>
</html>
This is navbar.blade.php:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</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">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
and the home.blade.php view is:
<x-layout>
<h1>Hello!!!</h1>
</x-layout>
Please try with this otherwise it might be a typo.
#include('inc.navbar')
// #include('FOLDER_NAME.FILE_NAME')
Also check documentation! https://laravel.com/docs/9.x/blade#including-subviews
This is not intended as an answer. Just to give some info that can't be formatted properly (or I don't know how to) in a comment. When view the source of the page in a browser, you should see the following three lines in the <head> section (or in other proper location). My navbar dropdown didn't work until these three lines showed up in the source. Initially I added the lines in a wrong blade file and they didn't end up in the page as expected.
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
I have some problems regarding the navbar. The button does not work when the browser is minimized or when I open the website from a phone. Could you please take a look at the code and let me know what the problem is?
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #caebf2;">
<div class="container-fluid">
<a class="navbar-brand" href="<?php echo base_url(); ?>">HulkGYM</a>
<button class="navbar-toggler" type="button" data-bs-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="navbarColor03">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link active" href="<?php echo base_url(); ?>">Home
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="<?php echo base_url(); ?>about">About</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="<?php echo base_url(); ?>posts">Forum</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="<?php echo base_url(); ?>categories">Categories</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<?php if(!$this->session->userdata('logged_in')): ?>
<li><a class="nav-link active" href="<?php echo base_url(); ?>users/register">Register</a></ll>
<li><a class="nav-link active" href="<?php echo base_url(); ?>users/login">Login</a></ll>
<?php endif; ?>
<?php if($this->session->userdata('logged_in')): ?>
<?php if($this->session->userdata('username') == 'rk'): ?>
<li><a class="nav-link active" href="<?php echo base_url(); ?>users/admin">Admin view</a></ll>
<?php endif; ?>
<li><a class="nav-link active" href="<?php echo base_url(); ?>dashboard/index">Profile</a></ll>
<li><a class="nav-link active" href="<?php echo base_url(); ?>posts/create">Create Post</a></ll>
<li><a class="nav-link active" href="<?php echo base_url(); ?>categories/create">Create Category</a></ll>
<li><a class="nav-link active" href="<?php echo base_url(); ?>users/logout">Logout</a></ll>
<?php endif; ?>
</ul>
</div>
</div>
</nav>
How I fixed the problem was that I added
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
in the head tag.
Next step is that I changed data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" to data-bs-target="#navbarText" aria-controls="navbarText".
Also, with that the id of the second div class needs to be changed. From <div class="collapse navbar-collapse" id="navbarColor03"> to <div class="collapse navbar-collapse" id="navbarText">.
And at the end, the closing tag for <li> was </l1> instead of </li>.
The final code looks like this:
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #caebf2;">
<div class="container-fluid">
<a class="navbar-brand" href="<?php echo base_url(); ?>">HulkGYM</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto">
<li class="nav-item ">
<a class="nav-link active" href="<?php echo base_url(); ?>">Home
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="<?php echo base_url(); ?>posts">Forum</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="<?php echo base_url(); ?>categories">Categories</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<?php if(!$this->session->userdata('logged_in')): ?>
<li><a class="nav-link active" href="<?php echo base_url(); ?>users/register">Register</a></li>
<li><a class="nav-link active" href="<?php echo base_url(); ?>users/login">Login</a></li>
<?php endif; ?>
<?php if($this->session->userdata('logged_in')): ?>
<?php if($this->session->userdata('username') == 'rk'): ?>
<li><a class="nav-link active" href="<?php echo base_url(); ?>users/admin">Admin view</a></li>
<?php endif; ?>
<li><a class="nav-link active" href="<?php echo base_url(); ?>dashboard/index">Profile</a></li>
<li><a class="nav-link active" href="<?php echo base_url(); ?>posts/create">Create Post</a></li>
<li><a class="nav-link active" href="<?php echo base_url(); ?>categories/create">Create Category</a></li>
<li><a class="nav-link active" href="<?php echo base_url(); ?>users/logout">Logout</a></li>
<?php endif; ?>
</ul>
</div>
</div>
</nav>
Running into an interesting issue with a site I am building. The dropdown menu for one option stops working when I get to a url that includes an id in it.
As an example, if I am at http://localhost/degs/serpstudentsinclass.php?id=3, if I click on the Admin dropdown nothing happens. If I click back to the home page http://localhost/degs/index.php, Admin drop down menu starts working no problem.
This also adds an additional issue when working from a mobile device. Once you reach http://localhost/degs/serpstudentsinclass.php?id=3, you completely lose the ability to use the navigation menu (as now it's a complete drop down menu due to screen size). So you have to again go back to the index.php and then the menu will begin to work again.
Any thoughts on why this might be?
Header file
<?php
// session file
include_once 'includes/session.php';?>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../css/site.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title><?php echo $title ?></title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="index.php">DEGS</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 mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="serpentine.php">Serpentine</a>
</li>
<li class="nav-item">
<a class="nav-link" href="uturn_box.php">U-Turn Box</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blocked_evasive.php">Blocked Evasive</a>
</li>
<li class="nav-item">
<a class="nav-link" href="forward_reverse.php">Forward Reverse</a>
</li>
<li class="nav-item">
<a class="nav-link" href="controlled_braking.php">Controlled Braking</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cumulative_skills_day.php">Cumulative Skills - Day</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cumulative_skills_night.php">Cumulative Skills - Night</a>
</li>
<li class="nav-item">
<a class="nav-link" href="evoc_challenge.php">Evoc Challenge</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Admin
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="users.php">Users</a>
<a class="dropdown-item" href="classes.php">Classes</a>
<a class="dropdown-item" href="students.php">Students</a>
<a class="dropdown-item" href="legends.php">Legend</a>
<a class="dropdown-item" href="tests.php">Tests</a>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<?php
if(!isset($_SESSION['userid'])){
?>
<a class="nav-link" href="login.php">Login <span class="sr-only">(current)</span></a>
<?php } else { ?>
<li class="nav-item"><a class="nav-link" href="logout.php">Logout <span class="sr-only">(current)</span></a></li>
<?php } ?>
</li>
</ul>
</div>
</nav>
Page where problems start - other pages follow a similar pattern where you select the class to get the list of students.
<?php
$title = "DEGS - Students";
require_once 'includes/header.php';
require_once 'includes/auth_check.php';
require_once 'db/conn.php';
if(!isset($_GET['id'])){
echo 'error';
} else {
$id = $_GET['id'];
$results = $admin->getStudents($id);
$class = $admin->getClassDetails($id);
$students = $admin->getStudents($id);
}
?>
<h1>Serpentine - Class <?php echo $class['class']?></h1>
<br/>
<br/>
<table class="table">
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Agency</th>
<th>Class</th>
<th># of Attempts</th>
<th>Student Operations</th>
</tr>
<?php while($r = $results->fetch(PDO::FETCH_ASSOC)) { ?>
<tr>
<td><?php echo $r['lname']?></td>
<td><?php echo $r['fname']?></td>
<td><?php echo $r['agency']?></td>
<td><?php echo $class[1]?></td>
<td><?php echo $serpentine->getAttemptCount($r['student_id']) ?></td>
<td>
View Attempts
Add Attempt
</td>
</tr>
<?php }?>
</table>
I figured it out! I didn't include my footer at the end! Hope this helps anyone else who run into this issue!
hope you are all doing well, i have just face a problem. i make my website online. everything working well expect navbar toggler icon. it is not working on mobile device. it is working well on desktop
here is my code
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.php"><img src="./assests/images/logo.png" class="logo ml-5" alt="file not found" /> </a>
<button class="navbar-toggler " type="button" role="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"> </span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item <?php if($page == 'home') echo 'active' ?>">
<a class="nav-link " href="index.php"><i class="mr-2 fas fa-home"> </i>Home </a>
</li>
<li class="nav-item <?php if($page == 'about') echo 'active' ?>">
<a class="nav-link" href="about.php"><i class="mr-2 fas fa-users"> </i> About Us</a>
</li>
<li class="nav-item dropdown <?php if($page == 'products') echo 'active' ?>" >
<a class="nav-link dropdown-toggle dropdown-toggle-split" href="products.php" data-toggle="dropdown" id="dropedownMenuButton"aria-expanded="false" aria-hospopup="true" >
<i class="mr-2 fas fa-wrench"> </i>Products
</a>
<ul class="dropdown-menu" aria-labelledby="dropedownMenuButton">
<li class="list-group-item">
<a class="dropdown-item" href="bolts-screws.php"> Bolts/Screws </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="nuts.php"> Nuts </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="washers.php"> Washers </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="screws.php"> Screws </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="socket-bolt-screws.php"> Socket Bolts/Screws </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="anchor-fastener.php"> Anchor Fasteners </a>
</li>
</ul>
</li>
<li class="nav-item <?php if($page == 'connect') echo 'active' ?>">
<a class="nav-link" href="connect.php"><i class="mr-2 fas fa-user"> </i> Contact us </a>
</li>
</ul>
</div>
</div>
</nav>
you can check my website also
http://rudrafasteners.com/
It seems you don't add Javascript at your head. Add the followings lines to your HTML <head> tag (Jquery and Bootstrap JS):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
I will need some help with the menu showing on mobile. When the STORE menu is clicked on mobile version it does not expand and instead closes the general menu. Here is the link of the web page. Any help will be appreciated.
<body> looks like
<!-- The #page-top ID is part of the scrolling feature - the data-spy and data-target are part of the built-in Bootstrap scrollspy function -->
<body id="page-top" data-spy="scroll" data-target=".navbar">
Menu HTML
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse header-transparent">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand page-scroll logo no-margin" href="#page-top"><img src="images/logo-uk.png"></a>
<div class="collapse navbar-collapse " id="navbarNav">
<ul class="navbar-nav ml-auto ">
<li class="nav-item active">
<a class="page-scroll nav-link" href="#page-top">HOME </a>
</li>
<li class="nav-item ">
<a class="page-scroll nav-link" href="#frames"></a>
</li>
<li class="nav-item ">
<a class="page-scroll nav-link" href="ppgtrikes.php"></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
STORE
</a>
<div class="dropdown-menu">
<a class="page-scroll nav-link" href="#engines">
<font color="#000000"></font>
</a>
<a class="page-scroll nav-link" href="#harnesses">
<font color="#000000"></font>
</a>
</div>
</li>
<li class="nav-item ">
<a class="page-scroll nav-link" href="#contact"></a>
</li>
</ul>
</div>
</div>
<!-- End of Container -->
</nav>
You have 2 Bootstrap navs, one inside the other.
UPDATED
In this file http://www.evoaviation.co.uk/js/custom.js you have part of code at the beginning
//Auto Close Responsive Navbar on Click
function close_toggle() {
if ($(window).width() <= 768) {
$('.navbar-collapse a').on('click', function () {
$('.navbar-collapse').collapse('hide');
});
}
else {
$('.navbar .navbar-inverse a').off('click');
}
}
Replace it with following
//Auto Close Responsive Navbar on Click
function close_toggle() {
if ($(window).width() <= 768) {
// checking if there is no 'data-toggle' in <a>
$('.navbar-collapse a:not([data-toggle])').on('click', function () {
$('.navbar-collapse').collapse('hide');
});
}
else {
$('.navbar .navbar-inverse a').off('click');
}
}