The Nexus theme from WPAdaptive is an excellent choice for a WordPress theme that needs to have a responsive layout. It is a very professional look and feel with tons of shortcodes and layout options. It will also automatically apply different styling to your pages depending on the device used to view them, but sometimes you don’t want a responsive web design. The problem with the Nexus theme is that it doesn’t have a “turn off responsive layout” type option, so you have to get your hands dirty to accomplish it. You will most likely need a tiny bit of css/html experience to do this, but don’t fear, it’s not very hard.
I will outline the steps I went through in order to keep the Nexus layout the same on all devices:
*Warning, it is always a good idea to fully backup your WP database, and theme files before modifying anything. If you follow the steps below, your theme will no longer be responsive and will render the same on all devices.
- Find the 960.css file that is located in wp-content/themes/nexus/css/960/960.css. Search for the text “/*+++++++++++++++++ TABLET++++++++++++++++++*/” and remove that line up until the end of the file. These are all the @media rules that determine different classes for different devices.
- Find the wp-content/themes/nexus//responsive.css file and remove everything in the file.
- Find the class.frontend.php file located at wp-content/themes/nexus/prime/classes/class.frontend.php and remove lines 614 through 644. Starting at ” @media only screen and (-webkit-min-device-pixel-ratio: 1.5) {” and ending right before the </style> tag.
- Under the “Menus” menu, switch all menus to “header-desktop” (Picture below)
With those changes in place, your theme should render in “desktop” mode, no matter what the device is. An easy way to test this is by using the Web Developer add on for FireFox. Once this is installed you can “View Reponsive Layouts” to view how your page renders on different devices. (Picture below)
I might have missed something with modifying the header.php file, specifically to make sure only the desktop logo is rendered. I believe you need to change that as well. If you run into any issues, just send me a comment and I will do my best to help you out.
Good luck!
Hi my friend, How are you?
I’m writing to you first to say you thank you for this manual.
And 2nd, because I did this steps but the responsive layaout doesn’t changes.
I don’t know what is happening, But I can’t see any change.
The web site is: roferca.8149.net
Could you please help me?
Thanks in advance,
Hi Christian,
I believe I may have missed a step, so going to have you try something. If everything works ok I will make an edit.
* First backup this file: http://roferca.8149.net/wp-content/themes/nexus//responsive.css
Then try removing everything within that file, so it’s just a blank css file, and save it. Once that is done try refreshing the page. I believe that file also has to be commented out and I forgot to add that.
Let me know how that goes and I can assist you from there. Just be sure to backup that css in case something goes wrong.
Let me know!
Hi Brent,
How are you?
I’m very thankful for your help.
I did the changes and Now is working.
Thank you so much my friend.
Christian S.
Glad it worked! Let me go back and edit that :)
I am using a child theme, so naturally, I applied your modifications by maintaining the same folder structure and file location – but with the child theme… and it appears that no changes stuck. Do child themes not support certain files being mimicked like that or how would I perform these steps successfully using a child-theme?