Bootstrap navbar links doesn't work on mobile

Bootstrap navbar links doesn't work on mobile - php

I have this simple navbar:
<nav class="navbar" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a id="header-logo" class="transition-100" href="<?php echo base_url(); ?>main">YoutubeParty</a>
</div>
<div class="navbar-nav navbar-right">
<ul>
<li>
<a id="header-add-button" class="button add-button header-button transition-100" href="<?php echo base_url(); ?>main/add"><span class="glyphicon glyphicon-plus"></span></a>
</li>
<li>
<a id="header-party-button" class="button party-button header-button transition-100" href="<?php echo base_url(); ?>main/party"><span class="glyphicon glyphicon-film"></span></a>
</li>
<li>
<a id="header-ranking-button" class="button ranking-button header-button transition-100" href="<?php echo base_url(); ?>main/ranking"><span class="glyphicon glyphicon-th-list"></span></a>
</li>
</ul>
</div>
</div>
</nav>
It works great on desktop but on mobile links are displayed below header.
Screenshot
And the buttons don't work. I can open links in the background, but when clicked, they don't direct to other pages.
EDIT: mobile source code
<!doctype html>
<html class="no-js" lang="pl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>YoutubeParty - najlepsze filmiki w sieci</title>
<meta name="description" content="Najlepsze filmy z youtube bez ruszania się z zakładki">
<meta name="keywords" content="youtube, filmiki, śmieszne, ciekawe, party, humor, video, wideo" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Oswald&subset=latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://youtubeparty.pl/css/normalize.css">
<link rel="stylesheet" href="http://youtubeparty.pl/css/bootstrap.min.css">
<link rel="stylesheet" href="http://youtubeparty.pl/css/main.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="http://youtubeparty.pl/js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
</head>
<body>
<nav class="navbar" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a id="header-logo" class="transition-100" href="http://youtubeparty.pl/main">YoutubeParty</a>
</div>
<div class="navbar-nav navbar-right">
<ul>
<li>
<a id="header-add-button" class="button add-button header-button transition-100" href="http://youtubeparty.pl/main/add">
<span class="glyphicon glyphicon-plus"></span>
</a>
</li>
<li>
<a id="header-party-button" class="button party-button header-button transition-100" href="http://youtubeparty.pl/main/party">
<span class="glyphicon glyphicon-film"></span>
</a>
</li>
<li>
<a id="header-ranking-button" class="button ranking-button header-button transition-100" href="http://youtubeparty.pl/main/ranking">
<span class="glyphicon glyphicon-th-list"></span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="add-container" class="container-fluid">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6 min480-container" style="text-align: center;">
<h1 style="margin-bottom: 50px;">Dodaj filmik</h1>
<form action="http://youtubeparty.pl/main/addin" method="post" accept-charset="utf-8">
<input type="hidden" name="add_date" value="2014-08-30 10:34:27" />
<label for="yt_link">Link:</label>
<input type="text" name="yt_link" value="" class="transition-100" id="yt_link" required="required" maxlength="1024" />
<input type="submit" name="AddSubmit" value="Dodaj" class="button add-button transition-100" id="AddSubmit" />
</form>
</div>
<div class="col-md-3">
</div>
</div>
</div>
<div id="footer" class="container-fluid">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
<div id="footer-container" class="min480-container">
<p> Copyright © 2014 <a style="text-decoration: none" class="transition-100" href="http://youtubeparty.pl/">YoutubeParty.pl</a>
</p>
<ul>
<li>
<a class="transition-100" href="http://youtubeparty.pl/main/contact">Kontakt</a>
</li>
<li>
<a class="transition-100" href="http://youtubeparty.pl/main/about">O stronie</a>
</li>
</ul>
</div>
</div>
<div class="col-md-4">
</div>
</div>
</div>
<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-54218399-1', 'auto'); ga('send', 'pageview'); function load() { gapi.client.load('youtube', 'v3', onYouTubeApiLoad); } function onYouTubeApiLoad() { gapi.client.setApiKey('AIzaSyCa5mbsirih865iJOhykaWfrPKAhjssD9A'); } </script>

Not sure about the display problem but I had the same problem with links not opening the new pages on mobile. I managed to get past that by adding this:
div.dropdown-backdrop {
z-index: -1;
}
I got there by reading this: Bootstrap github issue.

Related

head rendering in body laravel blade

I'm tasked to correct this from an outside developer, but am stumped.
I reviewed two very similar Stackoverflow questions, from 6 years ago,
but could not resolve this.
The following is roughly how it renders in a browser:
<HTML lang="en">
<head>(this is completely empty)</head>
<body >
<nav></nav>
<div class="header-nav">
</div>
links display
Finally, the 'head' section from the code below, renders here
(meta tags, title etc.) but without the 'head' tags.
Frontapp.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<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">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Some website</title>
<!-- Favicon -->
<link href="{{ asset('argon') }}/img/brand/favicon.png" rel="icon" type="image/png">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
<!-- Extra details for Live View on GitHub Pages aaaddd -->
<!-- Icons -->
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
{{-- <link href="{{ asset('argon') }}/vendor/nucleo/css/nucleo.css" rel="stylesheet"> --}}
{{-- <link href="{{ asset('argon') }}/vendor/#fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"> --}}
{{-- Animation link --}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
{{-- Bootstrap --}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- Argon CSS -->
{{-- <link type="text/css" href="{{ asset('argon') }}/css/argon.css?v=1.0.0" rel="stylesheet"> --}}
<link type="text/css" href="{{ asset('argon') }}/css/web.css" rel="stylesheet">
</head>
<body class="{{ $class ?? '' }}">
{{-- #auth()
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
#csrf
</form>
#include('layouts.navbars.sidebar')
#endauth --}}
{{-- <div class="main-content">
#include('layouts.navbars.navbar')
#yield('content')
</div> --}}
{{-- #guest()
#include('layouts.footers.guest')
#endguest --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js"
integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous">
</script>
#stack('js')
<script>
setTimeout(() => {
let allAlerts = document.querySelectorAll(".alert");
allAlerts.forEach((alert) => {
alert.remove();
});
}, 6000);
</script>
{{-- <script>
var d = new Date();
var n = d.getFullYear();
document.querySelector(".year").innerText = n;
</script> --}}
<!-- Argon JS abcd-->
{{-- <script src="{{ asset('argon') }}/js/argon.js?v=1.0.0"></script> --}}
<script src="{{ asset('argon') }}/js/custom.js"></script>
<script src="{{ asset('argon') }}/js/animation.js"></script>
</body>
</html>
Edit, I was requested to provide the controller for FrontApp.Blade.php
I'm not completely certain what to put here but here's what I found.
home.blade.php (first 16 lines)
#extends('layouts.frontapp')
#include('layouts.frontlayout.header')
<div class="jumbotron homeBanner">
<h1>Somewebsite</h1>
<h4 class="lead">text</h4>
<h4 class="lead">text</h4>
<br>
<a class="btn btn-lg banner-button" href="#" role="button">EXPLORE MORE <i class="las la-arrow-right text-white"></i></a>
</p>
<div class="row text-center">
<div class="col-md-12">
<a class="ct-btn-scroll circle-down-arrow-icon" href="#first-section"><i class="las la-chevron-circle-down"></i></a>
</div>
</div>
</div>
Header.blade.php (first 25 lines)
#extends('layouts.frontapp')
<nav class="navbar navbar-expand-sm bg-faded navbar-light shadow-sm">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#" style="color: #666 !important"><i class="las la-phone-volume"></i> phone</a>
</li>
<li class="nav-item">
<a class="nav-link" href="mailto:info#Somewebsite.com"
target="_blank" style="color: #666 !important"><i class="las la-envelope"></i> info#Somewebsite.com</a>
</li>
</ul>
<div class="navbar-collapse collapse" id="navbar1">
<ul class="navbar-nav rightNav">
<li class="nav-item">
<a class="nav-link" href="#"><i class="lab la-facebook-f"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="lab la-twitter"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="lab la-instagram"></i></a>
</li>
</ul>
</div>
</nav>
Here is how the full page renders, the head from the Blade is in the wrong position. Putting the head at line 73 to line 132 in the html
<html lang="en"><head></head><body class="" data-new-gr-c-s-check-loaded="8.878.0" data-gr-ext-installed=""><nav class="navbar navbar-expand-sm bg-faded navbar-light shadow-sm">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#" style="color: #666 !important"><i class="las la-phone-volume"></i> phone</a>
</li>
<li class="nav-item">
<a class="nav-link" href="mailto:info#somewebsite.com" target="_blank" style="color: #666 !important"><i class="las la-envelope"></i> info#somewebsite.com</a>
</li>
</ul>
<div class="navbar-collapse collapse" id="navbar1">
<ul class="navbar-nav rightNav">
<li class="nav-item">
<a class="nav-link" href="#"><i class="lab la-facebook-f"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="lab la-twitter"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="lab la-instagram"></i></a>
</li>
</ul>
</div>
</nav>
<div class="header-nav">
<div class="sticky-top">
<nav class="navbar navbar-expand-lg navbar-light navbarcolor">
<div class="container-fluid">
<div class="navbar-brand">
<a href="/">
<img src="https://www.somewebsite.com/argon/img/websiteImages/Somewebsite-new-logo.png" alt="Logo" id="navIcon">
</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="las la-bars text-white"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav rightNav my-2 my-lg-0">
<li class="nav-item active">
<a class="nav-link webnav" id="home-nav" href="/">HOME</a>
</li>
<li class="nav-item ">
<a class="nav-link webnav" id="about-us-nav" href="/about">ABOUT US</a>
</li>
<li class="nav-item ">
<a class="nav-link webnav" id="electrical-nav" href="/electrical">ELECTRICAL</a>
</li>
<li class="nav-item ">
<a class="nav-link webnav" id="stab-nav" href="/stabalizers">STAB</a>
</li>
<li class="nav-item ">
<a class="nav-link webnav" id="partners-nav" href="/partners">PARTNERSHIP</a>
</li>
<li class="nav-item ">
<a class="nav-link webnav" id="blog-nav" href="/blog">BLOG</a>
</li>
<li class="nav-item ">
<a class="nav-link webnav" id="contact-nav" href="/contact">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="y8br0kSwVHC1QSvZqPdxaw3MyykzAKlTa80MvaS8">
<title>Somewebsite</title>
<!-- Favicon -->
<link href="https://www.somewebsite.com/argon/img/brand/favicon.png" rel="icon" type="image/png">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
<!-- Extra details for Live View on GitHub Pages aaaddd -->
<!-- Icons -->
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- Argon CSS -->
<link type="text/css" href="https://www.somewebsite.com/argon/css/web.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous">
</script>
<script>
setTimeout(() => {
let allAlerts = document.querySelectorAll(".alert");
allAlerts.forEach((alert) => {
alert.remove();
});
}, 6000);
</script>
<!-- Argon JS abcd-->
<script src="https://www.somewebsite.com/argon/js/custom.js"></script>
<script src="https://www.somewebsite.com/argon/js/animation.js"></script>
<div class="jumbotron homeBanner">
<h1>Somewebsite</h1>
<h4 class="lead">text</h4>
<h4 class="lead">Services</h4>
<br>
<a class="btn btn-lg banner-button" href="#" role="button">EXPLORE MORE <i class="las la-arrow-right text-white"></i></a>
<p></p>
<div class="row text-center">
<div class="col-md-12">
<a class="ct-btn-scroll circle-down-arrow-icon" href="#first-section"><i class="las la-chevron-circle-down"></i></a>
</div>
</div>
</div>
<section id="first-section" class="pt-5">
<div class="container">
<div class="row pt-5">
<div class="col-md-6 p-5">
<h4 class="animated-left animate__animated">Engineering</h4>
<br>
<p class="animated-left animate__animated">
Text
</p>
<p class="animated-left animate__animated">
Text
</p>
</div>
<div class="col-md-6 text-center">
<img class="animated-fadein animate__animated" src="https://www.somewebsite.com/argon/img/websiteImages/home_first_para.jpg" alt="home_image-01" id="home_image-01">
</div>
</div>
<br>
<div class="row pt-5">
<div class="col-md-6 text-center">
<img class="animated-fadein animate__animated animate__delay-1s" src="https://www.somewebsite.com/argon/img/websiteImages/home_second_para.png" alt="home_image-02" id="home_image-02">
</div>
<div class="col-md-6 p-5">
<h4 class="animated-right animate__animated animate__delay-1s">Engineering</h4>
<br>
<p class="animated-right animate__animated animate__delay-1s">
Text
</p>
<p class="animated-right animate__animated animate__delay-1s">
Text
</p>
</div>
</div>
</div>
</section>
<p> </p>
<section id="second-section" class="pt-5">
<div class="row">
<div class="col-md-6 business-solutions-col text-center p-5">
<h3>business solutions</h3>
<br>
<div class="row">
<div class="col-md-4">
<img src="https://www.somewebsite.com/argon/img/websiteImages/Complete-Care.png" id="img-complete-care">
</div>
<div class="col-md-8">
<p class="text-justify animated-down animate__animated animate__delay-1s"><span id="complete-care">Complete Care</span><br>
Text</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="https://www.somewebsite.com/argon/img/websiteImages/Electrical-Solutions.png" id="img-electrical-solutions">
</div>
<div class="col-md-8">
<p class="text-justify animated-down animate__animated animate__delay-1s"><span id="electrical-solutions">Electrical</span><br>
Text</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="https://www.somewebsite.com/argon/img/websiteImages/Stab.png" id="img-stab">
</div>
<div class="col-md-8">
<p class="text-justify animated-down animate__animated animate__delay-1s"><span id="stab">Stab</span><br>
Our sister company,
<a class="btn btn-sm product-button" href="https://www.SisterWebsite.com" role="button">Please visit SisterWebsite.com</a>
</p>
</div>
</div>
</div>
<div class="col-md-6 business-solutions-video animated-zoomin animate__animated animate__delay-1s">
<div id="video-col" style="margin-right: 0%;margin-left: -3%;" hidden="">
<video class="bs-video" id="bs-video" controls="">
<source src="https://www.somewebsite.com/argon/img/websiteImages/New_3.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</section>
<section id="third-section">
<div class="third-sec-with-img">
<div class="container">
<h3 class="animated-right animate__animated animate__delay-3s">ENGINEERING</h3>
<p class="lead animated-right animate__animated animate__delay-3s">Engineering</p>
<p class="animated-right animate__animated animate__delay-3s">
text removed
</p>
<a class="btn btn-outline btn-lg btnoutline-white animated-right animate__animated animate__delay-3s" href="https://www.somewebsite.com/electrical" role="button">Electrical| <i class="las la-arrow-right text-white"></i></a>
<a class="btn btn-outline btn-lg btnoutline-white animated-right animate__animated animate__delay-3s" href="#" role="button">Service Request Form | <i class="las la-arrow-right text-white"></i></a>
<p></p>
</div>
</div>
</section>
<section id="third-section">
<div class="container">
<div class="row">
<div class="col-md-6 pb-5 text-right" id="abc-d-img">
<img src="https://www.somewebsite.com/argon/img/websiteImages/sister_new.png" alt="sister">
</div>
<div class="col-md-6 pt-5 pb-5 text-left sister-colum">
<h6 style="color: #890304;">sister</h6>
<p>Excellence </p>
<h4>Products</h4>
<br>
<div>
<a class="btn btn-sm product-button" href="https://www.somewebsite.com/stab" role="button">PRODUCT <i class="las la-arrow-right text-white"></i></a>
</div>
</div>
</div>
</div>
</section>
<footer class="bg-white text-center text-lg-start footerMain">
<div class="border-top-2" id="main-footer">
<div class="container p-4">
<div class="row">
<div class="col-md-4">
<a href="/">
<img src="https://www.somewebsite.com/argon/img/websiteImages/somewebsite-new-logo.png" alt="Logo" id="footer-logo">
</a>
</div>
<div class="col-md-4">
<h3 id="footer-address">ADDRESS</h3>
<p>
text
</p>
</div>
<div class="col-md-4" id="footer-icon">
<i class="lab la-facebook"> </i>
<i class="lab la-twitter"></i>
<i class="lab la-linkedin"></i>
</div>
</div>
</div>
</div>
<div class="text-center p-3 second-footer">
somewebsite <span class="year">2021</span> | All Rights Reserved <strong>
</strong></div><strong>
</strong></footer><strong>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="y8br0kSwVHC1QSvZqPdxaw3MyykzAKlTa80MvaS8">
<title>Some Webstite</title>
<!-- Favicon -->
<link href="https://www.somewebsite.com/argon/img/brand/favicon.png" rel="icon" type="image/png">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
<!-- Extra details for Live View on GitHub Pages aaaddd -->
<!-- Icons -->
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- Argon CSS -->
<link type="text/css" href="https://www.somewebsite.com/argon/css/web.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous">
</script>
<script>
setTimeout(() => {
let allAlerts = document.querySelectorAll(".alert");
allAlerts.forEach((alert) => {
alert.remove();
});
}, 6000);
</script>
<!-- Argon JS abcd-->
<script src="https://www.somewebsite.com/argon/js/custom.js"></script>
<script src="https://www.somewebsite.com/argon/js/animation.js"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="y8br0kSwVHC1QSvZqPdxaw3MyykzAKlTa80MvaS8">
<title>SomeWebsite</title>
<!-- Favicon -->
<link href="https://www.somewebsite.com/argon/img/brand/favicon.png" rel="icon" type="image/png">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
<!-- Extra details for Live View on GitHub Pages aaaddd -->
<!-- Icons -->
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- Argon CSS -->
<link type="text/css" href="https://www.somewebsite.com/argon/css/web.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous">
</script>
<script>
setTimeout(() => {
let allAlerts = document.querySelectorAll(".alert");
allAlerts.forEach((alert) => {
alert.remove();
});
}, 6000);
</script>
<!-- Argon JS abcd-->
<script src="https://www.somewebsite.com/argon/js/custom.js"></script>
<script src="https://www.somewebsite.com/argon/js/animation.js"></script>
</strong></body></html>
```

How to load a controller before connecting to DB or even when MySQL turned off

I wonder if someone can help me to load a "maintanence" controller before the framwork connects to DB.
that will load tpl file.
For example, when the app is under construction and I want to turn the MySQL database off, but I want to show the people who get my web a page (tpl file that is loaded by controller) "we are under construction" page and all this by loading tpl files and not requiring PHP file.

OpenCart core makes the DB connection before any controller is loaded. So if you plan to turn to maintenance mode, before anything is displayed to the user, the DB connection is already established.
It is practically impossible to separate the DB from the core since it is so tightly coupled.
The only solution would be to create a index.html file as a copy of your maintenance mode html like Paul Feakins replied in comments.
here is a clean html you can use. should work for anyone.
in your root directory create index.html and paste this code:
<!DOCTYPE html>
<!--[if IE]><![endif]-->
<!--[if IE 8 ]><html dir="ltr" lang="en" class="ie8"><![endif]-->
<!--[if IE 9 ]><html dir="ltr" lang="en" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html dir="ltr" lang="en">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Maintenance</title>
<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,400i,300,700" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet">
<script src="catalog/view/javascript/common.js" type="text/javascript"></script>
<link href="/image/catalog/cart.png" rel="icon" />
</head>
<body>
<nav id="top">
<div class="container"><div class="pull-left">
<form action="/index.html" method="post" enctype="multipart/form-data" id="form-currency">
<div class="btn-group">
<button class="btn btn-link dropdown-toggle" data-toggle="dropdown"> <strong>$</strong> <span class="hidden-xs hidden-sm hidden-md">Currency</span> <i class="fa fa-caret-down"></i></button>
<ul class="dropdown-menu">
<li>
<button class="currency-select btn btn-link btn-block" type="button" name="EUR">€ Euro</button>
</li>
<li>
<button class="currency-select btn btn-link btn-block" type="button" name="GBP">£ Pound Sterling</button>
</li>
<li>
<button class="currency-select btn btn-link btn-block" type="button" name="USD">$ US Dollar</button>
</li>
</ul>
</div>
<input type="hidden" name="code" value="" />
<input type="hidden" name="redirect" value="/index.html" />
</form>
</div>
<div id="top-links" class="nav pull-right">
<ul class="list-inline">
<li><i class="fa fa-phone"></i> <span class="hidden-xs hidden-sm hidden-md">123456789</span></li>
<li class="dropdown"><i class="fa fa-user"></i> <span class="hidden-xs hidden-sm hidden-md">My Account</span> <span class="caret"></span>
<ul class="dropdown-menu dropdown-menu-right">
<li>Register</li>
<li>Login</li>
</ul>
</li>
<li><i class="fa fa-heart"></i> <span class="hidden-xs hidden-sm hidden-md">Wish List (0)</span></li>
<li><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">Shopping Cart</span></li>
<li><i class="fa fa-share"></i> <span class="hidden-xs hidden-sm hidden-md">Checkout</span></li>
</ul>
</div>
</div>
</nav>
<header>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div id="logo"> <h1>Your Store</h1>
</div>
</div>
<div class="col-sm-5"><div id="search" class="input-group">
<input type="text" name="search" value="" placeholder="Search" class="form-control input-lg" />
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-lg"><i class="fa fa-search"></i></button>
</span>
</div></div>
<div class="col-sm-3"><div id="cart" class="btn-group btn-block">
<button type="button" data-toggle="dropdown" data-loading-text="Loading..." class="btn btn-inverse btn-block btn-lg dropdown-toggle"><i class="fa fa-shopping-cart"></i> <span id="cart-total">0 item(s) - $0.00</span></button>
<ul class="dropdown-menu pull-right">
<li>
<p class="text-center">Your shopping cart is empty!</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<div class="container">
<nav id="menu" class="navbar">
<div class="navbar-header"><span id="category" class="visible-xs">Categories</span>
<button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">Desktops
</li>
<li class="dropdown">Laptops & Notebooks
</li>
<li class="dropdown">Components
</li>
<li>Tablets</li>
<li>Software</li>
<li>Phones & PDAs</li>
<li>Cameras</li>
</ul>
</div>
</nav>
</div>
<div id="common-maintenance" class="container">
<div class="row">
<div class="col-12"><h1 style="text-align:center;">We are currently performing some scheduled maintenance. <br/>We will be back as soon as possible. Please check back soon.</h1></div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-sm-3">
<h5>Information</h5>
<ul class="list-unstyled">
<li>About Us</li>
<li>Delivery Information</li>
<li>Privacy Policy</li>
<li>Terms & Conditions</li>
</ul>
</div>
<div class="col-sm-3">
<h5>Customer Service</h5>
<ul class="list-unstyled">
<li>Contact Us</li>
<li>Returns</li>
<li>Site Map</li>
</ul>
</div>
<div class="col-sm-3">
<h5>Extras</h5>
<ul class="list-unstyled">
<li>Brands</li>
<li>Gift Certificates</li>
<li>Affiliate</li>
<li>Specials</li>
</ul>
</div>
<div class="col-sm-3">
<h5>My Account</h5>
<ul class="list-unstyled">
<li>My Account</li>
<li>Order History</li>
<li>Wish List</li>
<li>Newsletter</li>
</ul>
</div>
</div>
<hr>
<p>Powered By OpenCart<br /> Your Store © 2019</p>
</div>
</footer>
<!--
OpenCart is open source software and you are free to remove the powered by OpenCart if you want, but its generally accepted practise to make a small donation.
Please donate via PayPal to donate#opencart.com
//-->
</body></html>

jQuery functions not firing on php page

I have literally tried every solution out there on the Internet and I still can't manage to figure out why my jQuery is not firing.
The main aim is to show a modal when clicking on the "addUser-div", but when I click the div nothing happens.
I used the EXACT SAME code on page that only has HTML ( no php ) and jQuery fires just fine, i just can't manage to find out what the problem is, this occurs with all the jQuery functions, thought i can see that my js is properly loaded to the page.
Here is the users.php code :
<?php
session_start();
if (isset($_SESSION['role']) && $_SESSION['role'] == 1) {
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="../css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css" />
<script src="../js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="../css/styles.css" />
<script type="text/javascript" src="../script/date_time.js"></script>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script type="text/javascript">
$('.addUser-div').click(function() {
$('.modal').modal('show')
})
</script>
</head>
<title>Espace de Connexion</title>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark static-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="../images/Logoestia.png" class="img-responsive" width="150" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" 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 "><a class="nav-link" href="./panel.php">Tableau De Bord
<span class="sr-only">(current)</span>
</a></li>
<li class="nav-item "><a class="nav-link" href="./armoires.php">Gestion des Armoires
<span class="sr-only">(current)</span>
</a></li>
<li class="nav-item "><a class="nav-link" href="./outils.php">Gestion des Outils
<span class="sr-only">(current)</span>
</a></li>
<li class="nav-item active"><a class="nav-link" href="./users.php">Gestion Employés
<span class="sr-only">(current)</span>
</a></li>
<li class="nav-item"><a class="nav-link" href="../logout.php">Déconnexion
<span class="sr-only">(current)</span>
</a></li>
</ul>
</div>
</div>
</nav>
</head>
<body>
<h2 class="display-4">Gestion utilisateurs</h2>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<div class="container">
<div class="row">
<INPUT type=button value="Retour " onClick="history.back();">
<div class="col-md-6 addUser-div" style="cursor: pointer;">
<div class="card-counter info">
<i class="fa fa-users"></i>
<span class="count-numbers">
<?php
session_start();
echo $_SESSION["userCount"];?>
</span>
<span class="count-name">Ajouter un Utilisateur</span>
</div>
</div>
<div class="col-md-6" style="cursor: pointer;" onclick="window.location='../panel/prep.jsp';">
<div class="card-counter danger">
<i class="fa fa-trash"></i> <span class="count-name">Supprimer
un utilisateur</span>
</div>
</div>
</div>
</div>
<div class="modal modal-dialog" id="infos">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Ajouter un Utilisateur</h4>
</button>
</div>
<div class="modal-body">
<div style="display: flex; width: 100%;">
<form action="./CreaterUserServlet">
<div style="width: 100%;">
<p>Nom</p>
<input type="text" name="n" placeholder="Nom" required="required" />
</div>
<div style="width: 100%;">
<p>Login</p>
<input type="text" name="u" placeholder="Identifiant" required="required" />
</div>
<div style="width: 100%;">
<p>Mot de passe</p>
<input type="password" name="p" placeholder="Mot de Passe" required="required" />
</div>
<div style="width: 100%;">
<p>Role</p>
<select name="role-select">
<option value="">Veuillez choisir..</option>
<option value="1">ADMIN</option>
<option value="2">PREPARATEUR</option>
<option value="3">COMMERCIAL</option>
<option value="4">EXPEDITEUR</option>
</select>
</div>
<p>
<input type="submit" class="btn btn-primary btn-block btn-large" value="Ajouter">
</p>
</form>
</div>
</div>
</div>
</div>
<?php include 'usersTable.php';?>
</body>
<footer>
<p>M.Ramzi</p>
</footer>
</html>
<?php
}else {
header("location: ../index.php");
}
?>

You're trying to bind the click event to the div before the div exists in the DOM. Wrap the event listener in a document ready:
$(document).ready(function() {
$('.addUser-div').click(function() {
$('.modal').modal('show');
})
});
Also, you're loading the bootstrap library twice; that can't be good. Remove one of these lines:
<script src="../js/bootstrap.min.js"></script>

PHP/SQL How would I display the highest bid for a listing

https://imgur.com/a/PYokL
Hello,I am aware that there are some duplicate column in my database at the moment as I encountered some errors I'm just trying to make my website functional at the moment. I am currently working on displaying the highest bid for a listing.I am confused as to how I would find the highest bid for each specific listing as the bids all seem to bundle together into one table.I was wondering if anyone could help me do this?
<?php
require 'config.php';
if(isset($_POST['submit']))
{
$valueToSearch = $_POST['valueToSearch'];
// search in all table columns
// using concat mysql function
$query = "SELECT * FROM listings` WHERE CONCAT(`location`, `description`, `price`, `date`,`title`) LIKE '%".$valueToSearch."%'";
$query2 = "SELECT `listID` FROM listings"
$search_result = filterTable($query);
}
else {
$query = "SELECT * FROM `listings`";
$search_result = filterTable($query);
}
// function to connect and execute the query
function filterTable($query)
{
$conn = mysqli_connect("localhost", "root", "", "auction");
$filter_Result = mysqli_query($conn, $query);
return $filter_Result;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bid4MyJob</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Bid4MyJob">
<meta name="author" content="James Wood">
<!-- CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="assets/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/main.css" rel="stylesheet" type="text/css">
<link href="assets/css/my-custom-styles.css" rel="stylesheet" type="text/css">
<!-- IE 9 Fallback-->
<!--[if IE 9]>
<link href="assets/css/ie.css" rel="stylesheet">
<![endif]-->
<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400italic,400,600,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300,300italic,400italic,700,400,300' rel='stylesheet' type='text/css'>
<!-- FAVICONS -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/repute144x144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/repute114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/repute72x72.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/repute57x57.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
</head>
<body>
<!-- WRAPPER -->
<div class="wrapper">
<!-- NAVBAR -->
<nav class="navbar navbar-default " role="navigation">
<div class="container">
<!-- TOPBAR -->
<div class="topbar">
<ul class="list-inline top-nav">
<li>
<div class="btn-group">
<button type="button" class="btn btn-link dropdown-toggle btn-xs" data-toggle="dropdown"><img src="assets/img/flags/United-Kingdom.png" alt="United Kingdom"> United Kingdom <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right country-selector" role="menu">
<li>
<img src="assets/img/flags/United-Kingdom.png" alt="United Kingdom"> United Kingdom
</li>
<li>
<img src="assets/img/flags/Japan.png" alt="Japan"> Japan
</li>
<li>
<img src="assets/img/flags/China.png" alt="China"> China
</li>
<li>
<img src="assets/img/flags/Germany.png" alt="Germany"> Germany
</li>
</ul>
</div>
</li>
<li>Help</li>
<li>Support</li>
</ul>
<div class="searchbox">
<form method="post">
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="search ...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
</span>
</div>
</form>
</div>
</div>
<!-- END TOPBAR -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle Navigation</span>
<i class="fa fa-bars"></i>
</button>
<a href="index.html" class="navbar-brand navbar-logo navbar-logo-bigger">
</a>
</div>
<!-- MAIN NAVIGATION -->
<div id="main-nav" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
HOME
</li>
<li>
HOW IT WORKS
</li>
<li>
POST JOB
</li>
<li>
FIND JOB
</li>
<li>
SIGN UP
</li>
<li>
LOGIN
</li>
</ul>
</div>
<!-- END MAIN NAVIGATION -->
</div>
</nav>
<!-- END NAVBAR -->
<!-- BREADCRUMBS -->
<div class="page-header">
<div class="container">
<h1 class="page-title pull-left">Find Job</h1>
<ol class="breadcrumb">
<li>Home</li>
<li class="active">Find Job</li>
</ol>
</div>
</div>
<!-- END BREADCRUMBS -->
<!-- PAGE CONTENT -->
<div class="page-content page-search-result">
<div class="container">
<!-- Search Form -->
<form class="form form-horizontal" action="findjob.php" method="post">
<div class="input-group input-group-lg">
<div class="input-group-btn">
<!--<select id="search-type-select" name="valueToSearch" class="multiselect multiselect-single-lg search-type-select">
<option value="all" selected="selected">All</option>
<option value="page">Page</option>
<option value="task">Task</option>
<option value="user">User</option>
<option value="image">Image</option>
</select>
</div>-->
<input class="form-control input-lg" type="text" name="valueToSearch" placeholder="type keyword ..." />
<span class="input-group-btn">
<button type="submit" name= "submit" value="Search" class="btn btn-primary btn-lg"><i class="icon ion-android-search"></i> Go</button>
</span>
</div>
</form>
<!-- End Search Form -->
</div>
</div>
<div>
<table>
<tr>
<th>Title</th>
<th>Location</th>
<th>Description</th>
<th>Budget</th>
<th>Due date</th>
</tr>
<!-- populate table from mysql database -->
<?php while($row = mysqli_fetch_array($search_result)):?>
<tr>
<td><?php echo $row['title'];?></td>
<td><?php echo $row['location'];?></td>
<td><?php echo $row['description'];?></td>
<td><?php echo $row['price'];?></td>
<td><?php echo $row['date'];?></td>
<td><form method="post" action="actionpage5.php" class="form-horizontal">
<?php //echo _("Enter ") . ' ' . $last_bid_plus . ' ' . _('or more'); ?>
<div class="input-group ">
<input type="number" value="bid" class="form-control" name="bid" id= "bid" required/>
</div>
<br/>
<input type="submit" name="sb_bid" value="<?php echo _('Place your Bid'); ?>"
class="btn btn-xlarge btn-block btn-primary"/>
<br/>
</form></td>
</tr>
<?php endwhile;?>
</table>
</div>
<!-- END PAGE CONTENT -->
<!-- FOOTER -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-4">
<!-- COLUMN 1 -->
<h3 class="sr-only">ABOUT US</h3>
<img src="assets/img/logo/repute-logo-light.png" class="logo" alt="Repute">
<p>Proactively aggregate B2B initiatives before extensive channels. Monotonectally extend interactive methods of empowerment through excellent applications. Rapidiously synergize visionary products with sticky technology.</p>
<br>
<address class="margin-bottom-30px">
<ul class="list-unstyled">
<li>Unit 5, Block B Nesfield Road
<br/> Colchester, Essex CO4 3ZL 222222</li>
<li>Phone: 01206 588 000</li>
<li>Email: sales#universalwebdesign.co.uk</li>
</ul>
</address>
<!-- END COLUMN 1 -->
</div>
<div class="col-md-4">
<!-- COLUMN 2 -->
<h3 class="footer-heading">USEFUL LINKS</h3>
<div class="row margin-bottom-30px">
<div class="col-xs-6">
<ul class="list-unstyled footer-nav">
<li>About Us</li>
<li>News</li>
<li>Community</li>
<li>Career</li>
<li>Blog</li>
</ul>
</div>
<div class="col-xs-6">
<ul class="list-unstyled footer-nav">
<li>Press Kit</li>
<li>FAQ</li>
<li>Terms</li>
<li>Privacy Policy</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<!-- END COLUMN 2 -->
</div>
<div class="col-md-4">
<!-- COLUMN 3 -->
<div class="newsletter">
<h3 class="footer-heading">NEWSLETTER</h3>
<p>Get the latest update from us by subscribing to our newsletter.</p>
<form class="newsletter-form" method="POST">
<div class="input-group input-group-lg">
<input type="email" class="form-control" name="email" placeholder="youremail#domain.com">
<span class="input-group-btn"><button class="btn btn-primary" type="button"><i class="fa fa-spinner fa-spin"></i><span>SUBSCRIBE</span></button>
</span>
</div>
<div class="alert"></div>
</form>
</div>
<div class="social-connect">
<h3 class="footer-heading">GET CONNECTED</h3>
<ul class="list-inline social-icons">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
<li><i class="fa fa-rss"></i></li>
</ul>
</div>
<!-- END COLUMN 3 -->
</div>
</div>
</div>
<!-- COPYRIGHT -->
<div class="text-center copyright">
©2018 Bid4MyJob. All Rights Reserved.
</div>
<!-- END COPYRIGHT -->
</footer>
<!-- END FOOTER -->
</div>
<!-- END WRAPPER -->
<!-- JAVASCRIPTS -->
<script src="assets/js/jquery-2.1.1.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/plugins/bootstrap-multiselect/bootstrap-multiselect.js"></script>
<script src="assets/js/plugins/autohidingnavbar/jquery.bootstrap-autohidingnavbar.min.js"></script>
<script src="assets/js/repute-scripts.js"></script>
</body>
</html>

$query = "SELECT MAX(bid) FROM listingsWHERE CONCAT(location,description,price,date,title`) LIKE '%".$valueToSearch."%' GROUP BY listing"

Dropdown is not visible unless the page is scrolled down. How can I fix this?

http://www.levybusinesslaw.com/index.php
The nav dropdown only works when the page is scrolled down. I've tried everything to make it visible, but nothing seems to work. Any advice on how to fix this issue is greatly appreciated. Thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="keywords" content="" />
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Title -->
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<!-- Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700%7COpen+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet">
<!-- Template -->
<link href="style.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js">
</script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<![endif]-->
</head >
<!-- ==================================================================================================================================
HEADER
======================================================================================================================================= -->
<section class="home-header">
<!-- header -->
<div class="header">
<div class="container">
<div class="row">
<div class="header-top">
<!-- logo -->
<div class="col-md-4 col-sm-4 col-xs-5">
<div class="logo">
<a href="index.html">
<img src="images/logo.png" class="img-responsive" title="" alt="" />
</a>
</div>
</div>
<!-- .logo -->
<!-- quick contact -->
<div class="col-md-8 col-sm-8 col-xs-7">
<div class="quick-contact text-right">
<p class="phone">410.998.2001</p>
<p>Serving The State of Maryland</p>
</div>
</div>
<!-- .quick contact -->
</div>
</div>
</div>
</div>
<!-- .header -->
<!-- intro content -->
<div class="container">
<div class="row">
<!-- content -->
<div class="col-md-12">
<div class="intro-content text-center">
<h2 class="white-text">
<strong>
<span class="rotate">NEIL LEVY</span>
<br />BUSINESS LAWYER<br>IN BALTIMORE, MD</strong>
</h2>
<a href="mailto:nlevy#lmcplaw.com?Subject=Inquiry" class="btn btn-default button-white">Contact Me
</a>
</div>
</div>
<!-- .content -->
</div>
</div>
<!-- .intro content -->
<!-- Popout Slider Menu -->
<div class="container-popup">
<div class="popup">
<div class="popup-overlay">
<i class="play"></i>
<i class="play"></i>
</div>
<div class="popup-content">
<div class="popup-top-content">
<div class="popup-top-content-inner">
<div class="popup-product">
<div class="popup-top-title">
<h6>How can I help you?</h6>
</div>
</div>
</div>
</div>
<div class="popup-add-content">
<div class="popup-add-content-inner">
<div class="section">
<h6>Services</h6>
<ul>
<li><a href="http://levybusinesslaw.com/#practice" >Business</a></li>
<li><a href="http://levybusinesslaw.com/#practice" >Estate Planning</a></li>
<li><a href="http://levybusinesslaw.com/#practice/" >Real Estate</a></li>
</ul>
</div>
<div class="section">
Contact Me
</div>
</div>
</div>
</div>
</div>
<div class="popup-menu popout-menu">
<ul>
<li><i class="fa fa-facebook-square" style="font-size:3em"></i></li>
<li><i class="fa fa-linkedin-square" style="font-size:3em"></i></li>
</ul>
</div>
</div>
<script>
$("window").load(function() {
$("#body").removeClass("preload");
});
$(".share-btn").mouseenter(function() {
setTimeout(function() {
$(".item-menu").addClass("visible")
}, 500);
});
$(".share-btn").mouseleave(function() {
setTimeout(function() {
$(".item-menu").removeClass("visible")
}, 500);
});
$(".item-menu").hover(function() {
$(".item-menu").addClass("visible")
});
$(".item-menu").mouseleave(function() {
setTimeout(function() {
$(".item-menu").removeClass("visible")
}, 500);
});
$(".container-item").hover(function() {
setTimeout(function() {
$(".container-item").css("z-index","1000")
}, 500);
});
</script>
<!-- Popout Slider Menu -->
<!-- navigation scrolled -->
<div class="main-nav scrolled">
<nav class="navbar navbar-default" role="navigation">
<div class="container_toggle container">
<div class="navbar-header">
<button class="navbar-toggle button-white menu" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars"></i>
</button>
<!-- smaller logo -->
<a class="navbar-brand" href="#">
<img src="images/logo.png" class="img-responsive" title="" alt="" />
</a>
<!-- .smaller logo -->
</div>
<div class="collapse navbar-collapse" >
<!-- main nav -->
<ul class="nav navbar-nav">
<li>HOME</li>
<li>
ABOUT
</li>
<li>
COMMUNITY
</li>
<li class="dropdown">
PRACTICE AREAS <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Business</li>
<li>Estate Planning</li>
<li>Real Estate</li>
<li class="divider"></li>
<li>Other</li>
</ul>
</li>
<li>
CONTACT
</li>
<li>
BLOG
</li>
</ul>
<!-- .main nav -->
<!-- quick contact -->
<ul class="nav navbar-nav navbar-right hidden-xs">
<li>
<div class="quick-contact">
<p class="phone">410.998.2001</p>
</div>
</li>
</ul>
<!-- quick contact -->
</div>
</div>
</nav>
</div>
<!-- .navigation scrolled -->
</section>

Just take overflow:hidden; off of .home-header.
Because the dropdown-menu has position:absolute; it is not involved in sizing .home-header so is not displayed.

We Keep Coding

PHP, A popular general-purpose scripting language that is especially suited to web development.

Bootstrap navbar links doesn't work on mobile - php

Not sure about the display problem but I had the same problem with links not opening the new pages on mobile. I managed to get past that by adding this: div.dropdown-backdrop { z-index: -1; } I got there by reading this: Bootstrap github issue.

Related

head rendering in body laravel blade

How to load a controller before connecting to DB or even when MySQL turned off

jQuery functions not firing on php page

PHP/SQL How would I display the highest bid for a listing

Dropdown is not visible unless the page is scrolled down. How can I fix this?

Categories

Resources