WordPress.org

Forums

DevDmBootstrap3
[resolved] Left sidebar is showing on the top of the content in portrait and mobile view (6 posts)

  1. wp-newbee
    Member
    Posted 1 year ago #

    Hello,
    Thank you for the wonderful theme. I really like it. However, I have a little problem. I set my layout using left sidebar and it is showing on the top of the content in portrait and mobile view instead of after. Would you please give me some insight how to fix it. So, when user is in mobile view or iPad portrait see the blog first then see the sidebar.

    Thank you,
    Azi

  2. DevDm
    Member
    Theme Author

    Posted 1 year ago #

    Sure Azi.

    To solve this problem you can use jQuery to "reorder the divs."

    Here is a stackoverflow about how to do it.

    Basically you will write a script that detects the window/screen size and then executes this "reordering."

    Hope this helps.

    http://stackoverflow.com/questions/10088496/jquery-reorder-divs

  3. wp-newbee
    Member
    Posted 1 year ago #

    Hi DevDm,
    Thank you for your respond. I wanted to just reorder the sidebar for iPad and mobile view and I am not savvy enough using jQuery for that matter, but I created a new sidebar to only show after content by calling it from style sheet for @media(max-width: 768px)and that did fix my problem.
    Thank you again for taking your time and get back to me.

    Best,
    Azita

  4. retrokevin
    Member
    Posted 3 months ago #

    I know this was 10 months ago now, but any chance you can share the code you used to get around this or at least point me in the direction? Currently have a left sidebar that i need to fall under content in mobile view. Are you creating two sidebars, and just hiding one and displaying the other at certain widths? thanks!

  5. DevDm
    Member
    Theme Author

    Posted 3 months ago #

    Hey Retrokevin,

    I did some messing around and came up with this. Keep in mind I'm not a JS wizard.

    You'll need to create some files in your child theme (if you don't have them already) to follow along here.

    functions.php
    /js/reorder-sidebars-mobile.js

    In your functions.php you want to enqueue the script

    <?php
    
    /**
     * Proper way to enqueue scripts and styles Child Theme
     */
    
    function devdmbootstrap3_child_theme_scripts() {
        wp_enqueue_script( 'reorder-sidebars-mobile', get_stylesheet_directory_uri() . '/js/reorder-sidebars-mobile.js', array(), '1.0.0', true );
    }
    
    add_action( 'wp_enqueue_scripts', 'devdmbootstrap3_child_theme_scripts' );

    In your reorder-sidebars-mobile.js file you can use this code

    jQuery(document).ready(function( $ ) {
    
        var mobilewidth = "767";
    
        if ($(window).width() < mobilewidth) {
            $('.dmbs-left').insertBefore('.dmbs-right');
        }
    
        $( window ).resize(function() {
            if ($(this).width() < mobilewidth) {
                $('.dmbs-left').insertBefore('.dmbs-right');
            } else {
                $('.dmbs-left').insertBefore('.dmbs-main');
            }
        });
    
    });

    The first function sets the "order" when the window is loaded. Moves the left column on top of the right column if mobilewidth threshold is hit.

    The re-size function will ping every time the window is re-sized. I "think" this is triggered with a screen rotation so we are doubling up to cover all our bases. It will also put the left sidebar back when the threshold is detected as no longer hit.

    Hope this helps!

  6. retrokevin
    Member
    Posted 3 months ago #

    Thanks a ton for this! I'll be trying it tonight. In the mean time i found a simple css trick that seems to be working. Something a long the lines of
    `@media only screen and (max-width: 1023px) {
    .content-sidebar-wrap {display:table;}
    .content {display:table-footer-group; float: none;}
    .sidebar {display:table-header-group; float: none;}
    }`

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic