Header Center
Anna Martinek
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:
sp-header .logo {
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
Paul Frankowski
Accepted AnswerHi Anna,
- Please create a mock-up what you need and share link to image.
- Please tell me what template you used on localhost, raw Helix Ultimate or different one?
In general, we expect from webmasters CSS knowledge that's why we cannot describe in documenation every possible case.
Anna Martinek
Accepted AnswerOK, 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
Paul Frankowski
Accepted AnswerI 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?
Paul Frankowski
Accepted Answerwhere is that link?
Q: Do you need logo and menu inside a single row (header) ?
Paul Frankowski
Accepted AnswerDo you know that row that is menu inside must be named "header" according to Helix documenation! If not yet, please do that right now.
Paul Frankowski
Accepted AnswerBut 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;}Anna Martinek
Accepted AnswerPerfect, Thanks for your help! Now everything works. Greetings Hans
Anna Martinek
Accepted Answernow 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
Paul Frankowski
Accepted AnswerMaybe set bg color for header
#sp-header.header-sticky {background: #FFFFFF;}
"sticky" class means only when you scroll down.
Anna Martinek
Accepted AnswerHi,
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