Making Mobile Dashboard a dropdown list

AlfmarchesGM

Hello again! Looking for some help on what to do regarding the mobile dashboard. It's causing a major discrepancy in user experience with our page.

On PC, you have the main page and the navigation list to the side. On our page, it looks like this:

But then, on mobile, when you tap on the menu to expose the navigation, it looks like this, even though it's set up nearly the same in our custom navigation:

Which, let's face it, is not nearly as useful.

Is there a way to make this dropdown agglomeration of icons become a bona fide dropdown list with the labels and everything that is useful?

Thanks in advance.

 

meta5by5

I have the same issue. We don't see the navigation menu with similar options. I have added custom navigation to each page because mobile users cannot find their way around without going back to the home page and drilling down all over again.

I have content grouped into locations, quests, Important NPCs, et.al. But they cannot be seen from the navigation. Especially from the Dashboard which drops the custom navigation.

https://themerchantsnotebook.obsidianportal.com/

AlfmarchesGM

Since there were no helpful replies here, the people on Discord helped me have a better result by adding this snippet to the custom CSS:

​​​​​​​.mobile-nav-top-bar > ul > li > a > .nav-icon{
     display: none;
}
.nav-text{
 display: inline !important;
}

This gives this result:

GamingMegaverse

Glad you found help!

twiggyleaf

Abersade

The following bit of CSS may be useful in this regard:

/* MOBILE NAVIGATION MENU - IMPROVED */
     /* Displays the navigation link text */
          .nav-text {display: inline !important;}
     /* Places all of the navigation options in a vertical list, justifies them mostly to the left, and resizes them slightly smaller */ 
          .mobile-nav-top-bar .custom-navigation .campaign-dashboard-navigation {display: grid; justify-content: left; font-size: 0.85em;}
     /* Aligns all of the navigation options fully to the left */
          .mobile-nav-top-bar ul li a {text-align: left;}
     /* Icon spacing and sizing */
          .custom-navigation ul, ol, dl {line-height: 1;}
          .op-icon-dash::before {padding-right: 8px;}
          .icon-openbook-02::before {padding-right: 8px;}
          .icon-home::before {padding-right: 8px;}
          .op-icon-forum::before {padding-right: 8px;}
          .icon-calendar-empty::before {padding-right: 8px;}
          .op-icon-page::before {padding-right: 8px;}
          .op-icon-image-embed::before {padding-right: 8px;}
          .op-icon-book-wiki::before {padding-right: 8px;}
          .op-icon-characters::before {padding-right: 8px;}
          .op-icon-backpack::before {padding-right: 8px;}
          .op-icon-map::before {padding-right: 8px;}
          .op-icon-gears::before {padding-right: 8px;}

Which comes out looking like this:

To increase the size of each entry in the list you would need to experiment with different values in the following line:

.custom-navigation ul, ol, dl {line-height: 1;}

For me that value (1) resulted in a much nicer looking menu that was still easy to navigate.