problems with sidenav

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: problems with sidenav

Oscar Bejarano pro asked 7 years ago

When I use sidenav and I reduce the size of the window manually, the "hamburger" button does not appear. The button only appears if I refresh the page and if the size of the page increases the sidenav does not appear. I hope you can help me with this.

Magdalena Obalska answered 7 years ago

Hi, sure, we'll help you. As I mentioned answering your comment in another topic, it's necessary to update your project. Also, make sure that you're using right names with no typos in your code. If it still fails, send me the code that you're using to build your sidenav and we'll see what's going on.

Oscar Bejarano pro answered 7 years ago

hi, thanks for you answer, well im using the code in the example in this link https://mdbootstrap.com/angular/advanced/sidenav/#usage i have to say that this issue is present in double navigation too, and im using the last versión of angular pro 4.2.0, thanks

Magdalena Obalska commented 7 years ago

Ok, so update it to 4.2.1 version, please. And look here once again: https://mdbootstrap.com/support/navbar/.

Oscar Bejarano pro commented 7 years ago

sorry, can you tell me how update the project to 4.2.1? in my download panel is 4.2.0, thanks

Oscar Bejarano pro answered 7 years ago

sorry, can you tell me how update the project to 4.2.1? in my download panel is 4.2.0, thanks

Magdalena Obalska commented 7 years ago

We will soon equalize to version 4.2.1, with some small npm changes. So for now, start with updating .angular-cli.json, as it's showed here: https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design/commit/cc7aec046967778d6b1fe8b930634ef35ac3e990. If you still have any problems, show me your code, please.

Oscar Bejarano pro answered 7 years ago

hi, i updated the angular-cli.json and this fixed some thing but in general, the problem persist. i will give you a link with a video where i show the problem, thanks double navigation problem

Magdalena Obalska answered 7 years ago

Ok, Oscar, now I understand what's going wrong, but I still need some code from you - it will be much easier to figure out where's the problem.

pro answered 7 years ago

Please share the solution because I am having the same problem.

Oscar Bejarano pro answered 7 years ago

hi, thanks for you answer, i had use the code in this section

https://mdbootstrap.com/angular/layout/navigation/#f-s-f-n

however , this is the code in app.component.html

<!--Double navigation-->

<!-- Sidebar navigation -->

<!-- Logo -->
<li>

</a>

</li>
<!--/. Logo -->
<!--Social-->
<li>

<li></a></li>
<li></a></li>
<li></a></li>
<li></a></li>
</ul>
</li>
<!--/Social-->
<!--Search Form-->
<li>

 

 

</li>
<!--/.Search Form-->
<!-- Side navigation links -->
<li>

 

Submit blog

<ul>
Submit listing</a></li>
<li>Registration form</a></li>
</ul>

 

Instruction

<ul>
<li>For bloggers</a></li>
<li>For authors</a></li>
</ul>

 

About

<ul>
<li>Introduction</a></li>
<li>Monthly meetings</a></li>
</ul>

 

Contact me

<ul>
<li>FAQ</a></li>
<li>Write a message</a></li>
</ul>

 

</ul>
</li>
<!--/. Side navigation links -->

<!--/. Sidebar navigation -->
<!-- Navbar -->

<!-- SideNav slide-out button -->

<a></a>

<!--/. SideNav slide-out button -->
<!-- Breadcrumb-->

Material Design for Bootstrap

<!--/. Breadcrumb-->

 

Contact</span></a>
</li>

Support</span></a>
</li>

Account</span></a>
</li>

 

Dropdown
</a>

Action</a>
Another action</a>
Something else here</a>

</li>
</ul>

<!--/. Navbar -->

<!--/.Double navigation-->
<!--Main Layout-->

 

Advanced Double Navigation with hidden SideNav &amp; fixed Navbar:
<br>
1. Hidden side menu. Click "hamburger" icon in the top left corner to open it.
2. Fixed navbar. It will always stay visible on the top, even when you scroll down.

 

<!--/Main layout-->

 

 

pro commented 7 years ago

I was following this page too https://mdbootstrap.com/angular/layout/navigation/#f-s-f-n but the hamburger button does not appear. I think this page https://mdbootstrap.com/angular/layout/navigation/#f-s-f-n just got updated to use mdb-sidenav instead of sidenav and mdb-navbar instead of navbar

Magdalena Obalska answered 7 years ago

Yes, as you have noticed now it's necessary to use mdb-sidenav and mdb-navbar instead of sidenav and navbar selectors. We have updated the documentation. Let us know if the example works right now.

Oscar Bejarano pro answered 7 years ago

Hi, I tried with mdb-sidenav but now it's worse, the page lost the style with the mdb prefix. I need to add or configure something for the mdb prefix to work?

pro commented 7 years ago

I had the same problem too

Magdalena Obalska answered 7 years ago

Ok, that's the code that works for me. Please, try it one more time. .bg-skin-lp { background-size: cover; background-repeat: no-repeat; background-position: center center; background-attachment: fixed; } <body class="light-blue-skin bg-skin-lp"> <!--Double navigation--> <header> <!-- Sidebar navigation --> <mdb-sidenav #sidenav class="sn-bg-1 fixed" [fixed]="true"> <!-- Logo --> <li> <div class="logo-wrapper waves-light"> <a href="#"><img src="http://mdbootstrap.com/img/logo/mdb-transparent.png" class="img-fluid flex-center"></a> </div> </li> <!--/. Logo --> <!--Social--> <li> <ul class="social"> <li><a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li> <li><a class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a></li> <li><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li> <li><a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a></li> </ul> </li> <!--/Social--> <!--Search Form--> <li> <form class="search-form" role="search"> <div class="form-group waves-light" mdbRippleRadius> <input type="text" class="form-control" placeholder="Search"> </div> </form> </li> <!--/.Search Form--> <!-- Side navigation links --> <li> <ul class="collapsible collapsible-accordion"> <mdb-squeezebox [multiple]="false" aria-multiselectable="false"> <!-- Collapsible link --> <mdb-item> <mdb-item-head mdbRippleRadius><i class="fa fa-chevron-right"></i> Collapsible menu</mdb-item-head> <mdb-item-body> <ul> <li><a href="#" class="waves-effect" mdbRippleRadius>Link 1</a></li> <li><a href="#" class="waves-effect" mdbRippleRadius>Link 2</a></li> </ul> </mdb-item-body> </mdb-item> <!-- Simple link --> <mdb-item class="no-collase"> <mdb-item-head mdbRippleRadius><i class="fa fa-hand-pointer-o"></i> Simple link</mdb-item-head> <mdb-item-body></mdb-item-body> </mdb-item> <!-- Collapsible link --> <mdb-item> <mdb-item-head mdbRippleRadius><i class="fa fa-eye"></i> Collapsible menu 2</mdb-item-head> <mdb-item-body> <ul> <li><a href="#" class="waves-effect" mdbRippleRadius>Link 1</a></li> <li><a href="#" class="waves-effect" mdbRippleRadius>Link 2</a></li> </ul> </mdb-item-body> </mdb-item> <!-- Simple link --> <mdb-item class="no-collase"> <mdb-item-head mdbRippleRadius><i class="fa fa-diamond"></i> Simple link 2</mdb-item-head> <mdb-item-body></mdb-item-body> </mdb-item> </mdb-squeezebox> </ul> </li> <!--/. Side navigation links --> </mdb-sidenav> <!--/. Sidebar navigation --> <!-- Navbar --> <mdb-navbar SideClass="navbar fixed-top navbar-expand-md scrolling-navbar double-nav" [containerInside]="false"> <!-- SideNav slide-out button --> <div class="float-xs-left"> <a (click)="sidenav.show()" class="button-collapse"><i class="fa fa-bars"></i></a> </div> <!--/. SideNav slide-out button --> <!-- Breadcrumb--> <div class="breadcrumb-dn mr-auto"> <p>Material Design for Bootstrap</p> </div> <!--/. Breadcrumb--> <ul class="nav navbar-nav nav-flex-icons ml-auto"> <li class="nav-item"> <a class="nav-link waves-light" mdbRippleRadius><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a> </li> <li class="nav-item"> <a class="nav-link waves-light" mdbRippleRadius><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a> </li> <li class="nav-item"> <a class="nav-link waves-light" mdbRippleRadius><i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Account</span></a> </li> <li class="nav-item dropdown btn-group" dropdown> <a dropdownToggle type="button" class="nav-link dropdown-toggle waves-light" mdbRippleRadius> Dropdown </a> <div class="dropdown-menu dropdown-primary dropdown-menu-right" role="menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </mdb-navbar> <!--/. Navbar --> </header> <!--/.Double navigation--> <!--Main Layout--> <main> <div class="container-fluid mt-5"> <h2>Advanced Double Navigation with fixed SideNav & fixed Navbar:</h2> <br> <h5>1. Hidden side menu. Click "hamburger" icon in the top left corner to open it.</h5> <h5>2. Fixed navbar. It will always stay visible on the top, even when you scroll down.</h5> <div style="height: 2000px"></div> </div> </main> <!--/Main layout--> </body>

Oscar Bejarano pro answered 7 years ago

hi, thanks for you answer. Sorry but the problem persist. If i remove the mdb prefix, it show the styles but no very well, but if i put the mdb prefix, it doesn't have styles.

 

i updated the angular-cli how show this link https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design/commit/cc7aec046967778d6b1fe8b930634ef35ac3e990

Magdalena Obalska commented 7 years ago

Ok, Oscar, send me your package and we'll check what could go wrong: m.obalska@mdbootstrap.com.

Oscar Bejarano pro answered 7 years ago

hi, thanks for you answer. whit the new update 4.3.1 the prefix mdb works fine, but the same problem persist. doble navigation problem i just downloaded the package 4.3.1 and tried the example code of you documentation. thanks

Rafał Rogulski commented 7 years ago

Hi, It's a bug, we will fix it in next release. Regards

Oscar Bejarano pro commented 7 years ago

ok, thanks

FREE CONSULTATION

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

Closed

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
Oscar Bejarano
Pro User
22Support score
11Questions 12Answers
0Snippets likes 0Snippets