Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Support

Hide navigation and header [Antimatter]

Started by werdi 7 years ago · 12 replies · 1967 views

7 years ago

I'm working with a modified version of the Antimatter theme.

I want to hide the navigation and the header on a page-by-page basis. Also hide the navigation on a page-by-page basis.

The site: http://www.learahelbader.com/de

Where is the place to introduce a command such that when you enter on a page-by-page basis the following into frontmatter: hide_navigation: true - in this case, the navigation would disappear? I have no clue about twig, fyi, just a good feel for html, css and markdown.

Thanks a lot for your support.

7 years ago

Hi @werdi, I actually do something very similar for several of my open education and publishing projects (Bootstrap4 Open Matter and Quark Open Publishing theme) for Grav so Grav content can be 'chromelessly' embedded into other systems like LMS etc.

In general, you want to usually skip the Twig responsible for displaying the menu, header, etc based on a variable (either page header or in my case a theme option or URL flag).

Here are some example Twig files which might help:
https://github.com/hibbitts-design/grav-theme-bootstrap4-open-matter/blob/master/templates/partials/base.html.twig#L80-L89

https://github.com/hibbitts-design/grav-theme-bootstrap4-open-matter/blob/master/templates/partials/base.html.twig#L94-L119

Here is a live demo of the Quark Open Publishing theme:
https://demo.hibbittsdesign.org/grav-open-publishing-quark/

And 'chromeless' view:
http://demo.hibbittsdesign.org/grav-open-publishing-quark/chromeless:true

BTW, I use a bit of jQuery so chromeless is maintained even when going from Grav page to Grav page.

I hope the above helps.
Paul

last edited 11/05/19 by Paul Hibbitts

7 years ago

Thanks for your reply!

I'm afraid I didn't understand this:

@paulhibbitts:
so Grav content can be ‘chromelessly’ embedded into other systems like LMS etc.

chromeless and LMS - no idea.

I understand that it's about skipping the Twig. I couldn't grasp how to do this from the files you sent me. I have no clue about Twig.

Can you explain in a different way?

7 years ago

By "chromeless" I mean presenting a web page with content only, no navbar, sidebar, footer, etc. By 'LMS' I mean a Learning Management System, which is used by a lot of universities for providing course content to students.

For the functionality that you are describing you will need to use custom Twig for that. However, if you use one of my themes such as Bootstrap4 Open Matter or Quark Open Publishing the ability to hide the navbar/sidebar/footer is already included in the theme (but not to hide it page-by-page by frontmatter but rather by the URL used to embed the page).

I hope the above helps a bit more.
Paul

pamtbaau

Grav Forum Moderators Legend First Post Conversation Starter Well Liked 3127 posts

7 years ago Solution

@werdi, Based on a child theme of Antimatter, I have created a sample to hide/show the entire header or only show/hide the navbar.

To hide/show a block of code based on the frontmatter of a page, you do the following in general:

In page file header you set the required variable:

MARKDOWN

---
hide_navigation: true 
---
# A page without navigation

In Twig:

TWIG

{% if not page.header.hide_navigation %}
  {# Show this if page.header.hide_navigation is not defined, or is false #}
  {# Here goes the HTML building your navigation bar #}  
{% endif %}

If we want to implement hide/show header/navigation in a child-theme based on Antimatter, we could do the following:

In frontmatter of page hiding navigation (but keeping the navbar with language-switcher):
MARKDOWN
```
---
hide_navigation: true
---
# I have no navigation
```
In frontmatter of page hiding entire header (including the navigation):
MARKDOWN
```
---
hide_header: true
---
# I have no header
```

In twig /user/themes/werdi_theme/templates/partials/base.html.twig, we surround the blocks {% block header %} and {% block header_navigation %} with the proper if-statements to hide/show the header resp. navigation. Note, I keep the language switcher.

TWIG

<head>
...
</head>
<body id="top" class="{{ page.header.body_classes }}">
    <div id="sb-site">
{% if not page.header.hide_header %}
        {% block header %}
        <header id="header">
            <div id="logo">
                <h3><a href="{{ base_url == '' ? '/' : base_url }}">{{ config.site.title }}</a></h3>
            </div>
            <div id="navbar">
                {% block header_extra %}{% endblock %}
                {% if config.plugins.langswitcher.enabled %}
                {% include 'partials/langswitcher.html.twig' %}
                {% endif %}
    {% if not page.header.hide_navigation %}
                {% block header_navigation %}
                {% include 'partials/navigation.html.twig' %}
                {% endblock %}
    {% endif %}
                <span class="panel-activation sb-toggle-left navbar-left menu-btn fa fa-bars"></span>
            </div>
        </header>
        {% endblock %}
{% endif %}
        {% block showcase %}{% endblock %}

Note: For clarity I did not properly indent the {% if %} and {% endif %} statements.

Hope this helps...

7 years ago

Thanks for your reply and the clarifications. For now, I'm trying to solve the issue with my present website.

7 years ago

@pamtbaau This sounds like exactly what I'm looking for. I will have to take a few days to try it out during next week. For now, thanks, I'll get back and let you know.

As to the language switcher, I mean to have the twig in place already to toggle it on and off. Correct?

pamtbaau

Grav Forum Moderators Legend First Post Conversation Starter Well Liked 3127 posts

7 years ago

@werdi, would you mind expanding on your last remark wrt. the language-switcher? I'm afraid I do not quite understand it...

Do you want to remove both the language-switcher and the navigation at the same time using the variable 'hide_navigation'?

7 years ago

Thanks for sharing that example @pamtbaau👍

7 years ago

What I meant to say is that when I had the site modified, I asked for a toggle for the langswitcher: "hide_langswitcher: true" or something like that. I've not really used it, but it's there. I was just missing the tools to hide the other parts: navigation and header.

pamtbaau

Grav Forum Moderators Legend First Post Conversation Starter Well Liked 3127 posts

7 years ago

@werdi, Does that mean you have all the info you need to continue and your issue has been solved?

7 years ago

For now I have the information to continue, but I haven't solved the issue yet because I need to go in there and try it out.

I'm marking your answer as solved and will get back to you when I implement it.

Thank you.

6 years ago

@pamtbaau Thanks again for your help, it worked!

Topic	Replies	Views	Activity
Multisite in subdirectory Support · by Thomas, 1 week ago	2	60	16 hours ago
How to listen for GET requests instead of POST requests? Support · by Anna, 3 days ago	2	66	19 hours ago
Twig not processing in 2.0.0 Support · by Justin Young, 20 hours ago	1	34	20 hours ago
Form: GRAV.Yes translation key Support · by Duc , 1 week ago	2	70	6 days ago
Installing Grav on Windows 11 Support · by Colin Hume, 1 week ago	2	61	6 days ago

Suggested topics