Sidebar menu on top on mobile devices

[goodtimesmag]

Hi swiftideas team,

I have seen that several people asked for the sidebar to be placed on top (before the products) on mobile devices. From a customer point of view it really makes no sense that the product filters are placed under the products.

I think how you did it in the atelier theme is perfect. It is really sad that the neighborhood theme is not mobile optimized regarding the shop look and feel.

Do you have a workaround or a quick solution to bring the sidebar on top on mobile devices?

This my website: http://goodtimesdeals.de/produkt-kategorie/action-cams-zubehoer/

[goodtimesmag]

Hi guys, do you have a solution for my issue?

[Mohammad – SUPPORT]

Hi,
Please open to edit archive-product.php file at /neighborhood/woocommerce.
Find this code and cut it :-

<?php if ($sidebar_config == "left-sidebar") { ?>

		<aside class="sidebar left-sidebar span3">
			<?php dynamic_sidebar($left_sidebar); ?>
		</aside>

		<?php } else if ($sidebar_config == "right-sidebar") { ?>

		<aside class="sidebar right-sidebar span3">
			<?php dynamic_sidebar($right_sidebar); ?>
		</aside>

		<?php } else if ($sidebar_config == "both-sidebars") { ?>

		<aside class="sidebar right-sidebar span3">
			<?php dynamic_sidebar($right_sidebar); ?>
		</aside>

		<?php } ?>

Paste after this code:-
<div class="inner-page-wrap <?php echo $page_wrap_class; ?> clearfix">
Thanks
Mohammad

[goodtimesmag]

Thanks Mohammad!

1) But is there no way to create a similar filter structure like in the atelier? So that you have a “+ Filters” button (see image 1). If not, how complex is it to build this? In my opinion it would have an enormous effect on the usability of the shop.

2) I have seen that the dropdown filters don’t use the full width of sidebar (most of the time they are smaller) and on my iPad they are wider than the sidebar itself (see image 2)? Do you have a code to solve this, so that the dropdown filter has always the same width like the sidebar?

3) At the moment all dropdown filter elements look differently on mobile than on desktop. On desktop they are completely grey, which is fine, but on mobile they have a colour gradient and a white arrow (see image 3). What css can I use to make them look like on the desktop?

4) Where can I change the wording inside the woocommerce layer navigation? The actual wording “Beliebige Brand” sounds strange.

Many thanks for your help in advance!

Attachments:

You must be logged in to view attached files.

[goodtimesmag]

Hi Mohammad, did you have find the solutions for my mentioned issues?

[Mohammad – SUPPORT]

Hi,
1- Its not possible in this theme.

2- Please use this custom css code:-
@media screen and (max-width: 767px) {
.sidebar select{width:100px !important;}
}

3- This is the screen effect.

4- You can change it at Admin -> Appearance -> Widgets -> Layered navigation Widget -> Change the title of it.

[goodtimesmag]

Hi Mohammad,

1) Is it complicate to integrate it manually?

2) The code doesn’t help (see screenshots). The dropdowns are either narrower than the siedebar or wider.

3) But there should be a code to change the color, because now the user can not even see that there is a dropdown arrow.

4) I don’t want to change the widget title. I would like to change the wording inside the dropdown box. At the moment it says i.e. “Beliebige Brand”, but that is weird german. I think it is a php pre-setting.

[Mohammad – SUPPORT]

Hi,
1- Yes, its very complicated.

2- Please remove the last code and try to use this code:-

.sidebar select{
width:100% !important
}

3- Please use this custom css code:-

@media screen and (max-width: 767px) {
.sidebar select:after{
content: '\f107';
font-family: FontAwesome !important;
float: right;
padding-top: 11px;
}
}

4- Use real time find and replace plugin https://wordpress.org/plugins/real-time-find-and-replace/.

Thanks
Mohammad

[goodtimesmag]

1) Ok, thanks for the info. Is it planed to integrate in the theme? It would help many users in my opinion.

2) Now it works.

3) I don’t see any changes when using the code. Is there no way to make the dropdowns look the same on mobile like on desktop?

4) Thanks for the plugin. Now it works.

[goodtimesmag]

Is is also possible to display all dropdown boxes without any border radius?

[goodtimesmag]

I would like that the dropdowns look like the grey button in the price filter. So what can I do to bring them to the same design?

[Mohammad – SUPPORT]

Hi,
My colleague will assist you now.
Thanks
Mohammad

[Kyle – SUPPORT]

Hi

Sorry this thread is a little confusing, please explain your issue. If you have additional questions it’s better that you open a new thread for them to prevent confusion

– Kyle

[goodtimesmag]

Hi Kyle,

I have created a new thread: http://www.swiftideas.com/forums/topic/dropdown-filters-design-issues/

[Mohammad – SUPPORT]

Hi,
Its ok.
Thanks
Mohammad