Remove Responsive

Is it possible to remove the responsive aspect of the theme like we could in the last version via the config file? I have a client that wants it to be a fixed sized site and doesn’t want the mobile touch menu.

Any help would be appreciated. I really don’t want to have to go through the entire bootstrap.css and cut out the @media css.


You need to remove the viewport <meta> tag from your head.php file and add this to your css:


(I was just pasting in the same link with a short description as it relates to Roots so this might not be entirely a duplicate post. )

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' );?>

    <nav role="navigation">
        if (has_nav_menu('primary_navigation')) :
          wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' => 'nav navbar-nav'));

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

hi, i downloaded the new version of roots, however due to some client requirements i need to make the theme none responsive, can you tell me where i should be going for this?

i originally found this…

function roots_scripts() {
wp_enqueue_style(‘roots_bootstrap’, get_template_directory_uri() . ‘/assets/css/bootstrap.css’, false, null);
// wp_enqueue_style(‘roots_bootstrap_responsive’, get_template_directory_uri() . ‘/assets/css/bootstrap-responsive.css’, array(‘roots_bootstrap’), null);
wp_enqueue_style(‘roots_app’, get_template_directory_uri() . ‘/assets/css/app.css’, false, null);


(comment out the responsive script)

However i believe this has changed in the new version?

This has changed because Bootstrap 3 was developed to be mobile first. If you head over to the Bootstrap docs there’s a section (including an example) on how to remove responsiveness from Bootstrap.

If you apply the same changes to the Roots markup and LESS, you should be good to go. It might be worth starting your own fork on Github as I’m sure there are others who would be interested.

You should go here and there is “Responsive utilities” uncheck that options, then download bootstrap.css and replace with /assets/css/bootstrap.css.
That’s all. I did it yesterday and works.

yes i tried that psmarcin, but im still getting span elements resizing ect. did you change the bootstrap-responsive at all?