Bootstrap modal will not show up - php

I am trying to implement the login and signup forms of my site as a bootstrap modal, but the modal is not showing up at all after clicking the link inside the navbar. I have encountered on couple of similar questions on this topic before, but none of the solutions seem to be working for me. JQuery is included so I have no clue what could be causing modal to be shy to show up. Can anyone help, please? Code is as follows:
<!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">
<!-- CSRF Token -->
<meta name="csrf-token" content="Mc8MyxbLVQ93MY1dMlbE6y9NXzlTiVrVB80P0lYl">
<link rel="stylesheet" href="http://mypage.me/css/app.css">
<title>MyPage</title>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("/images/ukay3.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.navbar { margin-bottom: 0 !important; }
</style>
</head>
<body>
<a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal">Logi</a>
<!-- Old Navbar -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Section: Logo and collapse button -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a style="display:block; margin:7px; margin-right:20px" href="/ " class="pull-left"><img
src="/images/logosmall.png" alt="Not found!"></a>
</div><!-- End Section: Logo and collapse button -->
<!-- Section: Collapsible part of Navbar -->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Market</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="/about">About<span class="caret">
</span></a>
<ul class="dropdown-menu">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</li>
<!--<li>About</li>-->
<li>Services</li>
<li>Contact</li>
</ul>
<!-- Section: Right side of Navbar -->
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal"><span
class="glyphicon glyphicon-log-in"></span> Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://mypage.me/register"><span class="glyphicon
glyphicon-user"></span> Sign Up</a>
</li>
</ul><!-- Right Side of Navbar --><!-- End Section: Right side of Navbar -->
</div><!-- End Section: Collapsible part of Navbar -->
</div>
</nav>
<!-- Login Modal -->
<div class="modal fade" id="loginModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal End --> <div class="bg"></div>
<div class="container">
<div class="jumbotron text-center">
<h1>Welcome to MyPage.com</h1>
</div>
</div>
</body>
</html>


<!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">
<!-- CSRF Token -->
<meta name="csrf-token" content="Mc8MyxbLVQ93MY1dMlbE6y9NXzlTiVrVB80P0lYl">
<link rel="stylesheet" href="http://mypage.me/css/app.css">
<title>MyPage</title>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("/images/ukay3.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.navbar { margin-bottom: 0 !important; }
</style>
</head>
<body>
<a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal">Logi</a>
<!-- Old Navbar -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Section: Logo and collapse button -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a style="display:block; margin:7px; margin-right:20px" href="/ " class="pull-left"><img
src="/images/logosmall.png" alt="Not found!"></a>
</div><!-- End Section: Logo and collapse button -->
<!-- Section: Collapsible part of Navbar -->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Market</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="/about">About<span class="caret">
</span></a>
<ul class="dropdown-menu">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</li>
<!--<li>About</li>-->
<li>Services</li>
<li>Contact</li>
</ul>
<!-- Section: Right side of Navbar -->
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
<li class="nav-item">
<a class="nav-link" href="#loginModal" data-toggle="modal" data-target="#loginModal"><span
class="glyphicon glyphicon-log-in"></span> Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://mypage.me/register"><span class="glyphicon
glyphicon-user"></span> Sign Up</a>
</li>
</ul><!-- Right Side of Navbar --><!-- End Section: Right side of Navbar -->
</div><!-- End Section: Collapsible part of Navbar -->
</div>
</nav>
<!-- Login Modal -->
<div class="modal fade" id="loginModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal End --> <div class="bg"></div>
<div class="container">
<div class="jumbotron text-center">
<h1>Welcome to MyPage.com</h1>
</div>
</div>
</body>
</html>


Seems like your cdn is not supporting your code i have added cdn of bootstrap4 below
<!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">
<!-- CSRF Token -->
<meta name="csrf-token" content="Mc8MyxbLVQ93MY1dMlbE6y9NXzlTiVrVB80P0lYl">
<link rel="stylesheet" href="http://mypage.me/css/app.css">
<title>MyPage</title>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("/images/ukay3.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.navbar { margin-bottom: 0 !important; }
</style>
</head>
<body>
<a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal">Logi</a>
<!-- Old Navbar -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Section: Logo and collapse button -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a style="display:block; margin:7px; margin-right:20px" href="/ " class="pull-left"><img
src="/images/logosmall.png" alt="Not found!"></a>
</div><!-- End Section: Logo and collapse button -->
<!-- Section: Collapsible part of Navbar -->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Market</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="/about">About<span class="caret">
</span></a>
<ul class="dropdown-menu">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</li>
<!--<li>About</li>-->
<li>Services</li>
<li>Contact</li>
</ul>
<!-- Section: Right side of Navbar -->
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal"><span
class="glyphicon glyphicon-log-in"></span> Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://mypage.me/register"><span class="glyphicon
glyphicon-user"></span> Sign Up</a>
</li>
</ul><!-- Right Side of Navbar --><!-- End Section: Right side of Navbar -->
</div><!-- End Section: Collapsible part of Navbar -->
</div>
</nav>
<!-- Login Modal -->
<div class="modal fade" id="loginModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal End --> <div class="bg"></div>
<div class="container">
<div class="jumbotron text-center">
<h1>Welcome to MyPage.com</h1>
</div>
</div>
</body>
</html>


Add the bootstrap css into the head of your html: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>MyPage</title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</head>
<body>
<a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal">Login</a>
<!-- Login Modal -->
<div class="modal fade" id="loginModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal End --> <div class="bg"></div>
<div class="container">
<div class="jumbotron text-center">
<h1>Welcome to MyPage.com</h1>
</div>
</div>
</body>
</html>


Just add this in your header.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


try to import bootstarp css files to the head before the app.css.
something like this
<!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">
<!-- CSRF Token -->
<meta name="csrf-token" content="Mc8MyxbLVQ93MY1dMlbE6y9NXzlTiVrVB80P0lYl">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="http://mypage.me/css/app.css">
<title>MyPage</title>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<style>
body,
html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("/images/ukay3.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.navbar {
margin-bottom: 0 !important;
}
</style>
</head>
<body>
<a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal">Logi</a>
<!-- Old Navbar -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Section: Logo and collapse button -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a style="display:block; margin:7px; margin-right:20px" href="/ " class="pull-left"><img
src="/images/logosmall.png" alt="Not found!"></a>
</div><!-- End Section: Logo and collapse button -->
<!-- Section: Collapsible part of Navbar -->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Market</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="/about">About<span class="caret">
</span></a>
<ul class="dropdown-menu">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</li>
<!--<li>About</li>-->
<li>Services</li>
<li>Contact</li>
</ul>
<!-- Section: Right side of Navbar -->
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal"><span
class="glyphicon glyphicon-log-in"></span> Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://mypage.me/register"><span class="glyphicon
glyphicon-user"></span> Sign Up</a>
</li>
</ul><!-- Right Side of Navbar -->
<!-- End Section: Right side of Navbar -->
</div><!-- End Section: Collapsible part of Navbar -->
</div>
</nav>
<!-- Login Modal -->
<div class="modal fade" id="loginModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal End -->
<div class="bg"></div>
<div class="container">
<div class="jumbotron text-center">
<h1>Welcome to MyPage.com</h1>
</div>
</div>
</body>
</html>


Link bootstrap.min.css file in you current code and define proper classes on modal html section. Check below code it is working fine...
<!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" />
<!-- CSRF Token -->
<meta name="csrf-token" content="Mc8MyxbLVQ93MY1dMlbE6y9NXzlTiVrVB80P0lYl" />
<link rel="stylesheet" href="http://mypage.me/css/app.css">
<title>MyPage</title>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("/images/ukay3.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.navbar { margin-bottom: 0 !important; }
</style>
</head>
<body>
<!-- Old Navbar -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Section: Logo and collapse button -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a style="display:block; margin:7px; margin-right:20px" href="/ " class="pull-left"><img
src="/images/logosmall.png" alt="Not found!"></a>
</div><!-- End Section: Logo and collapse button -->
<!-- Section: Collapsible part of Navbar -->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Market</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="/about">About<span class="caret">
</span></a>
<ul class="dropdown-menu">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</li>
<!--<li>About</li>-->
<li>Services</li>
<li>Contact</li>
</ul>
<!-- Section: Right side of Navbar -->
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal"><span
class="glyphicon glyphicon-log-in"></span> Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://mypage.me/register"><span class="glyphicon
glyphicon-user"></span> Sign Up</a>
</li>
</ul><!-- Right Side of Navbar --><!-- End Section: Right side of Navbar -->
</div><!-- End Section: Collapsible part of Navbar -->
</div>
</nav>
<!-- Login Modal -->
<div class="modal" id="loginModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal End --> <div class="bg"></div>
<div class="container">
<div class="jumbotron text-center">
<h1>Welcome to Mohd. Aslam</h1>
</div>
</div>
</body>
</html>

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>
```

not displaying google charts in Laravel app [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I am working with laravel 5.6 and I need displaying categoryname column values in google charts of vehicles table. I have different categorynames in the table. My blade file is as following,
#extends('layouts.app')
#section('content')
<title>pie chart</title>
<script src="{{ url('/js/jquery.js') }}"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var analytics = <?php echo $categoryname; ?>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart()
{
var data = google.visulization.arrayToDataTable(analytics);
var options = {
title : 'Presentage of Categories'
};
var chart = new google.visulization.PieChart(document.getElementById('pie_chart'));
chart.draw(data,options);
}
</script>
</head>
<body>
<div class="container">
<h3 align="center">Category Chart</h3>
<br>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-heading">Percentage of Categoryies</h3>
</div>
<div class="panel-body">
<div id="pie_chart" style="width:750px; height: 450px;">
</div>
</div>
</div>
</div>
</body>
#endsection
and My ChartController is as
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use DB;
class ChartController extends Controller
{
function index()
{
$data = DB::table('vehicles')
->select(
DB::raw('categoryname as categoryname'),
DB::raw('count(*)as number'))
->groupBy('categoryname')
->get();
$array[] = ['Category','Number'];
foreach($data as $key => $value)
{
$array[++$key] = [$value->categoryname, $value->number];
}
return view('reports.pie_chart')->with('categoryname', json_encode($array));
}
}
when I visit blade file I can see Only blade file and not displaying Google chart. How can fix this problem?
app.blade.php
<!DOCTYPE html>
<html lang="{{ 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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Acxian</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="col-md-10 col-md-offset-1">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
Acxian
</a>
<a class="navbar-brand" style="font-size: 15px;" href="{{ route('vehicles.index') }}">All Ads</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#if (Auth::guest())
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<a href="{{ route('manage.dashboard') }}">
Manage
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endif
</ul>
</div>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
#yield('js')
</body>
</html>
console
[["Category","Number"],["Car",1],["Truck",4],["Van",9]] reports:88:3
[Vue warn]: Error compiling template:
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="col-md-10 col-md-offset-1">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="http://localhost:8000">
Acxian
</a>
<a class="navbar-brand" style="font-size: 15px;" href="http://localhost:8000/all-ads">All Ads</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
Nalaka <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="http://localhost:8000/logout" onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<a href="http://localhost:8000/manage/dashboard">
Manage
</a>
<form id="logout-form" action="http://localhost:8000/logout" method="POST" style="display: none;">
<input name="_token" value="CzrmFUNluJiJU0SoovSrvWB9dPLVyemjbTmJe8Vt" type="hidden">
</form>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<title>pie chart</title>
<script src="http://localhost:8000/js/jquery.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var analytics = [["Category","Number"],["Car",1],["Truck",4],["Van",9]];
console.log(JSON.stringify(analytics));
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart()
{
var data = google.visulization.arrayToDataTable(analytics);
var options = {
title : 'Presentage of Categories'
};
var chart = new google.visulization.PieChart(document.getElementById('pie_chart'));
chart.draw(data,options);
}
</script>
<div class="container">
<h3 align="center">Category Chart</h3>
<br>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-heading">Percentage of Categoryies</h3>
</div>
<div class="panel-body">
<div id="pie_chart" style="width:750px; height: 450px;">
</div>
</div>
</div>
</div>
</div>
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
(found in <Root>) app.js:32420:7
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html app.js:40393:7
TypeError: google.visulization is undefined[Learn More] reports:95:8
blade with cdn
<html>
<head>
<title>pie chart</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
.box{
width: 600px;
margin: 0 auto;
border: 1px solid #ccc;
}
</style>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var analytics = <?php echo $categoryname; ?>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart()
{
var data = google.visulization.arrayToDataTable(analytics);
var options = {
title : 'Presentage of Categories'
};
var chart = new google.visulization.PieChart(document.getElementById('pie_chart'));
chart.draw(data,options);
}
</script>
</head>
<body>
<div class="container">
<h3 align="center">Category Chart</h3>
<br>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-heading">Percentage of Categoryies</h3>
</div>
<div class="panel-body">
<div id="pie_chart" style="width:750px; height: 450px;">
</div>
</div>
</div>
</div>
</body>
</html>

it is keyword spelling mistaken of visulization it should be as visualization now it is working

Bootstrap Html Php

I have a navigation toggle it appears when screen is small after i included 1 php file which which is bootstrap modal, after including that my navigation toggle is not closing after opening.Im unable to close the navigation menu.
I have include both the files index as well as request which is data modal file
<?php require 'request.php';?>
<header class="navigation navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<!-- responsive nav button -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- /responsive nav button -->
<!-- logo -->
<a class="navbar-brand logo" href="index.html">
<img class="logo-white" src="images/logo1.png" alt="logo" style="width:40px;float:left;"/>
<p class="logo-white" style="float:right;font-size: 30px;color: white;font-family: initial;margin-top:5px;margin-left:8px;">Expert Web Solutions</p>
<img class="logo-default" src="images/logo2.png" alt="logo" style="width:40px;float:left;"/>
<p class="logo-default" style="float:right;font-size: 30px;color: #000;font-family: initial;margin-top:5px;margin-left:8px;">Expert Web Solutions</p>
</a>
<!-- /logo -->
</div>
<!-- main nav -->
<nav class="collapse navbar-collapse navbar-right">
<ul id="nav" class="nav navbar-nav menu">
<li>
<a href="index.html" >Home </span></a>
</li>
<li class="dropdown">
Services <span class="caret"></span>
<ul class="dropdown-menu">
<li>Mobile App Development</li>
<li>Web Development</li>
<li>Software Development</li>
<li>Software Consultancy</li>
<li>Software Testing and<br> Quality Assurance</li>
</ul>
</li>
<li>Technologies</li>
<li>About Us</li>
<li>Careers</li>
<li><button type="button" data-toggle="modal" data-target="#myModal">Request A Quote</button></li>
<li>Contact Us</li>
</li>
</ul>
</nav>
<!-- /main nav -->
</div>
</header>
<this is request.php>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="form.css" >
<script src="form.js"></script>
</head>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Request A Quote</h4>
</div>
<div class="panel-body">
<form id="reused_form">
<div class="form-group">
<input type="text" name="name" required class="form-control" placeholder="Enter Name">
</div>
<div class="form-group">
<input type="email" name="email" required class="form-control" placeholder="Enter Email">
</div>
<div class="form-group">
<input name="phone" class="form-control" placeholder="Enter Phone Number">
</div>
<div class="form-group">
<textarea rows="3" name="message" class="form-control" placeholder="Write Your Requirements"></textarea>
</div>
<div class="form-group">
<button class="btn btn-raised btn-lg btn-warning" type="submit" style="
border: none;
padding: 15px 0;
width: 100%;
margin: 0;
background: #2b315d;
color: #fff;
border-radius: 0;
">Send</button>
</div>
</form>
<div id="error_message" style="width:100%; height:100%; display:none; ">
<h4>
Error
</h4>
Sorry there was an error sending your form.
</div>
<div id="success_message" style="width:100%; height:100%; display:none; ">
<h2 style="color:#000; font-size:22px;text-align:center;">Thank You! <br>Your Message was Sent Successfully.<br>One of our representatives will contact you shortly.</h2>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

I think require.php breaks the html including head section again and opening and closing html and body tags.
Maybe this will work ?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="form.css" >
<script src="form.js"></script>
</head>
<body>
<header class="navigation navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<!-- responsive nav button -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- /responsive nav button -->
<!-- logo -->
<a class="navbar-brand logo" href="index.html">
<img class="logo-white" src="images/logo1.png" alt="logo" style="width:40px;float:left;"/>
<p class="logo-white" style="float:right;font-size: 30px;color: white;font-family: initial;margin-top:5px;margin-left:8px;">Expert Web Solutions</p>
<img class="logo-default" src="images/logo2.png" alt="logo" style="width:40px;float:left;"/>
<p class="logo-default" style="float:right;font-size: 30px;color: #000;font-family: initial;margin-top:5px;margin-left:8px;">Expert Web Solutions</p>
</a>
<!-- /logo -->
</div>
<!-- main nav -->
<nav class="collapse navbar-collapse navbar-right">
<ul id="nav" class="nav navbar-nav menu">
<li>
<a href="index.html" >Home </span></a>
</li>
<li class="dropdown">
Services <span class="caret"></span>
<ul class="dropdown-menu">
<li>Mobile App Development</li>
<li>Web Development</li>
<li>Software Development</li>
<li>Software Consultancy</li>
<li>Software Testing and<br> Quality Assurance</li>
</ul>
</li>
<li>Technologies</li>
<li>About Us</li>
<li>Careers</li>
<li><button type="button" data-toggle="modal" data-target="#myModal">Request A Quote</button></li>
<li>Contact Us</li>
</li>
</ul>
</nav>
<!-- /main nav -->
</div>
</header>
<?php require 'request.php';?>
</body>
</html>
below request PHP
<!-- Trigger the modal with a button -->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Request A Quote</h4>
</div>
<div class="panel-body">
<form id="reused_form">
<div class="form-group">
<input type="text" name="name" required class="form-control" placeholder="Enter Name">
</div>
<div class="form-group">
<input type="email" name="email" required class="form-control" placeholder="Enter Email">
</div>
<div class="form-group">
<input name="phone" class="form-control" placeholder="Enter Phone Number">
</div>
<div class="form-group">
<textarea rows="3" name="message" class="form-control" placeholder="Write Your Requirements"></textarea>
</div>
<div class="form-group">
<button class="btn btn-raised btn-lg btn-warning" type="submit" style="
border: none;
padding: 15px 0;
width: 100%;
margin: 0;
background: #2b315d;
color: #fff;
border-radius: 0;
">Send</button>
</div>
</form>
<div id="error_message" style="width:100%; height:100%; display:none; ">
<h4>
Error
</h4>
Sorry there was an error sending your form.
</div>
<div id="success_message" style="width:100%; height:100%; display:none; ">
<h2 style="color:#000; font-size:22px;text-align:center;">Thank You! <br>Your Message was Sent Successfully.<br>One of our representatives will contact you shortly.</h2>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Navbar doesn't work in my published site

Published
Unpublished
My Navbar went missing i use Laravel and the function blade
Bootstrap is working seeing that the Jumbotron is activated
Can someone help?
Here is the navigation Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>#yield('title')</title>
<!-- Bootstrap Core Css -->
<link href="plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Sweet Alert Css -->
<link href="plugins/sweetalert/sweetalert.css" rel="stylesheet" />
<!-- Design Css -->
<link href="plugins/pagecss/front_master.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" >
<div class="container-fluid">
<div class="navbar-header">
<img id = "brnd" style="float:left;margin-top: 0.7em;margin-right: 1em;" alt="Brand" src="../images/index.jpg"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">i-Kasal</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="#">Home</li>
<li><div class="fb-share-button" data-
href="https://ikasal.uphero.com" data-layout="button_count" data-
size="small" data-mobile-iframe="true"><a
class="fb-xfbml-parse-ignore" target="_blank"
href="https://www.facebook.com/sharer/sharer.php?
u=https%3A%2F%2Fikasal.uphero.com%2F&src=sdkpreparse"><button
id = "sharebtn" class="btn btn-primary navbar-btn">Share
#Facebook</button></a></div></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class = "#yield('Signup')"><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li class = "#yield('Login')"><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<!-- Jquery Core Js -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap Core Js -->
<script src="plugins/tether-master/dist/js/tether.min.js"></script>
<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- Jquery Validation Plugin Css -->
<script src="plugins/jquery-validation/jquery.validate.js"></script>
<!-- Sweet Alert Plugin Js -->
<script src="plugins/sweetalert/sweetalert.min.js"></script>
#yield('body')
</body>
</html>
And here is the welcome page code
#extends('layout.main.front_master')
#section('title','iKasal')
#section('body')
<!-- Design Css -->
<link href="../../../plugins/pagecss/welcome.css" rel="stylesheet" />
<div class="jumbotron" style = "padding-top:100px;">
<div class="container">
<h1 style="font-size:200px;">i-Kasal</h1>
<p style="font-size:80px;">Welcome to iKasal</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button"
style="font-size:50px;width: 25%">Learn more</a></p>
</div>
</div>
#endsection

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.

Categories