Home › Discussions › Campaign Portal Building › Custom CSS Discussions › Making Mobile Dashboard a dropdown list - Custom CSS Discussions Discussions on Obsidian Portal Community Forums
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:
.png)
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:
.png)
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.
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
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/
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:
This gives this result:
Glad you found help!
Just trying to help out.
"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
The following bit of CSS may be useful in this regard:
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:
For me that value (1) resulted in a much nicer looking menu that was still easy to navigate.
GM of Stream of Kairos - 2025 Campaign of the Year
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
Need CSS Help? It may be covered here: Abersade's CSS Hub
Sorry for the necromancy, but is there a way to do this that would use one's customised names (e.g. custom CSS like: #dashboard-main-nav .adventure-log a:after {content:"Journals";}) for the Nav icons in mobile, too?
Off the cuff I want to say yes, likely by smashing the two bits of CSS together somehow. I'll look into it further and report back shortly.
GM of Stream of Kairos - 2025 Campaign of the Year
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
Need CSS Help? It may be covered here: Abersade's CSS Hub
Confirmed. First thing to do is to ditch this bit of code for mobile viewing, I'd recommend you start using @media at this point to differentiate between the CSS.
/* Displays the navigation link text */
.nav-text {display: inline !important;}
Next up is to change these statements:
GM of Stream of Kairos - 2025 Campaign of the Year
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
Need CSS Help? It may be covered here: Abersade's CSS Hub
To something like this:
GM of Stream of Kairos - 2025 Campaign of the Year
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
Need CSS Help? It may be covered here: Abersade's CSS Hub
You might want to consider changing the titles of things around (EDIT: Especially since OP really didn't like the names I was trying to use, lol), but that should work for you.
GM of Stream of Kairos - 2025 Campaign of the Year
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
Need CSS Help? It may be covered here: Abersade's CSS Hub
Hilarious! I'll give that a shot and report back. Thanks!
Okay...so this runs into the same problem I was having: it adds the custom name, but it adds it in both desktop, and mobile, and doesn't remove the original names.
So, in Desktop I see both the names I was already adding, and the ones your code has here (I am guessing I can fix this by using only your code, as it appears to add your custom names in both desktop and mobile).
And in Mobile I see the names your code adds, plus the original OP names that I have already removed in Desktop...
Which I think means the only thing I'm still struggling with is removing the default OP names in Mobile, if that makes sense.
GM of Stream of Kairos - 2025 Campaign of the Year
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
Need CSS Help? It may be covered here: Abersade's CSS Hub
Hmm, for me it's not duplicating the text on mobile but I am ending up with missing entries and icons, while on Desktop it's duplicating the words and I'm not missing icons, but I am missing icons in Firefox...
Ah, I wasn't logged in on FF. <Abersade hurt itself in confusion!>
I'll see if I can take a look at this tonight and will report back.
GM of Stream of Kairos - 2025 Campaign of the Year
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
Need CSS Help? It may be covered here: Abersade's CSS Hub
Well, that wasn't as straightforward as I hoped.
Here's a total revamp, ditch all previous code that I mentioned, and use this instead:
/* NAVIGATION MENUS - IMPROVED v2 */
/* Hides Default Text */
.custom-navigation .nav-text {font-size: 0;}
/* Front-end Customizations */
/* Adds Custom Text */
#campaign-nav .dashboard a:after {content:" Overview";}
#campaign-nav .front-page a:after {content:" Home";}
#campaign-nav .forum a:after {content:" Chat";}
#campaign-nav .adventure-log a:after {content:" Adventures";}
#campaign-nav .file-docker a:after {content:" Gallery";}
#campaign-nav .calendar a:after {content:" Calendar";}
#campaign-nav .characters a:after {content:" Characters";}
#campaign-nav .css-help-main-hub a:after {content:" CSS Hub";}
#campaign-nav .items a:after {content:" Magic Items";}
#campaign-nav .maps a:after {content:" Mapses";}
#campaign-nav .wiki a:after {content:" Lore";}
#campaign-nav .secrets a:after {content:" Secretses";}
#campaign-nav .settings a:after {content:" Settingses";}
/* Back-end Customizations */
/* Adds Custom Text */
#dashboard-main-nav .front-page a:after {content:"Home";}
#dashboard-main-nav .forum a:after {content:"Chat";}
#dashboard-main-nav .adventure-log a:after {content:"Adventures";}
#dashboard-main-nav .file-docker a:after {content:"Gallery";}
#dashboard-main-nav .characters a:after {content:"Characters";}
#dashboard-main-nav .items a:after {content:"Magic Items";}
#dashboard-main-nav .wiki a:after {content:"Lore";}
#dashboard-main-nav .calendar a:after {content:"Calendarses";}
#dashboard-main-nav .maps a:after {content:"Mapses";}
#dashboard-main-nav .dashboard a:after {content:"Dashboardses";}
#dashboard-main-nav .secrets a:after {content:"Secretses";}
#dashboard-main-nav .settings a:after {content:"Settingses";}
/* Mobile-Top-Menu Customizations */
/* 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;}
/* Adds Custom Text */
.mobile-nav-top-bar .nav-icon.icon-home::after {content:"Home";}
.mobile-nav-top-bar .nav-icon.op-icon-page::after {content:"Adventures";}
.mobile-nav-top-bar .nav-icon.op-icon-book-wiki::after {content:"Lore";}
.mobile-nav-top-bar .nav-icon.op-icon-characters::after {content:"Characters";}
.mobile-nav-top-bar .nav-icon.op-icon-backpack::after {content:"Magic Items";}
.mobile-nav-top-bar .nav-icon.op-icon-map::after {content:"Mapses";}
.mobile-nav-top-bar .nav-icon.op-icon-dash::after {content:"Dashboardses";}
.mobile-nav-top-bar .nav-icon.icon-openbook-02::after {content:"Secretses";}
.mobile-nav-top-bar .nav-icon.op-icon-forum::after {content:"Chat";}
.mobile-nav-top-bar .nav-icon.icon-calendar-empty::after {content:"Calendarses";}
.mobile-nav-top-bar .nav-icon.op-icon-image-embed::after {content:"Galleryses";}
.mobile-nav-top-bar .nav-icon.op-icon-gears::after {content:"Settingses";}
GM of Stream of Kairos - 2025 Campaign of the Year
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
Need CSS Help? It may be covered here: Abersade's CSS Hub
GM of Stream of Kairos - 2025 Campaign of the Year
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
Need CSS Help? It may be covered here: Abersade's CSS Hub
Ah, nice! Thank you, Sir! I'll try this and report back.