slider does not look good because of bootstrap local and cdn links - php

i have use a slider in the project in the index file, but it does not look good when the bootstrap renders it, Im new to coding, but i dont know what to do, when i write the code in single file and only cdn links (no offline libraries), like popper.min.js, jquery.min.js , bootstrap.min.css and bootstrap.min.js these files
the slider shows up but the images do not appear one after one, i mean only the active image is shown
this is the header file some code that is automatically included in every file
<!-- link proper font here, like signica, offline font -->
<!-- <link rel="stylesheet" href="./bootstrap/css/bootstrap/signica-light.ttf">-->
<!-- <link rel="stylesheet" href="./bootstrap/css/bootstrap/signica-bold.ttf">-->
<!-- <link rel="stylesheet" href="./bootstrap/css/bootstrap/signica-regular.ttf">-->
<!-- <link rel="stylesheet" href="./bootstrap/css/bootstrap/signica-semibold.ttf">-->
<!-- -->
<link rel="stylesheet" href="./bootstrap/css/bootstrap/montserrat-regular.ttf">
<!-- this title variable is written before the page executed -->
<title><?php echo $title; ?></title>
<link rel="shortcut icon" type="image/jpg" href="./bootstrap/img/favicon.png"/>
<!-- enable these links when in production -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">-->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>-->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>-->
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>-->
<!---->
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- <link href="./bootstrap/js/popper.min.js" rel="stylesheet">-->
<!-- <link href="./bootstrap/js/jquery.min.js" rel="stylesheet">-->
<!-- <link href="./bootstrap/js/bootstrap.min.js" rel="stylesheet">-->
<link href="./bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="./bootstrap/css/jumbotron.css" rel="stylesheet">
<link href="./bootstrap/css/style.css" rel="stylesheet">
and this is the code of index file
<head>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
</style>
</head>
<!-- slider starts -->
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="./bootstrap/img/cs-1.jpg" alt="Chania" width="1300" height="600">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="./bootstrap/img/cs-2.jpg" alt="Chania" width="1300" height="600">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="./bootstrap/img/cs-3.jpg" alt="Flower" width="1300" height="600">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beautiful flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">
<img src="./bootstrap/img/cs-4.jpg" alt="Flower" width="1300" height="600">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beautiful flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">
<img src="./bootstrap/img/cs-5.jpg" alt="Chania" width="1300" height="600">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="./bootstrap/img/cs-6.jpg" alt="Chania" width="1300" height="600">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- slider ends -->
and this is offline js
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="./bootstrap/js/jquery.min.js"></script>
<script type="text/javascript" src="./bootstrap/js/popper.min.js"></script>
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>```
i dont know where the problem is[enter image description here][1]
[1]: https://i.stack.imgur.com/sVQZf.jpg

Related

head rendering in body laravel blade

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

How to make my website responsive to mobile

Here is the link to my website , on the laptop is working fine, but on mobile phone its not responsive. Here is the link to my site https://ticketsoko.co.ke/
and the follwing is how its showing on mobile phone . Is there a way on mobile phone it can resize the images and be viewed the same as its showing on desktop.
This is when I view it from the desktop.
<head>
<meta charset="utf-8">
<!--<meta name="viewport"-->
<!-- content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="img/logoo.png"/>
<title>Click & Pay | TicketSoko</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700%7COpen+Sans" rel="stylesheet"
type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" -->
<!-- integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> -->
<link rel="stylesheet" href="./css/main.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="css/style3.css">
<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav class=" navbar-default navbar-fixed-top" style="background-color:#f2f2f2;">
<ul>
<img class="logo" src="img/logoo.png" alt="logo" style="height: 100px; width:250px; float:right;">
</ul>
</nav>
<div class="container-fluid">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<br><br><br>
<div class="item active">
<img src="img/image1.jpeg" alt="Los Angeles" style="width:100%; height:500px;">
</div>
<div class="item">
<img src="img/2.jpg" alt="Chicago" style="width:100%; height:480px;">
</div>
<div class="item">
<img src="img/3.jpg" alt="New york" style="width:100%; height:480px;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

As i can see you used width as 250px. So it'll always take the 250 px of any screen whether it's a small screen or big screen.
Example for if you designed this website on a screen which is having 250px width only then it'll render completely on the screen. And if you'll run it on the big screen then also it wil take only 250 px and rest pixels will not be rendered.
So you should use the percentage for the widths. Like if you want to draw a component from left to right and 50% of the screen. Then give the width as 50%. Like that you can make it responsive.
And you can use media query too. Just read about the media query too.
Hope this will help you.

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'

Carousel Slider redirects to #carousel-example-generic [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I've tried following the links below but to no avail, it still somehow doesn't slide.
Trying to add carousel to webpage without redirecting
I've also tried updating my jQuery as said here.
Bootstrap Carousel Slider not working
Here's what I've been working on.
<!-- Carousel -->
<script>
$(document).ready(function(){
$('.carousel').carousel({
interval: 3000
})
});
</script>
<div style="width:60%;
margin-left:20%;
margin-right:20%;
">
<h1>Welcome to the GlassEngine Company Homepage</h1>
</div>
<div style="width:60%;
margin-left:45%;
margin-right:20%;
">
<h3>Enjoy your stay!</h3>
</div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" align="center">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="<?php echo base_url() ?>/images/fslide01.jpg" alt="...">
<div class="carousel-caption">
<h3>Leaves</h3>
</div>
</div>
<div class="item">
<img src="<?php echo base_url() ?>/images/fslide02.jpg" alt="...">
<div class="carousel-caption">
Awesome Statue
</div>
</div>
<div class="item">
<img src="<?php echo base_url() ?>/images/fslide03.jpg" alt="...">
<div class="carousel-caption">
Horse
</div>
</div>
<div class="item">
<img src="<?php echo base_url() ?>/images/fslide04.jpg" alt="...">
<div class="carousel-caption">
Scenery
</div>
</div>
<div class="item">
<img src="<?php echo base_url() ?>/images/fslide05.jpg" alt="...">
<div class="carousel-caption">
Animals
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I also have the following code in my <head> tag
<!-- Latest compiled and minified JavaScript -->
<script src="<?php echo base_url() ?>/js/bootstrap.min.js"></script>
<script src="<?php echo base_url() ?>/js/jquery-2.1.4.min.js"> </script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="<?php echo base_url() ?>/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="<?php echo base_url() ?>/css/bootstrap-theme.min.css">
I have also tried removing the / after the echo, but still no different.
<!-- Latest compiled and minified JavaScript -->
<script src="<?php echo base_url() ?>js/bootstrap.min.js"></script>
<script src="<?php echo base_url() ?>js/jquery-2.1.4.min.js"> </script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="<?php echo base_url() ?>css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="<?php echo base_url() ?>css/bootstrap-theme.min.css">

So it turns out I was loading bootstrap before jquery. So the proper code would be this:
<!-- Latest compiled and minified JavaScript -->
<script src="<?php echo base_url() ?>/js/jquery-2.1.4.min.js"> </script>
<script src="<?php echo base_url() ?>/js/bootstrap.min.js"></script>
Case Closed.

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