? No Code Attached Yet ?
avatar sofianhit
sofianhit
30 Jun 2022

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 .

screen shot 2022-07-01 at 02 48 32


{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 41![screen shot 2022-06-30 at 18 08 45]
screen shot 2022-06-30 at 18 08 41![screen shot 2022-06-30 at 18 08 45]

avatar sofianhit sofianhit - open - 30 Jun 2022
avatar sofianhit sofianhit - change - 30 Jun 2022
Labels Removed: ?
avatar joomla-cms-bot joomla-cms-bot - change - 30 Jun 2022
Labels Added: No Code Attached Yet
avatar joomla-cms-bot joomla-cms-bot - labeled - 30 Jun 2022
avatar sofianhit sofianhit - change - 30 Jun 2022
The description was changed
avatar sofianhit sofianhit - edited - 30 Jun 2022
avatar sofianhit sofianhit - change - 30 Jun 2022
The description was changed
avatar sofianhit sofianhit - edited - 30 Jun 2022
avatar sofianhit sofianhit - change - 30 Jun 2022
The description was changed
avatar sofianhit sofianhit - edited - 30 Jun 2022
avatar richard67
richard67 - comment - 30 Jun 2022

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.

avatar sofianhit
sofianhit - comment - 30 Jun 2022

thanks
it works now


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/38192.

avatar richard67
richard67 - comment - 30 Jun 2022

I would have expected some screenshots of how it finally looks on the site with Cassiopeia with some modules on these positions.

avatar sofianhit
sofianhit - comment - 30 Jun 2022

i will bring them shortly .


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/38192.

avatar sofianhit
sofianhit - comment - 30 Jun 2022

here a screenshot :
NOTE: i added my custom css .

screen shot 2022-06-30 at 19 05 24


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/38192.

avatar chmst
chmst - comment - 30 Jun 2022

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.

avatar sofianhit
sofianhit - comment - 30 Jun 2022

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 .
screen shot 2022-06-30 at 20 40 50


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/38192.

avatar brianteeman
brianteeman - comment - 30 Jun 2022

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

avatar sofianhit
sofianhit - comment - 30 Jun 2022

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 .


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/38192.

avatar brianteeman
brianteeman - comment - 30 Jun 2022

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

avatar sofianhit
sofianhit - comment - 1 Jul 2022

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 ?


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/38192.
avatar sofianhit sofianhit - change - 1 Jul 2022
Title
feature request :split the "topbar" and "below-top" divs from the header .
feature request : add a new module position above the header .
avatar sofianhit sofianhit - edited - 1 Jul 2022
avatar sofianhit sofianhit - change - 1 Jul 2022
The description was changed
avatar sofianhit sofianhit - edited - 1 Jul 2022
avatar sofianhit sofianhit - change - 1 Jul 2022
The description was changed
avatar sofianhit sofianhit - edited - 1 Jul 2022
avatar sofianhit sofianhit - change - 1 Jul 2022
The description was changed
avatar sofianhit sofianhit - edited - 1 Jul 2022
avatar sofianhit sofianhit - change - 1 Jul 2022
Title
feature request : add a new module position above the header .
feature request : add a new module positions above & under the header .
avatar sofianhit sofianhit - edited - 1 Jul 2022
avatar sofianhit sofianhit - change - 1 Jul 2022
The description was changed
avatar sofianhit sofianhit - edited - 1 Jul 2022
avatar alikon alikon - change - 1 Jul 2022
Labels Added: ?
avatar alikon alikon - labeled - 1 Jul 2022
avatar chmst chmst - change - 1 Jul 2022
Labels Added: ?
avatar chmst chmst - labeled - 1 Jul 2022
avatar simbus82
simbus82 - comment - 1 Jul 2022

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>
avatar simbus82
simbus82 - comment - 1 Jul 2022

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.

avatar Quy
Quy - comment - 6 Feb 2023

Please test PR #39805 for position above the header.

Add a Comment

Login with GitHub to post a comment