Sidebar toggle menu getting stuck after clicking

HTML & CSS
, ,
1

I have a strange thing going on in my website admin. The sidebar has two links 1) Dashboard 2)Photos ( this is a toggle link).
When I click on the under “Photos” link, the page shows up but after that point , the toggle menu is frozen. The only way to make the toggle menu work again is to click on the dashboards link on the top again. After hours of searching I found out that “List” link is introducing a table and it somehow freezes the menu. Please help me find what is breaking my menu?..

My HTML is


							<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Photo List | Photography</title>
      <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="description" content="">
      <meta name="author" content="">
      <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Aguafina+Script">
      <link rel="stylesheet" type="text/css" href="/theme/Admin/css/bootstrap.css" />
      <link rel="stylesheet" type="text/css" href="/theme/Admin/css/font-awesome/css/font-awesome.css" />
      <link rel="stylesheet" type="text/css" href="/theme/Admin/css/theme.css" />
      <link rel="stylesheet" type="text/css" href="/theme/Admin/css/fancyzoom.css" />
      <link rel="stylesheet" type="text/css" href="/theme/Admin/css/mystyles.css" />
      <link rel="stylesheet" type="text/css" href="/css/bootstrap-theme.css" />
      <script type="text/javascript" src="/theme/Admin/js/jquery-1.12.4.js"></script>
      <script type="text/javascript" src="/theme/Admin/js/bootstrap.js"></script>
      <script type="text/javascript" src="/theme/Admin/js/site.js"></script>
      <script type="text/javascript" src="/theme/Admin/js/fancyzoom.js"></script>
      <script type="text/javascript" src="/BootstrapLiveEditor/scripts/innovaeditor.js"></script>
      <script type="text/javascript" src="/BootstrapLiveEditor/scripts/jquery.innovaeditor.js"></script>
      <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
      <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
      <!-- Le fav and touch icons -->
      <link rel="shortcut icon" href="../assets/ico/favicon.ico">
      <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/img/apple-touch-icon-144-precomposed.png">
      <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/img/apple-touch-icon-114-precomposed.png">
      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/img/apple-touch-icon-72-precomposed.png">
      <link rel="apple-touch-icon-precomposed" href="/img/apple-touch-icon-57-precomposed.png">
   </head>
   <!--[if lt IE 7 ]> 
   <body class="ie ie6">
      <![endif]-->
      <!--[if IE 7 ]> 
      <body class="ie ie7 ">
         <![endif]-->
         <!--[if IE 8 ]> 
         <body class="ie ie8 ">
            <![endif]-->
            <!--[if IE 9 ]> 
            <body class="ie ie9 ">
               <![endif]-->
               <!--[if (gt IE 9)|!(IE)]><!--> 
               <body class="">
                  <!--<![endif]-->
                  <div class="navbar">
                  <a href="/admin/dashboards" class="brand">ADMIN</a>
                  <nav class="navbar navbar-default sidebar" role="navigation">
                     <div class="container-fluid">
                        <div class="navbar-header">
                           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
                           <span class="sr-only">Toggle navigation</span>
                           <span class="icon-bar"></span>
                           <span class="icon-bar"></span>
                           <span class="icon-bar"></span>
                           </button>      
                        </div>
                        <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
                           <ul class="nav navbar-nav">
                              <li class="<br />
                                 <b>Notice</b>:  Undefined variable: controller in <b>/home/rajeevth/public_html/app/View/Themed/Admin/Elements/admin_header.ctp</b> on line <b>18</b><br />
                                 ">
                                 <a href="/admin/dashboards"><i class="glyphicon icon-dashboard"></i> <span>Dashboard</span></a>			
                              </li>
                              <li class="dropdown">
                                 <a href="#"  class="dropdown-toggle"  data-toggle="dropdown"><i class="icon-picture"></i>Photos<b class="caret"></b></a>
                                 <ul class="dropdown-menu forAnimate in" role="menu">
                                    <li class="active">
                                       <a href="/admin/photos"><i class="icon-picture"></i> <span>List</span></a>						
                                    </li>
                                    <li class="">
                                       <a href="/admin/photos/add"><i class="icon-picture"></i> <span>Add</span></a>						
                                    </li>
                                 </ul>
                              </li>
                           </ul>
                        </div>
                     </div>
                  </nav>
                  <div class="content">
                     <div class="container-fluid">
                        <div class="row-fluid">
                           <div class="span12 main-content">
                              <div class="row-fluid">
                                 <div class="row-fluid">
                                    <h2>Photos list			</h2>
                                    <a href="/admin/photos/add" class="btn btn-info">Add Photo</a>			<a href="/admin/photos/multi_add" class="btn btn-info">Add Multiple Photos</a>			
                                    <div class="fr search-box">
                                       <form action="/admin/photos" autocomplete="off" id="SearchAdminIndexForm" method="post" accept-charset="utf-8">
                                          <div style="display:none;"><input type="hidden" name="_method" value="POST"/><input type="hidden" name="data[_Token][key]" value="96737610f3748144c090eb442c8cd3b5c19e0ac4" id="Token484081361"/></div>
                                          <input name="data[Search][search]" class="form-control" placeholder="Search" type="text" id="SearchSearch"/><button type="submit" class="btn btn-info"><i class="icon-search"></i></button>
                                          <div style="display:none;"><input type="hidden" name="data[_Token][fields]" value="a84487fc77f9d5657554925340c907891b315b16%3A" id="TokenFields1998019759"/><input type="hidden" name="data[_Token][unlocked]" value="" id="TokenUnlocked476803663"/></div>
                                       </form>
                                    </div>
                                    <table class="table table-bordered table-striped table-hover" id="gallery">
                                       <thead>
                                          <tr>
                                             <th class="span1">#</th>
                                             <th class="tc">Image</th>
                                             <th><a href="/admin/photos/index/sort:alt/direction:asc">Title</a></th>
                                             <th><a href="/admin/photos/index/sort:description/direction:asc">Description</a></th>
                                             <th><a href="/admin/photos/index/sort:keyword/direction:asc">Keywords</a></th>
                                             <th><a href="/admin/photos/index/sort:Gallery.name/direction:asc">Gallery</a></th>
                                             <th style="width:13%">Action</th>
                                          </tr>
                                       </thead>
                                       <tbody>
                                          <tr class="even" >
                                             <td>1</td>
                                             <td class="tc">
                                                <br/><img src="/img/galleries/small/772dd7b2fe99f45be61e7cd4c9f1303c_317686.jpg" style="width:auto; height : 60px;" alt="" />							<a href="/photo/546-356356" class="" fullpath="1">http://www.rajeevthomas.com/photo/546-356356</a>							
                                             </td>
                                             <td><a href="#" class="title" data-type="text" data-pk="70" data-url="/photos/edit_photos" data-title="Enter title" data-name="title">546 356356</a></td>
                                             <td><a href="#" class="description" data-row="10" data-type="textarea" data-pk="70" data-url="/photos/edit_photos" data-title="Enter description" data-name="description"> 56 35 5456</a></td>
                                             <td><a href="#" class="keyword" data-row="10" data-type="textarea" data-pk="70" data-url="/photos/edit_photos" data-title="Enter keyword" data-name="keyword">54 54 6</a></td>
                                             <td>
                                                <a href="/galleries/galleries/46" class="">G-1</a>							
                                             </td>
                                             <td>
                                                <a href="/admin/photos/edit/70" class="btn small" title="Edit">Edit</a><a href="/admin/photos/delete/70" class="btn small" title="Delete" onclick="if (confirm(&quot;Are you sure you want to delete the image \&quot;546 356356\&quot;?&quot;)) { return true; } return false;">Delete</a>							
                                             </td>
                                          </tr>
                                          <tr class="odd" >
                                             <td>2</td>
                                             <td class="tc">
                                                <br/><img src="/img/galleries/small/2fe64b839f60ad1531b9b40a652ce134_689092.jpg" style="width:auto; height : 60px;" alt="" />							<a href="/photo/56535" class="" fullpath="1">http://www.rajeevthomas.com/photo/56535</a>							
                                             </td>
                                             <td><a href="#" class="title" data-type="text" data-pk="69" data-url="/photos/edit_photos" data-title="Enter title" data-name="title">56535</a></td>
                                             <td><a href="#" class="description" data-row="10" data-type="textarea" data-pk="69" data-url="/photos/edit_photos" data-title="Enter description" data-name="description">4565 54656456</a></td>
                                             <td><a href="#" class="keyword" data-row="10" data-type="textarea" data-pk="69" data-url="/photos/edit_photos" data-title="Enter keyword" data-name="keyword">536 546 </a></td>
                                             <td>
                                                <a href="/galleries/galleries/46" class="">G-1</a>							
                                             </td>
                                             <td>
                                                <a href="/admin/photos/edit/69" class="btn small" title="Edit">Edit</a><a href="/admin/photos/delete/69" class="btn small" title="Delete" onclick="if (confirm(&quot;Are you sure you want to delete the image \&quot;56535\&quot;?&quot;)) { return true; } return false;">Delete</a>							
                                             </td>
                                          </tr>
                                       </tbody>
                                    </table>
                                    <div class="dataTables_info">Showing 1 to 2 of 2 entries</div>
                                    <div class="pagination fr">
                                       <ul>
                                          <li class="prev disabled"><a href="/admin/photos">&lt;</a></li>
                                          <li class="active"><a href="/admin/photos">1</a></li>
                                          <li class="next disabled"><a href="/admin/photos">&gt;</a></li>
                                          <li class="next"></li>
                                       </ul>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
                           <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
                           <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
                           <link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
                           <script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
                           <script type="text/javascript">
                              //turn to inline mode
                              
                              $(document).ready(function() {
                              	$.fn.editable.defaults.mode = 'inline';
                              	$('.title').editable();
                              	$('.description').editable();
                              	$('.keyword').editable();
                              });
                              
                              
                           </script>
                           <footer>
                              <p>Copyright &copy; 2016 rajeevthomas.com</p>
                           </footer>
                        </div>
                     </div>
                  </div>
                  <script type="text/javascript">
                     $("[rel=tooltip]").tooltip();
                     $(function() {
                     	$('.demo-cancel-click').click(function(){return false;});
                     });
                  </script>
   </body>
</html>

And my css is

.dropdown-menu {
  position: relative;
  min-width: 200px;
  border-radius: 0px;
}

.nav > li > a:active,
.nav .open > a,
.nav .open > a:hover, 
.nav .open > a:focus {
    background-color: #337ab7;
    color: #fff;
}

body,html{
    height: 100%;
  }

  nav.sidebar, .main{
    -webkit-transition: margin 200ms ease-out;
      -moz-transition: margin 200ms ease-out;
      -o-transition: margin 200ms ease-out;
      transition: margin 200ms ease-out;
  }

  .main{
    padding: 10px 10px 0 10px;
  }

 @media (min-width: 765px) {

    

    nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
      margin-left: 0px;
    }

    nav.sidebar .navbar-brand, nav.sidebar .navbar-header{
      text-align: center;
      width: 100%;
      margin-left: 0px;
    }
    
    nav.sidebar a{
      padding-right: 13px;
    }

    nav.sidebar .navbar-nav > li:first-child{
      border-top: 1px #e5e5e5 solid;
    }

    nav.sidebar .navbar-nav > li{
      border-bottom: 1px #e5e5e5 solid;
    }

    nav.sidebar .navbar-nav .open .dropdown-menu {
      position: static;
      float: none;
      width: auto;
      margin-top: 0;
      background-color: transparent;
      border: 0;
      -webkit-box-shadow: none;
      box-shadow: none;
    }

    nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{
      padding: 0 0px 0 0px;
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
      color: #777;
    }

    nav.sidebar{
      width: 200px;
      height: 100%;
      margin-left: -160px;
      float: left;
      margin-bottom: 0px;
    }

    nav.sidebar li {
      width: 100%;
    }

    nav.sidebar:hover{
      margin-left: 0px;
    }

    .forAnimate{
      opacity: 0;
    }
  }
   
  @media (min-width: 1330px) {

    .main{
      width: calc(100% - 200px);
      margin-left: 200px;
    }

    nav.sidebar{
      margin-left: 0px;
      float: left;
    }

    nav.sidebar .forAnimate{
      opacity: 1;
    }
  }

  nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
    color: #CCC;
    background-color: transparent;
  }

  nav:hover .forAnimate{
    opacity: 1;
  }
  section{
    padding-left: 15px;
  }

.sidebar{overflow: hidden;}
2

Your site requires a login.

The links to assets in the posted HTML are relative and do not open anything for us.

3

Thank you ronpat for your reply…

Removed sensitive info

I wish I could produce the details as a static site without login but for some reason I am not able to reproduce the same problem that way.

It looks as if cpradio edited my question to remove my log in details? forum policy? safety of my site?

4

In your CodePen and on your site, I see a line in the navbar that is obviously invalid.

<ul class="nav navbar-nav">
    <li class="<br />
    <b>Notice</b>:  Undefined variable: controller in <b>/home/rajeevth/public_html/app/View/Themed/Admin/Elements/admin_header.ctp</b> on line <b>18</b><br />
">

There are several other errors that might be contributing to the problem. I’d like to encourage you to fix the validation errors so we can continue with good HTML.

1 Like
5

Yes and Yes. Are you sure you want to be exposing those details to everyone on the Internet?

6

Thanks @ronpat and @cpradio . I will try to reproduce this problem some other way and will post the code here.

7

I have corrected the errors. And the admin now is accessible without log in. The problem is with toggle menu. Once I click on the Photos–>List The menu gets stuck, the Photos link is not clickable anymore after that. I need to then click on the dashboard link to make the Photos link clickable again. I also saw that Photos—> Add link has no problems and I can click on it without freezing the top Photos link. I really think this problem is because of the <table> introduced by the List link.I hope I am not confusing you with my explanations. :slight_smile:

8

It is not the “click” that is the problem, it is a path problem.

The menu works from admin/dashboards but from admin/photos there is a Not Found error for css/bootstrap-theme.css

Are you sure this is a good idea?

You don’t want just anyone to be able to upload malicious files to your site or get access to information and abilities that should be yours alone…

1 Like
9

@Mittineague thank you for replying!. How can I see this path problem ? Did you use Firebug or other tools to find this? [quote=“Mittineague, post:8, topic:237726”]
Are you sure this is a good idea?

You don’t want just anyone to be able to upload malicious files to your site or get access to information and abilities that should be yours alone…
[/quote]

I understand what you are saying here. The admin is not fully functional. Most of the admin is missing. I had no other way to produce a live link that exhibited the problem. But I still understand your point.

10

I used Vivaldi dev tools console tab.

AFAIK most browsers have similar that shows by pressing the f12 key.

972×589 87.4 KB

1 Like
11

@Mittineague Thank you. I found that bootstrap-theme.css was missing. I added that file to the folder but the problem with the menu still continues :pensive:

12

@ronpat, @cpradio , @Mittineague I found the problem. There was an older version of Bootstrap script echoed out to the page at the bottom and I think which was conflicting with the current version. Once I removed that line of code, the menu work perfectly. Thank you so much for your help. :grinning:

2 Likes
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.