<header> region problem

[allsite]

The <header></header> should be a region where blocks can be placed. Currently the header is rendered ONLY when the "header block" is added. Other blocks, such as Custom or a View are output without the expected <header> element while being added to the Header layout region.

[UPDATE: The actual issue appears related to the header element not getting the expected classes. The header does output in all scenarios, but visually it's not there because its unstyled. More info added below.

Example: The below image represents a Nice Menus block added to the Header layout region. There is no <header> tag on the page. [this is incorrect, it's there but unstyled]

[docwilmot]

I dont quite understand this issue. Perhaps this is an initial state of the theme after install? Because I seem to always see the header region rendered whenever there is any block in it. Could you try visiting the theme settings page and saving your preferred settings and see if that changes things? Although I did disable and reinstall the theme and the header region still is visible, with <header> tag rendered.

Cant reproduce this in other words.

[allsite]

Resaving settings had no affect. However you are correct, it does output the header tag in all scenarios. I looked deeper into the issue and it seems to be related to the header css styles not being applied in a case no "Header block" is inside the header region.

Here's the header without the "Header block" (oddly unstyled) <header class="l-header" role="banner" aria-label="Site header">

Here's the header with the "Header block" (nice and styled) <header id="navbar" role="banner" class="navbar navbar-expand-lg navbar-static-top static-top navbar-dark bg-primary">

The expected behavior seems to be the second example would be used, regardless what blocks are in the region.

Here's the config that causes the unexpected unstyled header:

And another just to rule out any weirdness with Nice Menus:

[docwilmot]

Here's the header without the "Header block" (oddly unstyled)

I see your misunderstanding here. This <header class="l-header" role="banner" aria-label="Site header"> is actually the normal behavior for layouts. This theme uses JS to create a styled header if the header block is in use so if no header block it falls back to normal layout html/css.

I assume youve been trying to get the other dropdown menu module to work? I imagine someone has added styling to make it work in Basis already, but the maintainer or yourself will need to add the CSS etc to get it to work with this theme. There is no way a theme can support every contrib module, as you know.

[allsite]

The issue relates to the styling applied/not-applied to the header tag and can be reproduced without any contrib. I'll refer to the Page Title block going forward to prevent confusion.

Why would the theme only style the header tag when the "header block" is in use? It's not typical to style a specific block, in favor of styling theme regions. In D7/Bootstrap, Basis and most other backdrop themes this is not the case and for reasons that make sense. It should be possible to insert any block into the Header theme region and have it be styled.

Here's my config:

Here's the output:

Here's a mockup of the expected output:

[allsite]

Basis theme demonstrates the expected output:

Bootstrap5_lite's markup has two header tags, which feels a bit unusual. One for "header block" and another for any other blocks in the Header theme region. This issue can also be observed in backdrop Bootstrap_lite, which is "inspired by drupal.org/project/bootstrap (which does not suffer the issue).

[docwilmot]

OK. I see. This wont be easy.

In Backdrop the regions and all classes are provided by Layouts. So the header region has a l-header classs and Basis adds a background color to that class. I imagine most other themes work the same.

But this theme uses JS to create a fake header div above the page body, and adds Bootstrap's nav markup to that header. That allows fancy things like left/right positioning, inline with logo, the cogwheel menu, etc without any custom CSS. To do that in another theme would be difficult as the core header block doesn't offer this, and if you just add other blocks they'd just stack on top of each other. For convenience, this theme detects which menu you have in your header block and uses that for the fake header nav. Consequently if you have no header block on your page, there is no fake header nav region.

This theme therefore doesnt have to add any CSS targeting the header region itself. The header region just becomes an ordinary region where you can put other blocks.

So to your point, what youre asking is to detect if there isnt a fake header nav, then add add a class to the header region, that then gives the region a background. This will need to be a JS solution.

Its probably not a bad idea, especially if we add as settings to trigger it. I wonder what @laryn and @stpaultim would think here?

[allsite]

That explanation really helps one understand the difference vs other themes. Clearly a JS project, should we find a path forward that makes sense. A few thoughts off the top of my head.

1. The themed "fake" header element only displays when the Header block is enabled, but we do have control over what elements are output within it, thus potential to unclick all the options and have an empty header that is themed. Perhaps this idea could become a well documented workaround. Way worth it if we get all the bells and whistles that come with BS5.

2. Then perhaps any Header theme region blocks could be output into JS and injected into the fake header as opposed to rendering in a new header element.

[docwilmot]

I havent had a chance to look into this, unfortunately. Is it still needed?

[allsite]

The solution for me was to simply use a different theme that better suited my needs. So it's not a pressing matter for me in any way.

[izmeez]

I'm also finding issues with the header region. The header region is not behaving as expected. The site slogan and the primary menu are not displayed inside the same container as the logo, site name and user menu. The two areas appear to be broken by the "skip-link" div.