hi
joomla 4 , the header .
{new post text}
adding module positions above & under the header .
a new module position above the header that is not inside the header tag .
in this case we will not harm any existing styles and give a new option to make a new styles .
i am one of many people that like a container above sticky header that will hide when scroll the page .
i mean : if scroll down , the top div (above the header) will move up and header stick on top .
the idea is using container above + under the header and save header thin with small height .
{old post text}
i think it will be very good idea if split "topbar" and "below-top" divs from the header .
the top bar can be above the header , it has the width 100% + own background color.
and the below-top can be under the header with 100% width + own background color.
then will get a thin nice header .![screen shot 2022-06-30 at 18 03 34]
thanks
![screen shot 2022-06-30 at 18 08 45]
![screen shot 2022-06-30 at 18 08 45]
Labels |
Removed:
?
|
Labels |
Added:
No Code Attached Yet
|
thanks
it works now
I would have expected some screenshots of how it finally looks on the site with Cassiopeia with some modules on these positions.
i will bring them shortly .
here a screenshot :
NOTE: i added my custom css .
Thank you! It is a nice example how users can adapt the template.
We always must have in mind that the '<header ' tag has a semantic meaning in barrier-free websites. It should be on top of the site. Let's have more opinions here.
chmst please look at the bbc news site :
https://www.bbc.com/news
the header there is not on top , there is another div above it .
there are many many sites that have a container above the header .
I like your suggestion.
The most important question however would be what would happen to all existing sites using this template after the changes have been made
nothing will happen .
it just step to put the code outside the header tag .
but by USER.CSS you can add your own css codes if needed .
nothing will happen .
Are you sure? if you have a module in topbar it would stop being sticky (if set) and it would lose its background colour as that is coming from the container-header class
if so ....
i suggest to add a new module position above the header .
a new position that is not inside the header tag .
in this case we will not harm any existing styles and give an option to make a new styles .
i am one of many people that like a container above sticky header that will hide when scroll the page .
i mean : if scroll down , the top div (above the header) will move up and header stick on top .
the idea is using container above + under the header and save header thin with small height .
how you think about it now ?
Title |
|
Title |
|
Labels |
Added:
?
|
Labels |
Added:
?
|
Thank you! It is a nice example how users can adapt the template.
We always must have in mind that the '<header ' tag has a semantic meaning in barrier-free websites. It should be on top of the site. Let's have more opinions here.
Not true, semantics and DOM order are different things.
The <header>
tag can be used deep inside the DOM and multiple times if needed, for example to group DOM's elements related to any type of "intro content" or navigational elements.
Initially for HTML it was also supposed to be the container of the headings (h1, h2, etc.) but this has fallen into disuse.
<header class="header">
<h1>content title</h1>
</header>
if so .... i suggest to add a new module position above the header . a new position that is not inside the header tag . in this case we will not harm any existing styles and give an option to make a new styles . i am one of many people that like a container above sticky header that will hide when scroll the page . i mean : if scroll down , the top div (above the header) will move up and header stick on top .
the idea is using container above + under the header and save header thin with small height .
how you think about it now ?
Il like the idea!
We do this in many websites, probably is needed to do some changes to the sticky's JS to recalculate elements heights of this new module only when present.
Your links to screenshots do not work. Maybe it's best to go directly to GitHub #38192 and upload the screenshots there when editing the description again.