Making Mobile Dashboard a dropdown list


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
    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, But they cannot be seen from the navigation. Especially from the Dashboard which drops the custom navigation.

  • 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;
     display: inline !important;

    This gives this result:


  • GamingMegaverse
    Posts: 3,001

    Glad you found help!

    Just trying to help out.

  • twiggyleaf
    Posts: 2,014


    "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
    Posts: 422

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

    /* 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.

    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.

May 2024
The World of Elurah

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!