The two options you see [all categories] [all tags], beside Latest, below header is visible in PC view
But not visible on mobile view
It can be brought by tweaking around but I want that to be visible by default on mobile view on home page, kindly guide how to enable that in mobile view?
Canapin
(Coin-coin le Canapin)
October 20, 2023, 3:20pm
2
Hello
It appears these inputs are only hidden with a .hidden
class on mobile.
You can reveal them, but since they aren’t styled for the mobile view, it needs a bit more CSS rules so they don’t look too wonky.
You can start with this:
.category-breadcrumb {
display: flex !important;
gap: 0;
.plugin-outlet-component {
flex: 0;
}
}
Put it in the Mobile tab of your theme or component.
It will look like this:
I didn’t test it very much, and it can interfere with plugins or components that use the available outlets before and after these selectors.
So, it’s probably more a work base than a fully functional thing… You can try and see how it goes
Edit:
I’m told that these inputs are visible by default on a category page.
So, my CSS code in its current state will mess up a bit the layout of these fields on the category page and need more tweaks.
4 Likes
Canapin
(Coin-coin le Canapin)
October 20, 2023, 4:26pm
6
You can have a look at this:
I took a shot today at making it always visible and this seems to be working for me with no side effect that I could notice:
api.modifyClass("component:bread-crumbs", {
pluginId: "never-hidden-bread-crumbs",
hidden: false
});
hidden is originally:
@discourseComputed("category")
hidden(category) {
return this.site.mobileView && !category;
},
I preferred to make it hidden on the categories page only.
2 Likes
I actually dont know how to use CSS, matter of fact, I am not related to computer science field at all.
If there is a option that I can on or off, I can do that.
I’m afraid there is currently no UI switch for this. You would need to create a small theme component and some extra code to it to get this bespoke behaviour.
1 Like