Insert template without wrapper tag or allow multiple same type templates on a page

[Hendrik]

I have 3 navigation bars.

I can not use template type Header. Because setting sticky on a navigation bar will only make it stick inside its parent. (Header Tag)

There should be a really easy fix.
Allow me to insert 3 header templates (with order to select in what order they should appear).
or
Allow me to insert a template on a page without wrapping it in a header or main tag.
Header wraps header tag and single wraps in the main tag. I dont want either.

Creating multi row sticky navigation bars is so easy and convenient with css and html. But the way Bricks builder structures it’s html with templates makes it alsmost impossible to use it correctly.

When creating websites from scratch, its one of the easiest things to do, but with bricks builder I just cant get it done.

[aslotta]

Hey Hendrik,

just out of curiosity: If you were to build the whole thing manually (outside of Bricks)… what exactly would the HTML structure look like? Semantically there should be just one header tag, right? So how do you organize multipe rows in this case?

Update:

Just thought about making this work using display: contents on the header (see screencast).

Best,

André

[Hendrik]

Semantically it should not matter if you use multiple header tags. Or I might be missing something?
Problem is the browser support for display: contents. CSS display: contents | Can I use... Support tables for HTML5, CSS3, etc

There are still some bugs with display: contents and browser support is partial.
For this particular case it seems to work fine from what I can tell atm this momemt. I’m not sure if this is a long-term solution to this problem.

[aslotta]

Hey Hendrik,

one more idea:

Do not create a regular header template. Instead create a section template containing your header rows (each with a custom header tag). And then use the bricks_after_header hook and the [bricks_template...] shortcode to output this section template.

I created a short screencast to demonstrate.

This is the resulting html:

Let me know if that helps.

Best,

André

[Hendrik]

Before you wrote your post, I ended up using javascript with this code:

document.addEventListener('DOMContentLoaded', function() {
    let outerHeader = document.querySelector('body > header');

    // If there is no outerHeader or it doesn't have a parentNode, exit early
    if (!outerHeader || !outerHeader.parentNode) return;

    moveChildrenToParentAndRemove(outerHeader);
});

function moveChildrenToParentAndRemove(element) {
    const parent = element.parentNode;
    const fragment = document.createDocumentFragment();

    while (element.firstChild) {
        fragment.appendChild(element.firstChild);
    }

    parent.insertBefore(fragment, element);
    element.remove();
}

This allows the use of the header template, while moving the children outside the template wrapper and deleting the header wrapper.
As you can imagine, I rather do not use javascript to get the desired result.

I like your approach with PHP. While it’s not a ideal solution, it’s better than my javascript solution I think.

Also, it’s not necessarily about using 2 header tags. I just need 2 rows on the same level as the main tag for sticky to work. I could use a div for the first and a header for the second row. It’s more about being able to put out html without it being wrapped and contrained by the wrappers that templates generate.