Small device issues

Shapely
1

Hi!

I got two issues with the Shapely theme.

  1. The hamburger menu doesn’t work as it should on a small screen on a device with touch. I’ve tested this with the demo site for the theme (https://colorlib.com/shapely/). You can’t replicate the problem from a desktop device.

What happens is that if the menu has too many menu options, you cannot scroll down to see them all. The demo page does not have that many menu options, but if you turn your mobile device on its side (landscape, which makes the height much less) you can replicate this yourself. The menu seems to be fixed in place, and therefore you scroll the background instead of inside the menu. Do you have a fix for this?

  1. I’d like to change the “Parallax section for frontpage”-image to a background colour when browsing from a mobile device as it does not fully work on all mobile devices (on iPhone 4 the scroll goes on forever before you see any content because of the cover background image). I tried this on your demo page as well and had the same problem. I have no issues when using my Nexus 5X, but the iPhone 4 can not cope with the full background image.

It is very hard to take screenshots of either of these things as they require user interaction to appear. I have plenty of html and css knowledge and am very used to media queries for different screen sizes. Any help in these matters would be highly appreciated. Thanks!

2

Hi @amandau,

I hope you are well today and thank you for your questions.

1) The hamburger menu doesn’t work as it should on a small screen on a device with touch. I’ve tested this with the demo site for the theme (https://colorlib.com/shapely/). You can’t replicate the problem from a desktop device.

What happens is that if the menu has too many menu options, you cannot scroll down to see them all. The demo page does not have that many menu options, but if you turn your mobile device on its side (landscape, which makes the height much less) you can replicate this yourself. The menu seems to be fixed in place, and therefore you scroll the background instead of inside the menu. Do you have a fix for this?

You can try resolving this issue by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other

@media (max-width: 991px){
nav#site-navigation.fixed.scrolled {
    position: absolute;
}
}
2) I’d like to change the “Parallax section for frontpage”-image to a background colour when browsing from a mobile device as it does not fully work on all mobile devices (on iPhone 4 the scroll goes on forever before you see any content because of the cover background image). I tried this on your demo page as well and had the same problem. I have no issues when using my Nexus 5X, but the iPhone 4 can not cope with the full background image.

You can use the following CSS code to apply background colour to Parallax section.

.shapely_home_parallax {
    background: #bba9a9;
}

Please change the color value in the above code to whatever you want to use by referring the following pages.

http://www.w3schools.com/html/html_colorvalues.asp
http://www.w3schools.com/tags/ref_colorpicker.asp

Best Regards,
Movin

3

Thanks for your response,

  1. If I set the menu as “position: absolute” it will not be fixed to the top as it’s meant to. Is there a better fix within the theme that is planned for the future?

  2. Using .shapely_home_parallax {background: #bba9a9;} does not get rid of the image, it just puts a colour on top of it - so the problem with the long scroll stays. Also, when viewing from a mobile device I still get the image shown instead of the background colour. I only see the background colour when resizing the browser on a desktop computer. Is there a way to change the background image using CSS, or do you have any other suggestions?

Thanks a lot.

4
1) If I set the menu as “position: absolute” it will not be fixed to the top as it’s meant to. Is there a better fix within the theme that is planned for the future?

If it is fixed then you can’t scroll it.

You can try using following plugin to make it work other way.

2) Using .shapely_home_parallax {background: #bba9a9;} does not get rid of the image, it just puts a colour on top of it – so the problem with the long scroll stays. Also, when viewing from a mobile device I still get the image shown instead of the background colour. I only see the background colour when resizing the browser on a desktop computer. Is there a way to change the background image using CSS, or do you have any other suggestions?

The background image is manipulated by javascript so we can’t remove it from CSS so we have to apply background color on it.

If the background color is not working on your site then could you please share me your site URL where it’s happening so that i can troubleshoot it?

5
If it is fixed then you can’t scroll it.

Exactly - and this is a fault in your theme. Are you planning on creating a solution for future updates of the theme?

The background colour works on a browser, but not while using an actual mobile device such as my iPhone 4 and Nexus 5X. But if we cannot get rid of the image all together it doesn’t really make any difference. It is the long scroll on the iPhone 4 that I’m trying to get rid of.

6
Exactly – and this is a fault in your theme. Are you planning on creating a solution for future updates of the theme?

I have reported this issue to the theme developer on the following page so that it will be fixed in the future version of theme.

The background colour works on a browser, but not while using an actual mobile device such as my iPhone 4 and Nexus 5X. But if we cannot get rid of the image all together it doesn’t really make any difference. It is the long scroll on the iPhone 4 that I’m trying to get rid of.

Could you please share me your site URL where it’s happening so that i can troubleshoot it?