Change when sidenav shows initially


Topic: Change when sidenav shows initially

johndev pro asked 7 years ago

Hello,

I would like to change "when" the sidenav displays (is open) by default. In other words, I am using a 15" MacBook Pro Retina and by default the sidenav is hidden, but I want it to show initially.

This statement on the sidenav instruction page does not help concerning this "Fixed / non-fixed SideNav
Use [fixed]="true" and class .fixed to have the sideNav be fixed and open on large screens and hides to the regular functionality on smaller screens. Our sideNav on the left is an example of fixed SideNav."

I've tried setting up custom CSS to override values and also go into "my project folder / scss / pro / _variables.scss" file and adjusting the value(s) for the following variables...

$sidenav-width:
$sidenav-breakpoint:

I am using the latest 6.0.1 MDBootrstrap Pro version files.

Any help would be very appreciated.


justinestrada pro commented 7 years ago

Same here I believe the sidenav is shown by default at 1441px I would like to show it on smaller screens 1200px as well

Damian Gemza staff commented 7 years ago

Guys, Please open pro/sidenav/sidenav.component.ts file and change 1441 / 1440 values to your desired breakpoint value, and then open your global styles.scss stylesheet, and add below styles: .breadcrumbs { @media all and (min-width: your-breakpoint-in-px) { position: absolute; left: 240px; } } But you have to notice, that when you'll upgrade our MDB Angular to a newer version, your changes in sidenav.component.ts will be overwritten. We'll think about implementing a better way to change breakpoint of nav. Best Regards, Damian

johndev pro commented 7 years ago

Thank you so very much Damian, this worked perfectly as I'm sure you knew already :)

novvia commented 6 years ago

Has there been any movement on the "implementing a better way to change breakpoint of nav" yet?

Thanks! Bryan


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: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes