No sidebars on mobile version

Note I am running the latest version of WordPress that appears within WordPress’s own Add New facility – I have not downloaded from the official website as this issue gave me various ‘illegal string offset’ issues so I reverted back, while using Being Hueman to make changes.

Hi markmck. The default theme functionality is:
At 1159px the secondary sidebar collapses to a green << icon.
At 959px the primary sidebar collapses to a purple >> icon.
At 479px the primary and secondary sidebars are expanded below the content area.

So your primary sidebar is in the right place. The secondary sidebar is below that but, for some reason, it’s hidden. I’ll have to poke around a bit to see if I can figure out why.

Hey thanks for your reply!

I knew both would have collapsed but was expecting to see the coloured button on both left and right that I could tap to expand the sidebars.

Appreciate that, thankyou.

Check Theme Options > General > Mobile Sidebar Content. Is “Hide secondary sidebar” selected? If so, select “Show sidebars” and the secondary sidebar should show up below the primary sidebar under the content.

Hi bd,

This did indeed show the bars underneath, however is there no way of having them appear collapsed on both sides? On the iPad version i see the arrows on left and right and can tap to expand these. Does that option not exist for phone versions

Many thanks

The default theme configuration does not have that option for phone screens. However, with a little work, you can implement it:

1. Copy responsive.css from the parent theme to your child theme.

2. Find this section:

/* ------------------------------------------------------------------------- *
 *  Toggle Sidebar s2 : 1200px > 480px
/* ------------------------------------------------------------------------- */
@media only screen and (min-width: 480px) and (max-width: 1200px) {

3. Change the @media line to this:

@media only screen and (min-width: 0px) and (max-width: 1200px) {

4. Find this section:

/* ------------------------------------------------------------------------- *
 *  Toggle Sidebar s1 : 960px > 480px
/* ------------------------------------------------------------------------- */
@media only screen and (min-width: 480px) and (max-width: 960px) {

5. Change the @media line to this:

@media only screen and (min-width: 0px) and (max-width: 960px) {

6. Find this section near the bottom:

/* ------------------------------------------------------------------------- *
 *  Mobile (Low Res) : 479px > 0 (320px)
/* ------------------------------------------------------------------------- */
@media only screen and (max-width: 479px) {

7. Delete the entire section.

8. Add this function to your child theme functions.php file:

/* load responsive.css from child theme */
function alx_styles() {
	wp_enqueue_style( 'style', get_stylesheet_uri() );
	if ( ot_get_option('responsive') != 'off' ) { wp_enqueue_style( 'responsive', get_stylesheet_directory_uri().'/responsive.css' ); }
	wp_enqueue_style( 'font-awesome', get_template_directory_uri().'/fonts/font-awesome.min.css' );
}

The downside to this is, if the default theme responsive.css file ever changes, you’ll need to copy the new version to your child theme and make the same changes again.

Hey thanks for this.

It all worked up until that final amendment to the functions.php which then locked me out of the site so had to go in to the back end and remove it. It referred to an issue with line 12. I’m assuming I need this final bit though because the previous changes didn’t actually change anything visibly on my phone.

Thankyou

Please post your entire child theme functions.php file on Pastebin so I can take a look at it. Thanks.

It’s literally empty dude, it only has the comments section bit with /* and */ and nothing else. Once I pasted in your code that’s when it kicked me out and so I had to then delete it. It’s basically empty/default.

Odd. I have that code running on a test site. How about this; add the code I posts to your functions.php file, copy the entire file contents and post it here (use the code tags to keep it out of the spam filter) and then you can delete the function so your site still works.

<?php
/* ------------------------------------------------------------------------- *
 *  Custom functions
/* ------------------------------------------------------------------------- */

	// Add your custom functions here, or overwrite existing ones. Read more how to use:
	// https://codex.www.ads-software.com/Child_Themes

/* load responsive.css from child theme */
function alx_styles() {
	wp_enqueue_style( 'style', get_stylesheet_uri() );
	if ( ot_get_option('responsive') != 'off' ) { wp_enqueue_style( 'responsive', get_stylesheet_directory_uri().'/responsive.css' ); }
	wp_enqueue_style( 'font-awesome', get_template_directory_uri().'/fonts/font-awesome.min.css' );
}

One thing I should check is your step 6 and 7 from earlier. When you say to delete the section, do you mean just those 2 lines or the entire block relating to that, because I deleted the whole thing!

Thanks again.

I just pasted your functions.php into my test site and it works without any problems. Step 7: yes, delete the entire section.

Dude it works now…. I have absolutely no explanation because nothing has changed. I must apologise but thanks so much for your help!!

No apology needed. Glad it’s working. If you don’t need any further assistance here please mark the topic as Resolved. Thanks.

Great thankyou!