Many users don't recognize that the bottom menu is scrollable

[fofwisdom]

What if we improved the bottom menu on mobile in this way?

• https://social.silicon.moe/@perillamint/110291024326379366
  
  Thanks as always for sharing good design with everyone.

[perillamint]

Here is my patch with some flaw: Does not work well while handling logged out user

diff --git a/style.css b/style.css
index 3c567db..93df30a 100644
--- a/style.css
+++ b/style.css
@@ -2947,7 +2947,7 @@ body.embed .button.logo-button:hover,
   /* Make the column link 1/4 of width of the screen */
   .layout-single-column .navigation-panel .navigation-panel__legal,
   .layout-single-column .navigation-panel .column-link {
-    flex: 0 0 calc(100vw / 4);
+    flex: 0 0 calc(100vw / 4.5);
     padding: 0;
   }

[ronilaukkarinen]

I really like they're equal. I understand the scrollability is not obvious, but there's really not much options here. Have to think about this further. For the time being you can always edit your own CSS.

[Roboron3042]

Just want to comment that when presented with this issue I also reached the same conclusion as fofwisdom.

[ronilaukkarinen]

Hmm, actually kinda good idea from @mstdn:

Maybe stick with 3/4 buttons and a "more" or something like that? thought_balloon

It could be possible to hide the rest of the links behind three dots or similar "more" icon, and open a context menu where the rest of them will be after clicking that last icon. This way no horizontal scroll would be needed.

It needs a tremendous amount of styles under :focus and :hover selectors for this to work. I'll think about it when I have more time.

[itbeard]

On our server (VKL.world) we changed ordering and set 6 icons in the row:

Code:

@media screen and (max-width: 889px) {
.layout-single-column .navigation-panel .navigation-panel__legal, .layout-single-column .navigation-panel .column-link {
  flex: 0 0 calc(100vw / 6);
  padding: 0;
}}

@media screen and (max-width: 889px) {
.layout-single-column .navigation-panel .column-link:nth-child(2) {
  order: 1;
}}

@media screen and (max-width: 889px){
.layout-single-column .navigation-panel .column-link:nth-child(5) {
  order: 2;
}}

@media screen and (max-width: 889px) {
.layout-single-column .navigation-panel .column-link:nth-child(6) {
  order: 3;
}}

@media screen and (max-width: 889px) {
.layout-single-column .navigation-panel .column-link:nth-child(4) {
  order: 4;
}}

@media screen and (max-width: 889px) {
.layout-single-column .navigation-panel .column-link:nth-child(3) {
  order: 5;
}}

@media screen and (max-width: 889px){
.layout-single-column .navigation-panel .column-link:nth-child(7) {
  order: 6;
}}

@media screen and (max-width: 889px) {
.layout-single-column .navigation-panel .column-link:nth-child(8) {
  order: 7;
}}

@media screen and (max-width: 889px) {
.layout-single-column .navigation-panel .column-link:nth-child(9) {
  order: 8;
}}

@media screen and (max-width: 889px){
.layout-single-column .navigation-panel .column-link:nth-child(10) {
  order: 9;
}}

[ronilaukkarinen]

For big thumbers and smaller phone models that's too much. But feel free to modify! 👍

[derLaokrat]

How about a simple scroll indicator like this? with a tiny glow around the purple part?

[ronilaukkarinen]

Hmm. For me personally that is a bit of a distraction. Also not aesthetically pleasing to have it always there. Especially on mobile hate scrollbars, they are not often needed (you can't drag them) and taking visually too much space.

I have kinda come to a conclusion that it's not the end of the world if some don't realize its swiping abilities. We can't fit all of them there anyway.

In fact for these reasons I'm going to close this for now. I hope you understand.

[wandy-dev]

I was going to open a separate issue, but I figured this was the most relevant. Perhaps options for selecting which icons are up front can be helpful for some. I don't really mind if my users scroll, but I have a small instance with no relays so the the explore tab is empty. I'd love to move Home, Live feeds, Private mentions, and Preferences to the front.

Once this is done that'll cover most of my users needs and I can just let people know they can scroll the tabs bar for my "super users"

[ronilaukkarinen]

Perhaps options for selecting which icons are up front can be helpful for some.

You can edit the order in the CSS code to your likings. No options can be done with styles as this is not an app or any core modification and not in any way related to functional code.

[wandy-dev]

As a back end developer, do you think you can point me in the right direction for this? I'm not sure how straight forward, or complicated this might be.

Ah sorry I think I just found it.

[Shanesan]

I made the following tweak (you can add this to the very top of the CSS to try it out). I don't propose this to be the fix, but it definitely helps tell someone that there is more, subtly.

/* nav bar */
.layout-single-column .columns-area__panels__pane--navigational .navigation-panel {
	background: linear-gradient(90deg, #08171e00, #08171e00, #08171e00, #08171e00, #08171e00, #08171e00, #08171e00, #1e3b51) repeat fixed top left;
}