How to hide the 'Latest', 'Top', 'Categories' and drop down in the homepage

Product Support

AI-generated summary

The discussion revolves around hiding the ‘Latest’, ‘Top’, ‘Categories’ and dropdown in the homepage of a Discourse forum. AmzDis initially asked for the CSS to achieve this and provided screenshots of the desired outcome.

They attempted to add CSS code to remove the dropdown list, but it only worked on desktop, not mobile. Jonathan5 suggested using the site setting to determine which items appear in the homepage navigation. After applying this setting, AmzDis was left with only the ‘latest’ option, which they still wanted to hide.

Jonathan5 suggested using CSS, and ondrej provided the CSS code to hide the ‘latest’ option on both desktop and mobile. The provided code is:

For desktop:

.nav-pills>li a.active {
    color: var(--secondary);
    background-color: var(--quaternary);
    display : none;
}

For mobile:

.list-controls .nav-pills .navigation-toggle {
    flex: 0 1 auto;
    display: none;
}
1

Hi Anyone, our website https://amzdis.com (Amazon Discount) wants to hide the ‘Latest’, ‘Top’, ‘Categories’ in the home page. What CSS should be in Customize of Setting?

See Desktop screenshot

25d73bf70e7ccae30752855af89b0db
25d73bf70e7ccae30752855af89b0db1482×629 192 KB

See Mobile screenshot

233b2133023cdda2384305f90ea4f5f
233b2133023cdda2384305f90ea4f5f1080×1920 159 KB

2

I added below customize CSS and only can remove the dropdown list from home page (Desktop), and the dropdown still show in mobile.

.navigation-topics ol.category-breadcrumb {
display: none;}

The dropdown is gone in Desktop.

e34116ed716db5695eb4187afc638fc
e34116ed716db5695eb4187afc638fc1518×603 166 KB

But the dropdown still show in mobile.

21ac254fca4d4fdb56b37d9d5567913
21ac254fca4d4fdb56b37d9d55679131080×1920 91.3 KB

3

I think you need to use this site setting.

top menu

Determine which items appear in the homepage navigation, and in what order. Example latest|new|unread|categories|top|read|posted|bookmarks

4

Thanks, Jonathan5.

You’re right.

fd232598d874a6fcf6505a28de82c80
fd232598d874a6fcf6505a28de82c801263×602 41.4 KB

After I setup the top menu, it must have one value ‘latest’ .

How can hide the ‘latest’ on the home page because 'the ‘latest’ is only choice and default topics?

5f3962c53ccb80e3fa21d77ec4eb80b
5f3962c53ccb80e3fa21d77ec4eb80b1056×741 151 KB

5

I don’t know but guess CSS. Often the CSS for mobile and for desktop is different. Your desktop browser probably has a button to pretend to be a mobile device to find out the CSS class/id.

6

Desktop

.nav-pills>li a.active {
    color: var(--secondary);
    background-color: var(--quaternary);
    display: none;
}

Mobile

.list-controls .nav-pills .navigation-toggle {
    flex: 0 1 auto;
    display: none;
}