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:

Layout.blade.php

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title')</title>
    <!--Bootstrap, Jquery, Pooper, FontAwesome-->
    <link rel="stylesheet" href="{{ URL::asset('css/styles.css') }}">  
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="{{ asset('plugins/bootstrap/css/bootstrap.css') }}" >
    <script src="https://kit.fontawesome.com/942404b945.js" crossorigin="anonymous"></script>
    <!--/Bootstrap, Jquery, Pooper, FontAwesome--> 

    <style>
        .dropdown-toggle::after {
            content: none;
        }
    </style>
</head>

<body class="hidden-sn grey-skin">
<!--Double navigation-->
<header>
    @include('shared.navbar')
    @include('shared.sidebar')
</header>   
<!--/.Double navigation-->
<!--Content-->
<main id="main" class="col-lg-12 pt-1">
    @yield('content')
</main>
<!--/.Content-->

<!--Scripts-->
<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";
    }

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

    $(document).on("click",".dropdown-toggle",function(){
        $(this).dropdown();
    });

</script>
<!--/.Scripts-->


@include('shared.modal-crear')
@include('shared.modal-editar')

<!--Plugins-->
<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>
<!--/.Plugins-->

</body>

</html>

navbar.blade.php

<!-- 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>
  </div> 
</hr>
  <!-- Breadcrumb-->
  <div class="breadcrumb-dn mr-auto px-4">
    <a href="/">
    <strong id="nav-title">Dimiforms</strong>
    </a>
  </div>
    <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
        </a>
        <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>
        </div>
      </li>
  </ul>
</nav>
<!-- /.Navbar -->

Sidebar.blade.php

<div class="sidebar float-left" id="sidebar">
   <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
   <div class="text-center">
         <img src="https://www.w3schools.com/w3images/avatar6.png" class="avatar mx-auto">
         <h6>@yield('User-name')</h6>
   </div>
   <hr>
   <div class="items-container">
      <a href="cuenta" >
         <h6 class="menu-item"><i class="fa fa-user-circle" aria-hidden="true"></i>   |     Cuenta</h6>
      </a>
      <a href="formularios">
         <h6 class="menu-item"><i class="fa fa-book" aria-hidden="true"></i>   |     Formularios</h6>
      </a>
      <a href="estadisticas">
         <h6 class="menu-item"><i class="fa fa-bar-chart" aria-hidden="true"></i>   |     Estadisticas</h6>
      </a>
      <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>
            </div>
         </div>
      </a>
      <hr>
      <a href="about">
         <h6 class="menu-item"><i class="fa fa-info-circle" aria-hidden="true"></i>   |     Acerca de</h6>
      </a>
   </div>

styles.css

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

/*sidebar*/
#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;
}

.items-container{
  text-decoration: none;
  color: white;
}

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

.menu-item:hover{
  background-color: white;
  color:#2c3e50; 
}

.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;
}

/*sidebar*/

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

#sidebarCollapse{
  background-color: transparent;
  color: #fafafa;
}

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

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

/*main*/
main{
  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 */
.dropdown-item{
  display: block;
  transition: 0.8s;
  color: #2c3e50 !important;
  background-color: transparent !important;
}

.dropdown-item:hover{
  color:#c36618 !important;
}

.dropdown{
  width: inherit;
  background-color: inherit !important;
  border: 0px;
}

/*  Modals  */
.submit-button{
  background-color: #2c3e50;
  color:white;
  border-radius: 8px;
}

By

Leave a Reply

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