Hi there
I do not use a predefined header. When I open my menu, it should open across the whole page and display the menu items centered. If possible also a background image like the predefined header “Left Modal”. Is that possible?
Thank you
Domi
Solved
Helix Framework
Menu like "Left Modal"
Accepted answer
Marked as the solution
Ofi Khan Staff
I have removed the problematic CSS from custom.css file. Please check Portfolio page now.
9 more replies
Ofi Khan Staff
Hello Dominik,
Thank you for reaching out to our technical support forum. Sorry, this feature does not exist and we do not provide customization support. You can customize the solution with Custom CSS by yourself.
Best regards
Dominik Asked this
Hi Ofi
I understand. But can you make the menu a little wider so that you can see the “X” for close?
Thank you.
Domi
Ofi Khan Staff
I can't check your site. But I don't think the adjustment is needed. It is perhaps the design of the x icon. Please check it again.
Dominik Asked this
I would like the X to be smaller so that you can see it. But without making the hamburger menu smaller.
Ofi Khan Staff
Please use this CSS to
Template Options -> Custom Code -> Custom CSS
.burger-icon > span{
height: 4px !important;
margin: 3px 0 !important;
}Then check the offcanvas x icon.
Dominik Asked this
Thank you Ofi. Unfortunately, the change also affects the normal hamburger menu.
This is how it should look (this is how it looks at the moment):
With the change it looks like this:
Ofi Khan Staff
Please use this CSS to
Template Options -> Custom Code -> Custom CSS
.offcanvas-active .burger-icon > span{
height: 4px !important;
margin: 3px 0 !important;
}It will not affect the regular hamburger toggler.
Dominik Asked this
Unfortunately, the header no longer scrolls, so it is no longer sticky. I have fixed it with the code
#sp-header {
position: sticky !important;
}but unfortunately without success. How can I make the header sticky again?
Ofi Khan Staff
Please use this CSS to
Template Options -> Custom Code -> Custom CSS
#sp-header.header-sticky {
position: fixed !important;
}
Dominik Asked this
Thank you Ofi. This works almost everywhere except for the SP Simple Portfolio. As soon as I scroll, the logo jumps to the left side and the hamburger menu disappears. Do you have a solution how this can be solved?
Ofi Khan Staff
You have Custom CSS targeting .com_spsimpleportfolio header class. Remove it and then check the issue.
Dominik Asked this
I have deleted this code from my custom.css but nothing has changed.
.com_spsimpleportfolio header {
margin: 0 auto;
width: 1320px !important;
left: 50%;
transform: translateX(-50%);
border: unset !important;
box-shadow: unset !important;
}When scrolling, the logo jumps to the left and the hamburger menu disappears.
Dominik Asked this
Looks perfect! Thank you!
Ofi Khan Staff
You are welcome 😊
Dominik Asked this
Perfect!! Thank you Ofi!
Ofi Khan Staff
You are welcome 😊
I have a humble request. It would be very kind of you if you can manage some moment to give us feedback on
This will inspire us to improve.
Log in to reply.