we have created a custom header in a template and want to center our own logo and the main menu in this header.
Unfortunately, we have not found any reference to where this is explained.
The only thing we found was this:
margin: 0px auto;
}
.sp-megamenu-parent {
margin: 0px auto;
}
Unfortunately that didn't work.
Please let us know what we need to do.
Our web is a Joomla 4 web on the local server.
Best regards
Hans
Hi Anna,
In general, we expect from webmasters CSS knowledge that's why we cannot describe in documenation every possible case.
OK,
I don't know why you answer so aggressively?
The CSS code comes from your forum.
it is the template helix ultimate 2.0.12
I don't understand your answer, no morning coffee or what? Oh..
Where is mock-up (img) what you really want to get afer ? two rows or a single row with centered columns?
Here is the link to the screenshot
there are two rows
where is that link?
Q: Do you need logo and menu inside a single row (header) ?
Do you know that row that is menu inside must be named "header" according to Helix documenation!
If not yet, please do that right now.
But on your place I would use a different method.
Video guide: https://youtu.be/QvWCzsz95eE
In my example (and video) I used that CSS:
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {line-height: 50px;}
#sp-header .logo {height: 50px; display: block; align-items: center; text-align: center; margin: 10px auto;}
#sp-menu > .justify-content-end {justify-content: center !important;}Perfect,
Thanks for your help!
Now everything works.
Greetings Hans
now the problem has appeared, when scrolling the menu runs over the page content and is therefore not easy to read,
https://screenmaker.at/images/helix-sticki.jpg
Maybe set bg color for header
#sp-header.header-sticky {background: #FFFFFF;}
"sticky" class means only when you scroll down.
Hi,
How can I make only the menu sticky.
The logo should not be visible when scrolling...
The menu should cover the entire width of the monitor and be black in color.
Thanks in advance
https://screenmaker.at/images/helix-sticki2.jpg