Widget in sidebar disappear (in responsive) - Support | Kriesi.at

Tagged: mobile, sidebar

Viewing 15 posts - 1 through 15 (of 15 total)

Author

Posts
June 26, 2015 at 10:44 am #464854

HIO2014
Participant

Hello,
I’ve got a problem that I cannot fix and I’d need your help.
I have set a Widget in the left sidebar of this site (link private) and it should be visible also in mobile version…
The sidebar (and its content) disappear in mobile version.

Is there any chance to set it properly?

Thanks in advance!

June 26, 2015 at 1:44 pm #464957

Yigit
Keymaster

Hey Matteo!

Please go to Enfold theme options > Sidebar Settings and check “Sidebar nei Smartphone”

Regards,
Yigit

June 26, 2015 at 2:56 pm #465001

HIO2014
Participant

HI YIGIT,
I already tested that setting before, but it didn’t work.
Feel free to test it using the username and password I gave you!
It’s a bit urgent….

Thanks in advance.

June 26, 2015 at 3:00 pm #465003
Yigit
Keymaster
Hey!

Please add following code to Quick CSS in Enfold theme options under General Styling tab
```
@media only screen and (max-width: 767px) {
.responsive.html_header_sidebar #header .avia-custom-sidebar-widget-area {
  display: block;
}}
```
Best regards,
Yigit
June 26, 2015 at 3:04 pm #465009

HIO2014
Participant

Done!
As you can see the sidebar now is shown, but it appears in the upper side of the site…
Is it possible to move it down, at the end of the page, after the blue picture?

June 29, 2015 at 3:44 pm #465897

HIO2014
Participant

Hi,
I’m still waiting for an answer.
Please could you help me?
Thanks in advance…

June 30, 2015 at 11:16 am #466314

Ismael
Moderator

Hey!

You can try the solution provided here in order to put the sidebar below the content on mobile devices: https://kriesi.at/support/topic/menu-left-sidebar-widget-on-mobile-devices/#post-463852

OR add a widget element below the content as suggested on the previous thread.

Regards,
Ismael

July 1, 2015 at 11:06 pm #467267

therqworld
Participant

Hi Ismael, Yigit!

I’m also trying to do what HIO2014 is describing, but funny thing: I went to “Enfold theme options > Sidebar Settings” and activated the Sidebar on Smartphones and now the sidebar is appearing (YAY!) but not on top but at the bottom (just like HIO2014 wants it)… the thing is that I want the opposite: I want the sidebar to appear on top, not on the bottom of the page, is there any way to make that happen?

I’m using a side bar on my Products page and showing the product categories on it, so that’s why I want to it on top.

Thanks,
rq!

July 3, 2015 at 3:58 pm #468104
Ismael
Moderator
Hi!

You can try this instead:
```
add_action('wp_footer', 'ava_custom_script', 10);
function ava_custom_script(){
?>
<script>
(function($) {
    if($('.responsive.html_mobile_menu_tablet #advanced_menu_hide').css('display') == 'block') {
      $('#top #main .sidebar').insertBefore('.container .av-content-small.units');
    }
}(jQuery));
</script>
<?php
}
```
Cheers!
Ismael
August 14, 2015 at 5:57 am #487549

therqworld
Participant

Hi Ismael…

Sorry for the late reply… I just tried the solution you provided and nothing… the Sidebar with the Product Categories still appears below the products in mobile, you can check it in private link below.

Like I said before, I want the sidebar to appear on top, not on the bottom of the page, I’m using a side bar on my Products page and showing the product categories on it, so that’s why I want to it on top.

Maybe the solution above wasn’t for me but for HIO2014?

Thanks in advance!

August 17, 2015 at 4:53 am #488531

Ismael
Moderator

Hi!

The code should transfer the sidebar above the content on mobile devices. I want to the check the page but there is an internal server error. Please check.

Regards,
Ismael

August 17, 2015 at 5:51 am #488562

therqworld
Participant

Hi Ismael,

Sorry… I moved the site yesterday, that’s why you get the error.

Anyway, the link is http://missionled.com/products/ – you’ll see that in mobile the Product Categories goes to the bottom instead of the top of the page.

Thanks!

August 17, 2015 at 7:15 am #488605
Basilis
Inactive Moderator
Hi!

Here is an EXAMPLE code, that you can use for your web site, to order the elements position.

Please do adjust based on enfold CSS elemets
```
@media only screen
and (max-width : 320px) {
#content-sidebar-wrap{ display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    /* optional */
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;}
#sidebar{    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;}
#content {     -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;}
}
```
Best regards,
Basilis
September 23, 2015 at 10:15 pm #508088
therqworld
Participant
Thanks for the help Basilis!

Some elements react different when adapting the CSS to the theme, so just in case anyone wants to do the same, here’s the CSS I created based on the info Basilis provided:
```
@media only screen and (max-width: 767px){
	.responsive #top #wrap_all .container {
	    width: 85%;
	    max-width: 85%;
	    margin: 0 auto;
	    padding-left: 0;
	    padding-right: 0;
	    float: none;
	    display: -webkit-box;
	    display: -moz-box;
	    display: -ms-flexbox;
	    display: -webkit-flex;
	    display: flex;
	    -webkit-box-orient: vertical;
	    -moz-box-orient: vertical;
	    -webkit-flex-direction: column;
	    -ms-flex-direction: column;
	    flex-direction: column;
	    /* optional */
	    -webkit-box-align: start;
	    -moz-box-align: start;
	    -ms-flex-align: start;
	    -webkit-align-items: flex-start;
	    align-items: flex-start;
	}

	.responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin {
	    margin: 0;
	    margin-bottom: 20px;
	    width: 100%;
	    -webkit-box-ordinal-group: 2;
	    -moz-box-ordinal-group: 2;
	    -ms-flex-order: 2;
	    -webkit-order: 2;
	    order: 2;
	}
	.responsive #top #main .sidebar.smartphones_sidebar_active {
	    display: block;
	    text-align: left;
	    border-left: none;
	    border-right: none;
	    border-bottom-style: dashed;
	    border-bottom-width: 1px;
	    border-top: none;
	    width: 100%;
	    clear: both;
	    -webkit-box-ordinal-group: 1;
	    -moz-box-ordinal-group: 1;
	    -ms-flex-order: 1;
	    -webkit-order: 1;
	    order: 1;
	}

	#top .sidebar_left .content {
		padding-left: 0px;
	}

	#top .sidebar .widget:first-child, .content .sidebar .widget:first-child {
	    margin-bottom:-40px;
	}

	.responsive .pagination {
	    margin-bottom: -60px;
	}
}
```
Cheers!
September 23, 2015 at 10:26 pm #508091

Basilis
Inactive Moderator

Hey!

Thanks a lot for the clarification, we do appreciate that a lot!

Best regards,
Basilis
Author

Posts

Viewing 15 posts - 1 through 15 (of 15 total)

The topic ‘Widget in sidebar disappear (in responsive)’ is closed to new replies.