How to make MDbootstrap admin template sidebar fixed.

Topic: How to make MDbootstrap admin template sidebar fixed.

pro asked 7 years ago

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

Add comment

Marta Szymanska staff pro premium 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 7 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 pro premium commented 7 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 7 years ago

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

Marta Szymanska staff pro premium commented 7 years ago

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

Add comment

xardonik answered 7 years ago

0 0 Best answer

Can you give link to example of what you think?

Add comment

pro answered 7 years ago

0 0 Best answer

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

Add comment

pro answered 7 years ago

0 0 Best answer

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

Add comment

Marta Szymanska staff pro premium answered 7 years ago

0 0 Best answer

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

Add comment

pro answered 7 years ago

0 0 Best answer

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

Add comment

pro answered 7 years ago

0 0 Best answer

What I have still behaving like a hidden sidebar.

Add comment

Marta Szymanska staff pro premium answered 7 years ago

0 0 Best answer

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

Add comment

pro answered 7 years ago

0 0 Best answer

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

Add comment

wavelytech pro answered 7 years ago

0 0 Best answer

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.

Add comment

donatellaGATTO pro premium priority answered 5 years ago