Side-Nav not working well with white-skin

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Side-Nav not working well with white-skin

pbeks pro premium priority asked 7 years ago

When using Side-Nav and white skin then some of the menu items are not showing on the Side-Nav when using an other skin all works fine. Wrong Side-Bar https://ehbo-mierlo.nl/images/white-skin.png Right Side-Bar https://ehbo-mierlo.nl/images/light-blue-skin.png    

Bartłomiej Malanowski staff pro premium commented 7 years ago

Could you please show us your code?

pbeks pro premium priority answered 7 years ago

Here is the weblink https://ehbo-mierlo.nl/index5.php

pbeks pro premium priority answered 7 years ago

I used below code from your examples.

When I use light-blue-skin all works fine when I change to white-skin parts are invisible

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet">
<script>
// SideNav Button Initialization
$(".button-collapse").sideNav();
// SideNav Scrollbar Initialization
var sideNavScrollbar = document.querySelector('.custom-scrollbar');
Ps.initialize(sideNavScrollbar);
</script>
</head>

<!-- <body class="light-blue-skin"> -->
<body class="white-skin">

<!-- Start your project here-->
<!-- SideNav slide-out button -->
<a href="#" data-activates="slide-out" class="btn btn-primary p-3 button-collapse"><i class="fa fa-bars"></i></a>

<!-- Sidebar navigation -->
<div id="slide-out" class="side-nav fixed">
<ul class="custom-scrollbar">
<!-- Side navigation links -->
<li>
<ul class="collapsible collapsible-accordion">
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-chevron-right"></i> Submit blog<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Submit listing</a>
</li>
<li><a href="#" class="waves-effect">Registration form</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-hand-pointer-o"></i> Instruction<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">For bloggers</a>
</li>
<li><a href="#" class="waves-effect">For authors</a>
</li>
</ul>
</div>
</li>
<ul>
<li><a href="#" class="waves-effect">Introduction</a>
</li>
<li><a href="#" class="waves-effect">Monthly meetings</a>
</li>
</ul>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-envelope-o"></i> Contact me<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">FAQ</a>
</li>
<li><a href="#" class="waves-effect">Write a message</a>
</li>
<li><a href="#" class="waves-effect">FAQ</a>
</li>
<li><a href="#" class="waves-effect">Write a message</a>
</li>
<li><a href="#" class="waves-effect">FAQ</a>
</li>
<li><a href="#" class="waves-effect">Write a message</a>
</li>
<li><a href="#" class="waves-effect">FAQ</a>
</li>
<li><a href="#" class="waves-effect">Write a message</a>
</li>
</ul>
</div>
</li>
<ul>
<li><a href="#" class="waves-effect">FAQ</a>
</li>
</ul>

</ul>

</li>
<!--/. Side navigation links -->
</ul>
<div class="sidenav-bg rgba-blue-strong"></div>
</div>
<!--/. Sidebar navigation -->
<!-- /Start your project here-->

<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
</body>

</html>

                                                                                    

                                                                                
                                        

                                                                                                                                                                                                                                    

                                                                                                            
                                                                                                    

                                                                                    

                                        
                                    

                                                                                                        

                                
                                                                                            
                                

                                    
                                    

                                        

                                                    
                                                    Marta Szymanska
                                             staff  pro  premium                                             answered 7 years ago                                        

                                        
                                    

                                    
                                    

                                        Hi,

do not remove .collapsible-header class and all will be fine.

Links like these:

<li><a href="#" class="waves-effect">Introduction</a> </li>

<li><a href="#" class="waves-effect">Monthly meetings</a> </li>

replace with these:

<li><a href="#" class="collapsible-header waves-effect">Introduction</a> </li>

<li><a href="#" class="collapsible-header waves-effect">Monthly meetings</a> </li>

Best,

Marta                                                                                    

                                                                                
                                        

                                                                                                                                                                                                                                                                                                
                                                    
                                                        

                                                            pbeks
                                                             pro  premium  priority                                                             commented 7 years ago                                                                                                                    

                                                        That solved the problem, Thanks.                                                    
                                                                                                                                                                                                                                                                                                

                                                                                                

                                                                                                            
                                                                                                    

                                                                                    

                                        
                                    

                                                                                                        

                                
                                                                                                        
                            

                                
                                

                                    

                                        
                                        
                                        
                                        
                                    

                                

                                
                                
                                

                                    
Write

                                    
                                         Create snippet
                                    
                                

                                
                                

                                    

                                        
                                        

                                            
                                            
                                            
                                            

                                                Please insert min. 20 characters.                                            

                                            

                                                                                                    
                                                                                            

                                        

                                    

                                

                                
                            

                            
                                            

                    
                    
                    

                                           
                 
                  
                      
                     

                      

                       
FREE CONSULTATION

                       
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.


                      

                    

                      
                  
                    
                    

                    

                        

                          
                          
                          
                          
                          
                         

                        

                      

                    
                       


                                                 

                        
                        

                            
                            
Status

                            
                            

                                

                                            Resolved                                        

                                                            

                        

                        
                                                
                        

                            
                            
Specification of the issue

                                            
        

            
    
                
  • 
                    User:
                    Pro
                
    • 
                
  • 
                    Premium support:
                    Yes
                
    • 
                
  • 
                    Technology:
                    MDB jQuery
                
    • 
                                    
  • 
                        MDB Version:
                        -
                    
    • 
                                    
  • 
                        Device:
                        -
                    
    • 
                                    
  • 
                        Browser:
                        -
                    
    • 
                                    
  • 
                        OS:
                        -
                    
    • 
                                
  • 
                    Provided sample code:
                    No
                
    • 
                
  • 
                    Provided link:
                    Yes
                
    • 
                
            

        

                                

                        
                                                                                                                            
                            

                                
                                
About author

                                                                    
                

                            
                        

                


                    
                    

                        pbeks
                    

                    
                    
                    

                    
                    
                                            Pro User
                                                                Premium support
                                        
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    

                    33Support score
                    

                    12Questions
                    6Answers
                    

                    
                    

                    1Snippets likes
                    4Snippets