Solution 1 :

I fixed it by changing the order of the bootstrap, Jquery and main css files.

I had two bootstrap files imported as well.

Problem :

I’m new to the laravel environment. I’ve been working with a navbar and collapsible sidebar, both of them have a dropdown menu. All of a sudden, I changed some styles and now both of them are not working anymore. Any help would be appreciated.

Here are my files:


<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--Bootstrap, Jquery, Pooper, FontAwesome-->
    <link rel="stylesheet" href="{{ URL::asset('css/styles.css') }}">  
    <script src="" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="{{ asset('plugins/bootstrap/css/bootstrap.css') }}" >
    <script src="" crossorigin="anonymous"></script>
    <!--/Bootstrap, Jquery, Pooper, FontAwesome--> 

        .dropdown-toggle::after {
            content: none;

<body class="hidden-sn grey-skin">
<!--Double navigation-->
<!--/.Double navigation-->
<main id="main" class="col-lg-12 pt-1">

<script type="text/javascript">
    function openNav() {
        document.getElementById("sidebar").style.width = "250px";
        document.getElementById("main").style.marginLeft = "250px";
/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
    function closeNav() {
        document.getElementById("sidebar").style.width = "0";
        document.getElementById("main").style.marginLeft = "0";

        var scroll_start = 0;
        var startchange = $('#startchange');
        var offset = startchange.offset();
        if (startchange.length){
            $(document).scroll(function() { 
            scroll_start = $(this).scrollTop();
            if(scroll_start > {
                $(".navbar-default").css('background-color', '#f0f0f0');
            } else {
                $('.navbar-default').css('background-color', 'transparent');




<script src="{{ asset('plugins/jquery/js/jquery.js') }}"></script>        
<script src="{{ asset('plugins/bootstrap/js/bootstrap.js') }}"></script>
<script src="js/bootstrap.min.js"></script>




<!-- Navbar -->
<nav id="navbar" class="navbar fixed-top navbar-toggleable-md navbar-expand-lg shadow p-2 mb-1 ">
  <!-- SideNav slide-out button -->
  <div class="float-left pl-2">
    <a class="button-collapse"><button type="button" id="sidebarCollapse" onclick="openNav()" class="btn">
    <i class="fa fa-bars" aria-hidden="true"></i></button></a>
  <!-- Breadcrumb-->
  <div class="breadcrumb-dn mr-auto px-4">
    <a href="/">
    <strong id="nav-title">Dimiforms</strong>
    <ul class="nav navbar-nav nav-flex-icons">
      <li class="nav-item dropdown">
        <a id="nav-dropdown" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
          aria-haspopup="true" aria-expanded="false">
          @yield('User-name', 'Default') | Usuario
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="">Mi cuenta</a>
          <a class="dropdown-item" href="{{ route('usuario_logout')}}">Salir</a>
<!-- /.Navbar -->


<div class="sidebar float-left" id="sidebar">
   <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
   <div class="text-center">
         <img src="" class="avatar mx-auto">
   <div class="items-container">
      <a href="cuenta" >
         <h6 class="menu-item"><i class="fa fa-user-circle" aria-hidden="true"></i>   |     Cuenta</h6>
      <a href="formularios">
         <h6 class="menu-item"><i class="fa fa-book" aria-hidden="true"></i>   |     Formularios</h6>
      <a href="estadisticas">
         <h6 class="menu-item"><i class="fa fa-bar-chart" aria-hidden="true"></i>   |     Estadisticas</h6>
      <a class="dropdown-toggle dropdown items-container" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-target="#sidebar-dropdown">
         <h6 class="menu-item"><i class="fas fa-laptop-code"></i>   |     Dimiforms</h6>
         <div class="dropdown-menu" id="sidebar-dropdown" aria-labelledby="dropdownMenuLink">
            <a class="dropdown-item" href="{{ route('display_crear_formulario')}}" data-toggle="modal" data-target="#modal-crear">Crear Formulario</a>
            <div class="dropdown-divider"></div>
               <a class="dropdown-item" href="{{ route('display_editar_formulario')}}" data-toggle="modal" data-target="#modal-editar">Editar Formulario</a>
      <a href="about">
         <h6 class="menu-item"><i class="fa fa-info-circle" aria-hidden="true"></i>   |     Acerca de</h6>


/*general stuff*/
a {
  text-decoration: none !important;

#sidebar {
  height: 100%;
  width: 0;
  z-index: -inherit;
  position: fixed;
  left: 0;
  background-color: #2c3e50;
  padding: 60px 0 0 0;
  top: 55px;
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 1s; /* 0.5 second transition effect to slide in the sidebar */

.sidebar h6 {
  color: rgb(255, 255, 255);
  margin-top: 7px;
.sidebar a{
  padding: 4px;
  text-decoration: none;
  font-size: 18px;
  color: white;
  display: block;
  transition: 0.8s;
  background-color: inherit !important;

/* Position and style the close button (top right corner) */
.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;

.closebtn:hover {
  color: #c36618 !important;

  text-decoration: none;
  color: white;

.menu-item, .dropdown-item{
  padding: 6px 0 10px 20px;
  transition: 0.8s;
  cursor: pointer;

  background-color: white;

.avatar {
  vertical-align: middle;
  width: 50px;
  height: 50px;
  border-radius: 50px 50px 50px 50px;

#dismiss {
  width: 35px;
  height: 35px;
  position: absolute;
  /* top right corner of the sidebar */
  top: 10px;
  right: 10px;


#navbar {
  background-color: #c36618;
  border: none !important;
  height: 60px;

  background-color: transparent;
  color: #fafafa;

#sidebarCollapse:hover {
  background-color: white;
  color: #c36618;

#nav-title, #nav-dropdown{
  color: #ffffff;

  padding: 0 0 0 25%;
  transition: margin-left 1s; /* If you want a transition effect */
  padding: 20px;

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}

/* Dropdowns */
  display: block;
  transition: 0.8s;
  color: #2c3e50 !important;
  background-color: transparent !important;

  color:#c36618 !important;

  width: inherit;
  background-color: inherit !important;
  border: 0px;

/*  Modals  */
  background-color: #2c3e50;
  border-radius: 8px;


Leave a Reply

Your email address will not be published. Required fields are marked *