Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 18, 2019 at 1:49 pm #1055450
    shhattori

    Hello
    I want to put a sidebar on top of a page on mobile screen.
    The sidebar is put on bottom of the page automatically.

    I checked a past post below and tried same, but it doesn’t work.

    Move widget on shopping page to top for mobile

    This is URL.
    https://sindb.com/online_shop

    Will you tell me how to do that?

    Thank you
    Shoko

    January 18, 2019 at 2:52 pm #1055465
    Guenni007

    if you only want that for mobile do this to functions.php of your child-theme
    if you like to have it for small screens you have to work with a different if clause ( if ($(window).width() < 768) {

    function change_position(){
if(wp_is_mobile()){
?>
<script>
(function($){
	$('aside').insertBefore('main.content');
})(jQuery);
</script>
<?php
}
}
add_action('wp_footer', 'change_position');

    PS: to work with the flex-box model is also a good idea.

    • This reply was modified 6 years, 11 months ago by Guenni007.
    January 18, 2019 at 2:56 pm #1055467
    Guenni007

    this is better – and comes to quick css:

    @media only screen and (max-width:767px) {
  .responsive #top.woocommerce-page #main .sidebar {
    display: block;
    border-color: transparent;
  }

  .responsive #top.woocommerce-page #main .sidebar .inner_sidebar {
    margin-left: 0;
  }

  .responsive #top.woocommerce-page #wrap_all .container_wrap_first .container {
    display: flex;
    flex-direction: column-reverse;
  }
}
    January 18, 2019 at 5:47 pm #1055543
    shhattori

    Hello Guenni007

    Thank you for your great help!
    It works properly!

    Thank you again.
    Shoko

    January 19, 2019 at 5:50 pm #1055915
    Guenni007

    Thanks too for the positive feedback

    January 20, 2019 at 6:30 am #1056040
    Rikard

    Hi Shoko,

    Great, glad you got it working and thanks to @guenni007 for helping out :-)

    Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    January 20, 2019 at 8:36 am #1056073
    shhattori

    Hi Rikard

    Please close this topic.
    Thank you
    Shoko

    January 21, 2019 at 3:13 am #1056391
    Jordan Shannon

    Hi,

    If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Enfold: how to put a sidebar on top of a page on mobile screen.’ is closed to new replies.