Support » Theme: Fukasawa » No sidebar on mobile theme?

  • Lovely theme! It unfortunately doesn’t work well on mobile devices. It doesn’t show the sidebar widgets and I can’t find options to activate them.

    Also, the menu button covers the logo.
    Any way to resolve these issues?

    Thanks in advance!

Viewing 15 replies - 1 through 15 (of 15 total)
  • Hey there,

    Can you please post a link to your site? Thanks!

    Thread Starter mannextdoor

    (@mannextdoor)

    Hi Suyogya!

    Yes, the site is http://www.whentostoptime.com.

    Thanks in advance for your help.

    Hey @mannextdoor,

    I took a look at this on my own testing environment, I think I found a solution.

    The issue is that when you reduce the size of the viewport below 1001px, the theme changes the “widgets” div to display: none;. So when you enter into mobile mode the widgets area disappears.

    An easy way to fix this would be to add the following code to the bottom of your index.php page, just before the closing div tag for the “contents” div:

    
    <div class="widgets-wrapper"> 
     	<?php dynamic_sidebar('sidebar'); ?>
    </div>
    

    Here we add a div with the class widgets-wrapper which we will use to add in our own css media queries. The php therein will pull in the sidebar that contains your widgets, in this instance, the sidebar is named simply ‘sidebar’.

    In your stylesheet add the following code:

    
    .widgets-wrapper{
    	display: none;
    }
    @media ( max-width: 1000px ){
        .widgets-wrapper{
    	display: block;
    	}
    }
    

    What this does is hides our newly created div when the viewport is larger than 1000px, i.e tablets, laptops etc, but on viewports below 1000px it will show the widgets div in the footer of the page. Give it a shot and tell me how it works for you. You will need to tweak the css to fit your desired look, but the functionality is there.

    As for the menu button covering the logo, I am unable to reproduce that error on my end. Do you have a screenshot? I am guessing your logo is too large and slides underneath the menu on mobile screens.

    Hope this helps!

    Okay, just saw your site.

    Add this to your stylesheet to fix the logo:

    .blog-logo img {
        display: block;
        width: 85%;
    }

    This will resize your logo to scale with the viewport, seems to work fine for me. Adjust the percentage as needed, though anything over 90% can lead to that problem on super small screens.

    Thread Starter mannextdoor

    (@mannextdoor)

    Hi jjchrisdiehl !

    How awesome of you to respond so quick and extensive! The logo issue is solved, but unfortunately I didn’t manage to get the widgets/sidebar to appear on the mobile phone. I reverted back to the stylesheet and index.php of how it was, with only the addition of the blog-logo change that’s working.
    Perhaps you could have a look at the files? To tell me exactly where to edit? I have a link to them in Dropbox.
    The stylesheet.
    The Index.php.
    If you manage to solve it for me, I’d send you a few bucks for a drink, if you give me your PayPal address 😛

    Thanks again!
    Dennis

    Hey Dennis,

    You need to add the div block:

    <div class="widgets-wrapper"> 
     	<?php dynamic_sidebar('sidebar'); ?>
    </div>

    Before the closing content did like so:

    </div> <!-- /archive-nav -->
    						
    	<?php endif; ?>
    <div class="widgets-wrapper"> 
     	<?php dynamic_sidebar('sidebar'); ?>
    </div>		
    </div> <!-- /content -->
    Thread Starter mannextdoor

    (@mannextdoor)

    Thanks again jjchrisdiehl,

    I did as you said, but still with no luck.
    These are now my updated index.php, and style.css .

    I think I’ve added the div block in the index.php ok, but perhaps something is up with the css code?
    I entered it under the segment “widget content”. Should it be there, or does it not matter?

    Another issue I now see, since I adjusted the logo scaling. Seems now that on fullscreen size, on the pc, the logo is also smaller? Hm..

    Thanks again!

    • This reply was modified 7 years, 4 months ago by mannextdoor.

    Can you check that your stylesheet is correctly enqueued? Onto chrome inspector and search for the stylesheet then open the link to view the styles. Search for the code that we added and make sure it is there. The stylrsheet you sent me looks correct, so does the index.php.

    As for the logo, the code is essentially rending the image at 85% of the containing element. You may need to add in media queries and adjust that percentage based on the size of the viewport.

    I just noticed you aren’t using the default front page that lists your posts. The page you’re using may be page.php, try dropping the div code into page.php in a similar fashion. I’ll look into this a bit more when I get home.

    Thread Starter mannextdoor

    (@mannextdoor)

    Adding the code to the page.php worked! Almost perfect! The only thing is that the searchbar is now directly touching the end of the page, but that’s not really an issue.

    Only thing left now is, adding in media queries to adjust the rendering percentage for bigger viewpoints. If you’d have any idea how to fix that, I’d really make an ever bigger jump of joy 😛

    Thread Starter mannextdoor

    (@mannextdoor)

    Little update, I changed my temporary logo a bit, so that there’s more white space on top. It solved the issue with the menu overlay for now, so I think I’m pretty much all ok now. Except that there could be a little space between the search bar and the widgets, but that’s just detail.

    I’m very happy so far, and I’d be glad to get you a drink!

    Hey Dennis,

    Sorry for the wait! I found a solution. We will add Bootstrap to your project and then wrap the new widgets with Bootstrap columns to provide proper adjustments.

    First we need to enqueue Bootstrap in your functions.php:

    // Register and enqueue styles
    function fukasawa_load_style() {
    	if ( !is_admin() ) {
    		wp_enqueue_style( 'bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
    	    wp_enqueue_style( 'fukasawa_googleFonts', '//fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic' );
    	    wp_enqueue_style( 'fukasawa_genericons', get_stylesheet_directory_uri() . '/genericons/genericons.css' );
    	    wp_enqueue_style( 'fukasawa_style', get_stylesheet_uri() );
    	}
    }

    Your code should look something like this, just search for the section titled “Register and enqueue styles” and add in the line:;
    wp_enqueue_style( 'bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );

    Inspect your website in Chrome inspector and search for ‘bootstrap’ to make sure the CDN for Bootstrap enqueued correctly, you should see it as a stylesheet link.

    Next we need to wrap the .widgets-wrapper div in Bootstrap tags like so:

    <div class="container">
    	<div class="row">
    		<div class="widgets-wrapper">
    			<?php dynamic_sidebar('sidebar'); ?>
    		</div>
    	</div>
    </div>

    Just before the closing </div> <!-- /content --> on your page.php file.

    Lastly, we will add a bit of jQuery to dynamically add the col-xs-12 col-sm-3 classes to your widgets when WordPress spits them out. This jQuery should only target your .widget classes that are beneath our .widgets-wrapper div.

    Add this to global.js:

    $(window).load(function() {
            var viewportWidth = $(window).width();
            if (viewportWidth < 1000) {
    	        $(".widgets-wrapper .widget").addClass("col-xs-12 col-sm-3");
            }
         });

    You must put this before the final }); tag. The global.js page has a function that encompasses the ENTIRE file called:

    jQuery(document).ready(function($) { 
        //All jQuery goes here
    });

    So your jQuery needs to be within this function, since it allows the $ symbol to stand for jQuery.

    If you haven’t even touched the javascript in this project yet then you can copy this code and replace everything in that file if it is easier, or just use this code a reference:

    
    jQuery(document).ready(function($) {
    	
    	
    	//Masonry blocks
    	$blocks = $(".posts");
    
    	$blocks.imagesLoaded(function(){
    		$blocks.masonry({
    			itemSelector: '.post-container'
    		});
    
    		// Fade blocks in after images are ready (prevents jumping and re-rendering)
    		$(".post-container").fadeIn();
    	});
    	
    	$(document).ready( function() { setTimeout( function() { $blocks.masonry(); }, 500); });
    
    	$(window).resize(function () {
    		$blocks.masonry();
    	});
    
    	// Toggle navigation
    	$(".nav-toggle").on("click", function(){	
    		$(this).toggleClass("active");
    		$(".mobile-navigation").slideToggle();
    	});
    	
    	
    	// Hide mobile-menu > 1000
    	$(window).resize(function() {
    		if ($(window).width() > 1000) {
    			$(".nav-toggle").removeClass("active");
    			$(".mobile-navigation").hide();
    		}
    	});
    
        
    	// Load Flexslider
        $(".flexslider").flexslider({
            animation: "slide",
            controlNav: false,
            smoothHeight: true,
            start: $blocks.masonry(),
        });
    
            			
    	// resize videos after container
    	var vidSelector = ".post iframe, .post object, .post video, .widget-content iframe, .widget-content object, .widget-content iframe";	
    	var resizeVideo = function(sSel) {
    		$( sSel ).each(function() {
    			var $video = $(this),
    				$container = $video.parent(),
    				iTargetWidth = $container.width();
    
    			if ( !$video.attr("data-origwidth") ) {
    				$video.attr("data-origwidth", $video.attr("width"));
    				$video.attr("data-origheight", $video.attr("height"));
    			}
    
    			var ratio = iTargetWidth / $video.attr("data-origwidth");
    
    			$video.css("width", iTargetWidth + "px");
    			$video.css("height", ( $video.attr("data-origheight") * ratio ) + "px");
    		});
    	};
    
    	resizeVideo(vidSelector);
    
    	$(window).resize(function() {
    		resizeVideo(vidSelector);
    	});
        
    	
    	// When Jetpack Infinite scroll posts have loaded
    	$( document.body ).on( 'post-load', function () {
    
    		var $container = $('.posts');
    		$container.masonry( 'reloadItems' );
    		
    		$blocks.imagesLoaded(function(){
    			$blocks.masonry({
    				itemSelector: '.post-container'
    			});
    	
    			// Fade blocks in after images are ready (prevents jumping and re-rendering)
    			$(".post-container").fadeIn();
    		});
    		
    		// Rerun video resizing
    		resizeVideo(vidSelector);
    		
    		$container.masonry( 'reloadItems' );
    		
    		// Load Flexslider
    	    $(".flexslider").flexslider({
    	        animation: "slide",
    	        controlNav: false,
    	        prevText: "Previous",
    	        nextText: "Next",
    	        smoothHeight: true   
    	    });
    		
    		$(document).ready( function() { setTimeout( function() { $blocks.masonry(); }, 500); });
    
    	});
    $(window).load(function() {
            var viewportWidth = $(window).width();
            if (viewportWidth < 1000) {
    	        $(".widgets-wrapper .widget").addClass("col-xs-12 col-sm-3");
            }
         });
    
    });
    

    Now, this should add the functionality we want. When you resize the screen below 1001px it will display our widgets at the bottom. The bootstrap columns are set to display the widgets in four columns for displays over 769px and one column with four rows for displays that are smaller, such as phones. Feel free to play around with it.

    Lastly, let’s remove the lines between the widgets and adjust the margins, replace the css styling we did earlier with this updated version:

    .widgets-wrapper{
    	display: none;
    }
    @media ( max-width: 1000px ){
        .widgets-wrapper{
    	display: block;
    	top: 7em;
    	height: 80vh;
    	}
    	.widget{
    		margin: 1.5em 0;
    	}
    	.widgets:before,
    	.widget + .widget:before,
    	.credits:before {
    		content: none;
    	}
    }

    I find this to be a smoother layout, if you like the line spacers you’ll have to find a way to add one to the first widget, because the first widget doesn’t have one by default.

    Hopes this all helps, hit me up if you have any issues.

    And if you desperately want to give me a coffee, feel free to, but there is no obligation.

    Regards!

    One last thing, if you want this functionality on every page you should move that div block to the footer.php just above the </div> <!-- /wrapper --> tags like so:

    <div class="container">
    	<div class="row">
    		<div class="widgets-wrapper">
    
    			<?php dynamic_sidebar('sidebar'); ?>
    		</div>
    	</div>
    </div>
    </div> <!-- /wrapper -->
    
    <?php wp_footer(); ?>
    <div><strong>Current template:</strong> <?php get_current_template( true ); ?></div>
    
    </body>
    </html>

    You can replace your entire footer.php with that code.

    Thread Starter mannextdoor

    (@mannextdoor)

    Thanks so much for all your help Jerome, and sorry for my late reply! I’ve been away a bit the last weeks, and haven’t been able to get back to setting up my site. Later this month I might try your re-coding suggestions, as it seems to require a bit more of studying on that. For now I think I’ll leave it how it is when it comes to the widgets.

    I would like to first solve the logo issue that’s being covered by the sliding menu, on mobile devices.I just made a new (temporary) squared logo for my site, and it looks good in regular browsers. On mobile devices however, the menu button, seems to appear in the middle of the logo.

    It would be nice if there’s a way to let the logo resize a bit for mobile screens, so the menu slider appears on the right of it, instead of in it. Or if it’s difficult to get the logo to resize for mobile screens, perhaps the menu button could appear above the logo?

    I will send you a few bucks for a coffee right now!

    Kind regards,
    Dennis

    Thread Starter mannextdoor

    (@mannextdoor)

    I still hope to get some help with this 🙂 . Thanks in advance! 🙂

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘No sidebar on mobile theme?’ is closed to new replies.