Show Mobile Header for All Screen Sizes?

[rmallory]

I'm wondering if there is an easy way to use the mobile header for all screen sizes? I prefer the minimalist aesthetic. Screenshot of the mobile menu attached.



I've tried hiding all of the items in the top bar. For example:

<li id="top-bar-explore" data-nav="explore" class="phone-hide pop-btn pop-btn-auto pop-btn-auto pop-btn-show">

additions in red:

<li id="top-bar-explore" data-nav="explore" class="phone-hide phablet-hide tablet-hide laptop-hide desktop-hide pop-btn pop-btn-auto pop-btn-auto pop-btn-show">

but this hides the "explore" item from the mobile pop out menu as well.

I'm still working on this, but I'm curious if there is an easy fix I haven't thought of?

Cheers,
Raynor

 

[Rodolfo]

Dashboard > Settings > Theme

Add this custom CSS:

.top-btn-text .btn-text { display: none; }

 

[rmallory]

Thanks Rodolfo,

It looks like this hides all of text in the header, but it also hides the text in the dropdown menu which I'd like to keep:


I"m trying to hide everything from the header (both text and icons) except for the menu icon and the login icon. So that the header looks like this in all views:



The random icon can be hid in the dash.

I can hide everything by using the method I showed above, but the elements end up being hidden in the dropdown menu as well (in all views other than mobile, they still show up in the mobile view).

Do you think there is a way around this? It might require some more laborious modifications on my part.

Thank you

 

[Rodolfo]

.top-btn-text .phone-hide {
    display: none !important;
}
.top-btn-text .icon.tablet-hide.laptop-hide.desktop-hide {
    display: inline-block !important;
}

 

[rmallory]

Wow, thank you so much!!!