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:

image

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:

image

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.

 

Comments

  • meta5by5
    Posts: 2

    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
    Posts: 10

    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:

    image

  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998

    Glad you found help!

    Just trying to help out.

  • twiggyleaf
    twiggyleaf
    Posts: 2,005

    smiley

    "I met a traveller from an antique land....."

    CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.

    Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign

    Inner Council Member

  • Abersade
    Abersade
    Posts: 417

    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:

    image

    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.

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

Sign In or Register to comment.

March 2024
Wrath of the Highborn

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions