Menu Like "Left Modal"
Dominik
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
Ofi Khan
Accepted AnswerHello 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
Accepted AnswerHi 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
Accepted AnswerI 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
Accepted AnswerI would like the X to be smaller so that you can see it. But without making the hamburger menu smaller.
Ofi Khan
Accepted AnswerPlease 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
Accepted AnswerThank 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
Accepted AnswerPlease 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.
Ofi Khan
Accepted AnswerI have removed the problematic CSS from custom.css file. Please check Portfolio page now.
Dominik
Accepted AnswerUnfortunately, 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
Accepted AnswerPlease use this CSS to
Template Options -> Custom Code -> Custom CSS
#sp-header.header-sticky {
position: fixed !important;
}Dominik
Accepted AnswerThank 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
Accepted AnswerYou have Custom CSS targeting .com_spsimpleportfolio header class. Remove it and then check the issue.
Dominik
Accepted AnswerI 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.
Ofi Khan
Accepted AnswerYou 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.