How to make MDbootstrap admin template sidebar fixed.

Topic: How to make MDbootstrap admin template sidebar fixed.

bannerpclauran pro asked 6 years ago

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

Add comment

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.

Add comment

donatellaGATTO priority answered 4 years ago

0 0 Best answer

how can i do with angular?

Add comment

wavelytech pro answered 6 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

Marta Wierzbicka staff answered 6 years ago

2 0 Best answer

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 <code>js/mdb.js</code> change this two values from 1440 to 1200:
<pre><code>// 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%)');
              }

}

});
        }</code></pre>

2. Safe this file and then minify and replace old <code>mdb.min.js</code> with new one in your <code>js</code> 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 <code>_variables.scss</code> file in this line: <code>$sidenav-breakpoint: 1200px !default;</code>

4. In <code>_navbars-pro.scss</code> change value in these lines: 
<pre><code>@media only screen and (min-width: 1200px) {
        .button-collapse {
            display: none;
        }
    }</code></pre>

<pre><code>.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;
        }
    }</code></pre>

5. In <code>_templates.scss</code> file change this line:
<pre><code>@media (max-width: 1200px) {
        .double-nav,
        main,
        footer {
            padding-left: 0;
        }
    }</code></pre>

6. Safe all this files.

Best,
Marta

Please insert min. 20 characters.

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.

Add comment

bannerpclauran pro answered 6 years ago

0 0 Best answer

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

Add comment

Marta Wierzbicka staff answered 6 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

bannerpclauran pro answered 6 years ago

0 0 Best answer