Topic: How to make MDbootstrap admin template sidebar fixed.

bannerpclauran pro asked 7 years ago


The MDbootstrap admin template, how do you make the sidebar fixed.

Arkadiusz Idzikowski staff answered 4 years ago


You can find all information for Angular sidenav in our documentation: https://mdbootstrap.com/docs/angular/navigation/sidenav/#fixed

In case of any further questions please create new ticket in the Angular section.


donatellaGATTO priority answered 4 years ago


how can i do with angular?


wavelytech pro answered 6 years ago


Has there been updates on this? Is it possible to change the sidebar breakpoint as of now? With sidenav default to hidden (for most screens), its as if mdbootstrap is pushing for all templates to default to navigation bar being on top.

Marta Wierzbicka staff answered 7 years ago


Hi, You can change this breakpoint, but you need to do a few steps. For example if you want to change breakpoint for sidenav from 1440 px to 1200 px (you can choose any value you want) do this steps: 1. In file js/mdb.js change this two values from 1440 to 1200:
// If fixed sidenav, bring menu out
        if (menu_id.hasClass('fixed')) {
            if (window.innerWidth > 1440) {
              menu_id.css('transform', 'translateX(0)');
            }
          }

        // Window resize to reset on large screens fixed
        if (menu_id.hasClass('fixed')) {
          $(window).resize( function() {
            if (window.innerWidth > 1440) {
              // Close menu if window is resized bigger than 992 and user has fixed sidenav
              if ($('#sidenav-overlay').length != 0 && menuOut) {
                removeMenu(true);
              }
              else {
                // menu_id.removeAttr('style');
                menu_id.css('transform', 'translateX(0%)');
                // menu_id.css('width', options.menuWidth);
              }
            }
            else if (menuOut === false){
              if (options.edge === 'left') {
                menu_id.css('transform', 'translateX(-100%)');
              } else {
                menu_id.css('transform', 'translateX(100%)');
              }

            }

          });
        }
2. Safe this file and then minify and replace old mdb.min.js with new one in your js catalog. 3. Now you need to change values in sass files, so for do this you need a preprocessor like Gulp or Prepros. First change value from 1440 px to 1200px on _variables.scss file in this line: $sidenav-breakpoint: 1200px !default; 4. In _navbars-pro.scss change value in these lines:
@media only screen and (min-width: 1200px) {
        .button-collapse {
            display: none;
        }
    }
.button-collapse {
        @media (min-width: 1200px) {
            display: none;
        }
        @media (max-width: 1200px) {
            display: block;
            position: relative;
            font-size: 1.4rem;
            margin-top:2px;
            margin-right: 10px;
            margin-left: 10px;
        }
    }
5. In _templates.scss file change this line:
@media (max-width: 1200px) {
        .double-nav,
        main,
        footer {
            padding-left: 0;
        }
    }
6. Safe all this files. Best, Marta

topi pro commented 6 years ago

Wow, I must say it's really silly not to use the standard Bootstrap sizes! This 1440 pixels is very random and makes it complicated to configure certain hide/display values based on Boostrap's standard widths.

Bartłomiej Malanowski staff commented 6 years ago

@topi, thank you for your message. I added your suggestion to our ideas' list, so our designers will review this. The default breakpoint for sideNav might change in the future. Currently, if you really want to change it, please follow Marta's guide

Qualifa pro commented 6 years ago

I agree ... far too cumbersome just to change something as trivial as the sidebar breakpoint!

Marta Wierzbicka staff commented 6 years ago

@Qualifa, as Bartek said, we will think about this thing and decide we will change it or not.

bannerpclauran pro answered 7 years ago


So how do I fix because it is hidden on my 15 inch laptop

Marta Wierzbicka staff answered 7 years ago


Hi, But in admin template sidenav is fixed. Maybe you wan to change breakpoint of sidenav for smaller devices? Because now sidenav is fixed from 1441px and below this width sidenav is hidden. Best, Marta

bannerpclauran pro answered 7 years ago


What I have still behaving like a hidden sidebar.

bannerpclauran pro answered 7 years ago


I bought the admin template, is this functionality included in it.

Marta Wierzbicka staff answered 7 years ago


Hi, did you see our documentation about navigation: https://mdbootstrap.com/css/page-layouts/ ? Everything is explained there. Best, Marta

bannerpclauran pro answered 7 years ago


https://colorlib.com/polygon/gentelella/index.html

bannerpclauran pro answered 7 years ago


I want to achieve a similar sidebar as shown in the link

xardonik free answered 7 years ago


Can you give link to example of what you think?

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags