Photo Gallery Forums

Hello,
 
Today I realized a CSS related issue on my site I'd like to fix:

When I reduce the size of the screen on my desktop (via Chrome) and therefore simulate smaller devices, I can see a dark (black) bar on the left side of the sidemenu panel (see screenshot small.jpg).

If I increase the size of my browser window again, at 1040 pixel width this bar is gone and does not came back If I increase the size further (see screenshot large.jpg).
 
My questions are:
 
1. What is the concept behind this black bar on smaller screens and why is it not visible on larger screens?
2. As I like this bar: How can I enable this bar on all resolutions?
 
EDIT: Unfortunately I cannot upload files, this will result in a warning.

Thanks, 
Thomas

I guess we have discussed some of this by email earlier? I can confirm there is a problem with uploads after updating the forum to latest PHPBB3 version. I will look into it. In the meantime, you could use a service like https://imgbb.com/.

tbp wrote:When I reduce the size of the screen on my desktop (via Chrome) and therefore simulate smaller devices, I can see a dark (black) bar on the left side of the sidemenu panel (see screenshot small.jpg).

First of all, I assume you mean the RIGHT side of the sidemenu panel? Scrollbar areas will appear naturally, but only on the RIGHT side.

Just to be clear, there are TWO scrollbars which may exist when using the sidebar. One is the standard body scroll for the page, and the other is for the sidebar, because it has to use it's own scroll overflow element of course. Therefore, depending on browser and scroll settings, you may get TWO scrollbars on the right side of screen.

Also, although you may see this when you "shrink" screen to "mobile size", it should be clear that no physical scrollbars will ever actually appear on mobile. Or Mac for that sake.

tbp wrote:1. What is the concept behind this black bar on smaller screens and why is it not visible on larger screens?

Unless you mean something else, this is the scrollbar area created by browser, and nothing X3 adds. I need to know exactly what you mean to give a better explanation.

tbp wrote:2. As I like this bar: How can I enable this bar on all resolutions?

This is an empty scrollbar area, not created by X3. If you like the effect, it would require creating a custom CSS rule to simply increase some margins.

EDIT: I tried your website in Google Chrome on Windows 10, and I can see what you are talking about. That is the SCROLLBAR for the sidebar. It appears when the sidebar menu HEIGHT is larger than the screen height (scrolling required). If menu is collapsed, and menu height is smaller than screen height, it will disappear. The scrollbar is styled THIN for simplicity ... Else, you would end up with TWO fat OS-scrollbars beside each other. Another reason it's styled "thin", is because most users will never try to actual click and drag the scrollbar ... thus it remains a visual indicator. X3 does not however attempt to style the main body-scrollbar, because this should remain same style as they are used to. Styled scrollbars will depend on the browser.

I see this thin (10px) scrollbar in both small and large mode. But only when menu overflows screen height of course.

On Mac, scrollbars won't normally appear at all (only overlay on demand). I can toggle a setting to force scrollbars to always be present, and since scrollbars in Mac can NOT be styled, it would look like below.


In the case the menu overflows, it would create TWO scrollbars (without styling). Not nice as you can see:


At least you can see the concept of scrollbars in the above.

Hi Karl,

Oh, you got me totally wrong. 

It's not about scrollbars - we already discussed this via mail. It's about the black bar on the left of the navigation panel - see screenshots here:

https://ibb.co/cw4fK3M
https://ibb.co/r5ntTGN

I found the following CSS that makes the bar appear on larger screens as well: .sb-style-overlay { box-shadow:0px 0px 5px #000000; }
But I'm not sure whether this code is correct.

Thanks,
Thomas

Indeed I misunderstood!

The difference between the opening mechanism on mobile vs desktop can be explained: #1 On large screens, the slidemenu will OVERLAY the  page. This is practical because the screen is large enough to display the menu AND the page at the same time. The menu doesn't even have to close after clicking a menu item, because visitor may wish to immediately navigate to another page, and they can still see the content of the loaded page anyway.

#2 On small screens, when the menu is open, it will PUSH the page content to the left, "revealing" the menu. This is more intuitive on small screens, because there is not enough room to display both the page and menu at the same time ... Also, when a menu item is clicked, the menu will need to close, so that the loaded page can be viewed without the visitor having to manually close the menu.

The mobile "push" reveal effect gives a sense that the menu is under the page content, while the desktop "overlay" effect gives a sense that the menu is over the page content. Therefore, there is also a difference in the shadow effect.

You can go to Settings > Style > Layout and select "Push" slide style, which will also apply for desktop screens. Keep in mind, this effect is slightly disorientating for large screens, since it pushes the entire page, somewhat unnecessarily.