How hide Login button in header

Development

AI-generated summary

To hide the login button in the header and display it in the hamburger menu, huynhthai824 can follow Lilly’s instructions. Add custom CSS code to the Mobile CSS tab in a theme component, and create a custom link for the top sidebar section. This will move the login button to the hamburger menu.

Additionally, to show the login sidebar link only to anonymous users, Lilly provided alternative CSS code. This code will hide the login button in the header and display it in the sidebar only for anonymous users.

1

This image shows the mobile website of discourse.org, which appears to be an online community platform, featuring a welcome message and options to sign up or search for topics. (Captioned by AI)
This image shows the mobile website of discourse.org, which appears to be an online community platform, featuring a welcome message and options to sign up or search for topics. (Captioned by AI)1080Ă—2400 206 KB

How can we hide login button in header and display them in other, example Hamburger menu?

2

Assuming you are wanting this for mobile as your screenshot indicates, then add this code to a theme component Mobile CSS tab:

Screenshot 2024-07-22 at 10.09.46 AM
Screenshot 2024-07-22 at 10.09.46 AM1900Ă—548 57.1 KB

Then create a custom link for the top sidebar section:

Screenshot 2024-07-22 at 10.21.51 AM
Screenshot 2024-07-22 at 10.21.51 AM1168Ă—956 41.2 KB

There it is…

Screenshot 2024-07-22 at 10.22.15 AM
Screenshot 2024-07-22 at 10.22.15 AM1306Ă—492 30.9 KB

click it and there is the modal:

Screenshot 2024-07-22 at 10.24.04 AM
Screenshot 2024-07-22 at 10.24.04 AM1510Ă—970 44.4 KB

3

Also, to show the login sidebar link to only anonymous users, then you can use this code instead:

.sidebar-section-link-wrapper[data-list-item-name="login"] {
    display: none;
}
.anon .sidebar-section-link-wrapper[data-list-item-name="login"] {
    display: flex;
}

.d-header .login-button {
    display: none;
}

Screenshot 2024-07-22 at 10.32.39 AM
Screenshot 2024-07-22 at 10.32.39 AM1292Ă—766 61.2 KB

I think the data-list-item-name is case sensitive, so if your link is “Login” then it should be the same in the CSS code.