How to hide heading sections? #2800

Closed
opened 2026-02-05 05:14:38 +03:00 by OVERLORD · 5 comments
Owner

Originally created by @peteSmith1229 on GitHub (May 18, 2022).

Attempted Debugging

  • I have read the debugging page

Searched GitHub Issues

  • I have searched GitHub for the issue.

Describe the Scenario

I would like to hide the "Shelves" and "Books" headers on the top-right of the webpage and only have these enabled when the user logs in.

I thought of using CSS in the Custom HTML Head Content section in Settings so as a test, I tried to hide the entire heading field to see if it works by using .header {display:none;} but the header section is still displayed.

Is this the right method to hide the "Shelves" and "Books" headers or is there a more efficient method?

Exact BookStack Version

v22.02.3

Log Content

No response

PHP Version

7.4.3

Hosting Environment

Ubuntu 20.04, Bookstack installed using this script: https://github.com/BookStackApp/devops/blob/main/scripts/installation-ubuntu-20.04.sh

Originally created by @peteSmith1229 on GitHub (May 18, 2022). ### Attempted Debugging - [X] I have read the debugging page ### Searched GitHub Issues - [X] I have searched GitHub for the issue. ### Describe the Scenario I would like to hide the "Shelves" and "Books" headers on the top-right of the webpage and only have these enabled when the user logs in. I thought of using CSS in the Custom HTML Head Content section in Settings so as a test, I tried to hide the entire heading field to see if it works by using `.header {display:none;}` but the header section is still displayed. Is this the right method to hide the "Shelves" and "Books" headers or is there a more efficient method? ### Exact BookStack Version v22.02.3 ### Log Content _No response_ ### PHP Version 7.4.3 ### Hosting Environment Ubuntu 20.04, Bookstack installed using this script: https://github.com/BookStackApp/devops/blob/main/scripts/installation-ubuntu-20.04.sh
OVERLORD added the 🐕 Support label 2026-02-05 05:14:38 +03:00
Author
Owner

@ssddanbrown commented on GitHub (May 20, 2022):

The following will hide both of those menu items using JavaScript:

<script>
    window.addEventListener('DOMContentLoaded', function() {
        const isLoggedIn = document.querySelector('header form[action$="/logout"]') !== null;
        if (!isLoggedIn) {
            const linksToHide = document.querySelectorAll('header a[href$="/books"], header a[href$="/shelves"]');
            for (const link of linksToHide) {
                link.style.display = 'none';
            }
        }
    });
</script>

Unfortunately, there will still be a flash of these items before the JavaScript runs, and they will show if JavaScript is disabled. It's not yet possible (In a widely supported way) to achieve this with CSS alone in the current configuration of BookStack.

For better customization, you could override the header bar template using the visual theme system.

@ssddanbrown commented on GitHub (May 20, 2022): The following will hide both of those menu items using JavaScript: ```html <script> window.addEventListener('DOMContentLoaded', function() { const isLoggedIn = document.querySelector('header form[action$="/logout"]') !== null; if (!isLoggedIn) { const linksToHide = document.querySelectorAll('header a[href$="/books"], header a[href$="/shelves"]'); for (const link of linksToHide) { link.style.display = 'none'; } } }); </script> ``` Unfortunately, there will still be a flash of these items before the JavaScript runs, and they will show if JavaScript is disabled. It's not yet possible (In a widely supported way) to achieve this with CSS alone in the current configuration of BookStack. For better customization, you could override [the header bar template](https://github.com/BookStackApp/BookStack/blob/development/resources/views/common/header.blade.php) using [the visual theme system](https://github.com/BookStackApp/BookStack/blob/development/dev/docs/visual-theme-system.md).
Author
Owner

@ssddanbrown commented on GitHub (May 29, 2022):

Since there's been no follow-up I'm going to close this. If the issue remains and is something you still require to be fixed respond to my previous comment and this can then be re-opened.

@ssddanbrown commented on GitHub (May 29, 2022): Since there's been no follow-up I'm going to close this. If the issue remains and is something you still require to be fixed respond to my previous comment and this can then be re-opened.
Author
Owner

@peteSmith1229 commented on GitHub (May 30, 2022):

Sorry for the late reply. Thanks for your comment, I think the best method for me is just to edit the var/www/bookStack/resources/views/common/header.blade.php file directly and comment out the lines which displays the "Shelves" and "Books" headings.

@peteSmith1229 commented on GitHub (May 30, 2022): Sorry for the late reply. Thanks for your comment, I think the best method for me is just to edit the `var/www/bookStack/resources/views/common/header.blade.php` file directly and comment out the lines which displays the "Shelves" and "Books" headings.
Author
Owner

@ssddanbrown commented on GitHub (May 30, 2022):

No worries @peteSmith1229,

Editing core app files can mess with update updates though, Using the visual theme system I linked above would allow you to make your modifications without editing original app files.

@ssddanbrown commented on GitHub (May 30, 2022): No worries @peteSmith1229, Editing core app files can mess with update updates though, Using the visual theme system I linked above would allow you to make your modifications without editing original app files.
Author
Owner

@peteSmith1229 commented on GitHub (Jun 1, 2022):

That's good to know, thanks again!

@peteSmith1229 commented on GitHub (Jun 1, 2022): That's good to know, thanks again!
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/BookStack#2800