Logo And Menu Centered In Custom Header
Andrea
Hi, I'd like to make a header similar to the predefined "multi rows" but. I created a custom header in the layout tab: I created two sections, one called header (with module position logo) and one named menu (with module position menu). I added some css
sp-header .logo {margin: auto;}
.sp-megamenu-parent {margin: auto;}
offcanvas-toggler {margin: auto !important;}
in order to have logo and menu (mega menu on desktop and burger menu on tablet/smartphone) centered. I have two issues now:
- I'd like both sections (custom header and custom menu) to be sticky as scrolling. Now only the custom header section is sticky.
- I'd like to set the custom header section's height as 200px (I need the logo to be at least 160 px high) but the custom menu section's height as to be 60px high.
J6, Helix 2.2.1. Thank you for your help
Rashida Rahman
Accepted AnswerHello Andrea Maestrini,
I hope you’re doing well. I’m sorry for the experience you’ve had so far.
To look into this issue more closely, could you please share temporary Super Admin access (inside the hidden content box)? I’ll check this and update you as soon as possible.
Please make sure to keep a full site backup before sharing the credentials, just to be safe.
Note: I think you have checked the related documentation already: https://www.joomshaper.com/documentation/helix-framework/custom-header
Best regards,
Andrea
Accepted AnswerHi, I did check the documentation but couldn't make it anyway. I used .sp-megamenu-parent {margin: auto;} instead of the suggested
sp-menu > .sp-column,
sp-menu .sp-megamenu-wrapper { justify-content: center !important;}
sp-menu>.sp-column.justify-content-end {
justify-content: center !important;}and it works fine anyway and found no differences. Thank you