loading include php inside bootstrap - php

I have html code and it is working fine, but when I use "include" file.php bootstrap nav does not work. The user menu - dropdown-menu is not working.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DASHBOARD</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/datepicker3.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">DASHBOARD</a>
<ul class="user-menu">
<li class="dropdown pull-right">
User <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><svg class="glyph stroked male-user"><use xlink:href="#stroked-male-user"></use></svg> Profile</li>
<li><svg class="glyph stroked gear"><use xlink:href="#stroked-gear"></use></svg> Settings</li>
<li><svg class="glyph stroked cancel"><use xlink:href="#stroked-cancel"></use></svg> Logout</li>
</ul>
</li>
</ul>
</div>
</div><!-- /.container-fluid -->
</nav>
<div class="col-sm-9 col-sm-offset-1 col-lg-10 col-lg-offset-1 main">
<div class="row">
<ol class="breadcrumb">
<li><svg class="glyph stroked home"><use xlink:href="#stroked-home"></use></svg></li>
<li class="active">HOME</li>
</ol>
</div><!--/.row-->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">HOME</h1>
</div>
</div><!--/.row-->
<div class="row">
<div class="col-xs-6 col-md-3">
<div class="panel panel-default">
<div class="panel-body easypiechart-panel">
<h4>New Orders</h4>
<div class="easypiechart" id="easypiechart-blue" data-percent="92" ><span class="percent">92%</span>
</div>
</div>
</div>
</div>
</div><!--/.row-->
</div> <!--/.main-->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/chart.min.js"></script>
<script src="js/chart-data.js"></script>
<script src="js/easypiechart.js"></script>
<script src="js/easypiechart-data.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
</body>
</html>
I want to add include php file, in the "panel-body easypiechart-panel",instead of New Orders.
<div class="panel-body easypiechart-panel">
<?php include 'status/total_status.php'?>
</div>
Thanks in advance.

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

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

Fetch info from mysql database and enter it into php url

I am trying to fetch a username from the database and so I can fetch the json from the person. The code I currently have gave me an error 500 and probably cause of the $json...
Can someone help me find a solution....
<?php
session_start();
include_once 'dbconnect.php';
if(!isset($_SESSION['user']))
{
header("Location: index.php");
}
$res=mysql_query("SELECT * FROM users WHERE user_id=".$_SESSION['user']);
$userRow=mysql_fetch_array($res);
?>
<?php
$json = file_get_contents('http://api.formice.com/mouse/stats.json?n= <?php echo $userRow['mouse']; ?> &l=en');
$obj = json_decode($json);
?>
<?php
$json = file_get_contents('https://api801.herokuapp.com/get/mice/<?php echo $userRow['mouse']; ?> ');
$objj = json_decode($json);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><?php echo $obj->name; ?> | CheeseStatz</title>
<link rel="shortcut icon" href="Favicon.ico" />
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.5 -->
<link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../../dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="../../dist/css/skins/_all-skins.min.css">
<!-- 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/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<!-- ADD THE CLASS layout-top-nav TO REMOVE THE SIDEBAR. -->
<body class="hold-transition skin-blue layout-top-nav">
<div class="wrapper">
<header class="main-header">
<nav class="navbar navbar-static-top">
<div class="container">
<div class="navbar-header">
<b>Cheese</b>Statz
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<i class="fa fa-bars"></i>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse pull-left" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li>Transformice</li>
<li class="dropdown">
Stats<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Mice Stats</li>
<li>Racing Stats</li>
<li>Bootcamp Stats</li>
<li>Survivor Stats</li>
<li class="divider"></li>
<li>Run for Cheese Stats</li>
<li class="divider"></li>
<li>Your tribe Stats</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" id="navbar-search-input" placeholder="Search">
</div>
</form>
</div>
<!-- /.navbar-collapse -->
<!-- Navbar Right Menu -->
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<li class="dropdown messages-menu">
<!-- User Account Menu -->
<li class="dropdown user user-menu">
<!-- Menu Toggle Button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<!-- The user image in the navbar-->
<img src="http://outil.derpolino.shost.ca/avatar/avatar.php?p=cheesezwheel" class="user-image" alt="User Image">
<!-- hidden-xs hides the username on small devices so only the image appears. -->
<span class="hidden-xs"> <?php echo $obj->name; ?> </span>
</a>
<ul class="dropdown-menu">
<!-- The user image in the menu -->
<li class="user-header">
<img src="http://outil.derpolino.shost.ca/avatar/avatar.php?p=cheesezwheel" class="img-circle" alt="User Image">
<p>
<?php echo $obj->name; ?> - <?php echo $obj->title; ?>
<small>Level: <?php echo $objj->level; ?> </small>
</p>
</li>
<!-- Menu Body -->
<li class="user-body">
<div class="row">
<div class="col-xs-4 text-center">
Blog
</div>
<div class="col-xs-4 text-center">
Help
</div>
<div class="col-xs-4 text-center">
Log
</div>
</div>
<!-- /.row -->
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
Forum
</div>
<div class="pull-right">
Sign out
</div>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-custom-menu -->
</div>
<!-- /.container-fluid -->
</nav>
</header>
<!-- Full Width Column -->
<div class="content-wrapper">
<div class="container">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
CheeseStatz
<small>Transformice Api v.1.0.0</small>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Home</li>
<li><?php echo $obj->name; ?></li>
<li class="active">Welcome</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<div class="callout callout-info">
<h4>Welcome <?php echo $obj->name; ?>!</h4>
<p></p>
<!-- /.box-body -->
</div>
<!-- /.box -->
</section>
<!-- /.content -->
</div>
<!-- /.container -->
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
<div class="container">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.0
</div>
<strong>Copyright © 2015 Cheesezwheel.</strong> All rights
reserved.
</div>
<!-- /.container -->
</footer>
</div>
<!-- ./wrapper -->
<!-- jQuery 2.1.4 -->
<script src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="../../bootstrap/js/bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="../../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="../../plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="../../dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../../dist/js/demo.js"></script>
</body>
</html>

I just dont' see why you open and close your php syntax so much
in your link (file_get_contents) you could just use the variables, no need to echo them
check how many result you get from running that query to see if the query is correct
your using ' in your file_get_comments statement, meaning everything after is not run but just text, so it will open
n= php echo $userRow['mouse'] instead of the db value of mouse like n=12

You need:
'http://api.formice.com/mouse/stats.json?n=' . $userRow['mouse'] . '&l=en'

Using PHP include() inside Bootstrap 3 not working

Edited:
I am trying to use PHP include function to call "Navbar Header", "Navigation" and "Footer" section of my Bootstrap code, so that I do not have to make changes to all my HTML files when something changes in any of the above 3.
I am using Bootstrap 3.
Please assist me here, as I am not able to use the PHP functionality with Bootstrap 3. Thanks..
Below is my code:
--> index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Test PHP</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<?php include("includes/header.html");?>
<?php include("includes/navigation.html");?>
<div class="container-fluid">
<!-- START Page Heading -->
<div id="page-wrapper">
<div class="container-fluid">
<!-- Page Heading -->
<div class="row">
<div class="col-lg-10">
<a><h1 class="page-header">Home </h1></a>
<ol class="breadcrumb">
<li class="active">
<i class="glyphicon glyphicon-home"></i> Home
</li>
</ol>
<div class="container">
<div class="jumbotron text-center">
<h1>Sample Website</h1>
<div class="row">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END Page Heading -->
</div>
</div>
<?php include("includes/footer.html");?>
<!-- Script References -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
1) Navbar Header.html
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><strong>Sample Website</strong></a>
</div>
</div>
</div>
2) Navigation.html
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
<strong><i class="glyphicon glyphicon-home active"></i> HOME</strong>
<hr>
<ul class="nav nav-pills nav-stacked">
<li class="nav-header"></li>
<li><i class="glyphicon glyphicon-cloud"></i><strong> Overview</strong></li>
<li><i class="glyphicon glyphicon-picture"></i><strong> About</strong></li>
</ul>
<div class="clearfix"></div>
<hr>
<a><strong><i class="glyphicon glyphicon-user"></i> VIEW 1 </strong></a>
<hr>
<ul class="nav nav-stacked">
<li><a><i class="glyphicon glyphicon-list-alt"></i><strong> Type</strong></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
<li class="dropdown-submenu">
<a tabindex="-1">Type1</a>
<ul class="dropdown-menu">
<li>Description</li>
<li class="divider"></li>
<li class="dropdown-submenu">
<!-- <li role="menu" class="dropdown-header">Schema Type</li> -->
<li class="dropdown-submenu">
<a tabindex="-1">Inner view1</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<li>About</li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1">Detail</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="detail1.html">Detail 1</a></li>
<li><a tabindex="-1" href="detail2.html">Detail 2</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a tabindex="-1">Type2/a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<li>Description</li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1">Inner view 2</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="idetail1.html">Detail 1</a></li>
<li><a tabindex="-1" href="idetail2.html">Detail 2</a></li>
</ul>
</li>
</ul>
</ul>
</li>
</ul>
</ul>
<hr>
</div>
</div>
3) Footer.html
<footer class="row">
<div class="container">
<div class="col-lg-4 col-lg-push-4 col-md-4 col-md-push-4 col-sm-4 col-sm-push-4 col-xs-12">
<div class="text-center">
<p>Copyright © 2015 <a href="http://www.banes.com" title="Banes">
<strong>Banes Ltd.</strong></a>
</p>
</div>
</div>
</div>
</footer>

You have too much duplication in your index.file. Code should only exist once. Look at your include lines and imagine the file being 'included' at that point...
Header.html
<html>
<head>
...tags...
</head>
<body>
Index.php
<?php include("includes/header.html");?>
<div class="container-fluid">
...stuff here..
</div>
<?php include("includes/footer.html");?>
Footer.html
<script>...</script>
<script>...</script>
</body>
</html>

You're including a whole page in every file.
The header footer and navigation files should only contain the parts of the html you want to include
So you have 4 head elements each calling in bootstrap.
This is never going to play nicely. Delete all of the tags in the partial files that do not contain markup specific to that page, and have one page with html>head>body structure that includes the parts of the other files

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