Disabling responsiveness in main.css

1

Hello, how is the main.css file now disabled from allowing responsive features? I would like to tweak the responsive layout at a later date and keep the current markup intact.

There’s a similar article here: Remove Responsive

Although, this details the previous setup of Roots with App.css and the two Bootstrap stylesheets. Removing responsiveness was pretty simple with Bootstrap 2, by choosing which stylesheet you’d like to use.

Any suggestions or previous articles I may have missed?

2

Have you looked at my response in the thread you mentioned?

It provides an in-depth way of doing this with Bootstrap 3 and Roots 6.5.0 (both current releases)

I’ve pasted it below for your convenience:

http://getbootstrap.com/getting-started/#disable-responsive

In templates/head.php remove

<meta name="viewport" content="width=device-width, initial-scale=1.0">

In assets/less/app.less add:

.container {
   max-width: none !important;
   width: 970px;
}

In header-top-navbar.php remove button.navbar-toggle (line 4 to 9) and remove .collapse and .navbar-collapse classes from the <nav> element. It should look something like this when you are done:

<header class="banner navbar navbar-default navbar-static-top" role="banner">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="<?php echo home_url(); ?>/" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
      	<?php bloginfo( 'name' );?>
      </a>
    </div>

    <nav role="navigation">
      <?php
        if (has_nav_menu('primary_navigation')) :
          wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' => 'nav navbar-nav'));
        endif;
      ?>
    </nav>
  </div>
</header>

In lib/config.php change the grid classes from .col-sm-* to .col-xs-* (lines 24, 27, 37)

/**
 * .main classes
 */
function roots_main_class() {
  if (roots_display_sidebar()) {
    // Classes on pages with the sidebar
    $class = 'col-xs-8';
  } else {
    // Classes on full width pages
    $class = 'col-xs-12';
  }

  return $class;
}

/**
 * .sidebar classes
 */
function roots_sidebar_class() {
  return 'col-xs-4';
}

Let me know if I missed anything and I will update this post.

Hope this helps

3

Thanks a lot. I tried this but must have missed something. I’ll revisit your suggestion and post and update on how it turns out.

4

@enollo, it worked!

I edited my theme somewhat so this wasn’t a perfect guide for me but out of the box it’s great.

Thanks.

5

Thank you very much for these instructions. I also noticed that the navbar continues to collapse even after making these changes. I’ve resolved the issue by setting @screen-sm-min = 0px (found on line 221 of assets/bootstrap/variables.less). I’m not sure if it’s the best fix but thought I’d mention it incase anyone else was running into the same issue.