Remove the responsive code from the Twenty Tewlve Theme

You may want a different theme. Twenty Twelve was built to work on mobile phones first before desktops. This means you can’t simply remove media queries from the CSS because website’s layout will disappear. You have to create your own desktop-only CSS rules, for a lot of elements.

so there is no way to do this

No, there is a way. You have to create your own desktop-only CSS rules for a lot of elements.

I just did this yesterday. It’s very tricky. You have to remove the media queries section in the CSS, edit the header.php and functions file. There’s also a navigation.php file that needs to be left out when the theme loads. I now have it non-responsive though so it is doable.

could you please tell me what you did to the funtions file header.php and how can i leave out the navigation.php

Removing the navigation.js file is done in functions, look for:

/*
* Adds JavaScript for handling the navigation menu hide-and-show behavior.
*/
wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );

Either remove this or comment it out. This stops the mobile nav kicking in when on mobile device.

Header.php:
I removed the mobile meta tag:

<meta name="viewport" content="width=device-width" />

I also removed the mobile code where the html for the menu was, leaving just this:

<nav  class="main-navigation" role="navigation">
	<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->

CSS was all that remained, so near the end where the media queries are, you want to change it to always show the full size:

@media screen and (min-width: 10px) {

.site {
margin: 0 auto;
width: 980px !important;
overflow: hidden;
}

There may be a few more minor edits, but I think that’s most. Worth a try and see how it is after you’ve done those, but my TwentyTwelve now is non-responsive and looks on mobile the same as desktop.

Hope this helps.

Phil

ok thnx a lot ill try it out

Make modifications in a Child Theme environment.

@phil: Please do not encourage people to edit the Twenty Twelve theme directly. It is the default WordPress theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. All customisations should be made via a create a child theme or a custom CSS plugin.

only problem is the nav went away after the code change ?

<nav  class="main-navigation" role="navigation">
	<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->

[Moderator Note: Please post code or markup snippets between backticks or use the code button. As it stands, your posted code may now have been permanently damaged/corrupted by the forum’s parser.]

Of course child themes are best practice – as well as making backups of everything should things go wrong – as they often do.

and esmi i made a copy of the twenty twelve theme so im not editing it directly.

@john

try adding this to bottom of CSS:

.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
display: inline-block !important;
}

If I remember, it adds display ‘none’ so you need to overwrite.

yea it shows but the old css isnt working for it. and can some one tell me why the sidebar isnt displaying right now.
https://tshirthideout.com

i mean the sidebar is broke on this page
https://tshirthideout.com/hello-world/