Hello,
since I changed our menu to mega menu, the menu items (there are two) are on the right side and no longer centered - I would like them to be centered.
The offcanvas burger should remain on the right side.
Unfortunately, I can't manage to do this via CSS.
With the CSS code:
.justify-content-end {
justify-content: center!important;
}
both menus are centered.
How can I address the two menus individually?
https://www.hebammenzentrum.at/
Regards - Marco
.justify-content-end { justify-content: center !important; }
Hi Marco.
Bad idea to override Bootstrap classes. This can break many other things on your site. The menu requires an accurately aimed selector and a little more code.
Example
#sp-menu .sp-column {
justify-content: center !important;
}
.sp-megamenu-parent {
margin: 0;
}
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
padding: 0 15px !important;
}In order not to write extra code as @media (max-width: 768px) {...} and ect
Just use it in min-width media wrapper
@media (min-width: 992px) {
#sp-menu .sp-column {
justify-content: center !important;
}
.sp-megamenu-parent {
margin: 0;
}
.sp-megamenu-parent>li>a,
.sp-megamenu-parent>li>span {
padding: 0 15px !important;
}
}Hi
Thanks for contacting us. Use this custom CSS in your custom.css file
.justify-content-end {
justify-content: flex-end !important;
}-Regards.
Thank you for your answer!
I have removed the following
.justify-content-end {
justify-content: center!important;
}
and added this
.justify-content-end {
justify-content: flex-end !important;
}
now both menus are on the right side - but on the desktop the menu should be centered.
Regards Marco
Please delete that CSS and use this one
@media (max-width: 768px){
.justify-content-end {
justify-content: flex-end !important;
}
}
thanks Mehtaz, I have now added both CSS codes
.justify-content-end {
justify-content: center!important;
}
@media (max-width: 768px){
.justify-content-end {
justify-content: flex-end !important;
}
}
The first one centers both menus, the second one moves the burger icon to the right at 768px screen width.
I have entered 991px instead of 768px, as the mega menu changes to the burger icon at 991px.
Can you please tell me how to make it possible to switch from mega menu to offcanvas at 1200px?
Below 1200px the content of my mega menu is no longer legible and I would like to switch to offcanvas to improve readability.
Regards - Marco
Hi
Please use this for megamenu to offcanvas, you can get it from template settings.
Thanks for your answer - but that's not what I want.
For the desktop I only want the mega menu, for devices with screen width below 1200px only the offcanvas menu should be displayed - currently mega menu changes to offcanvas and vice versa at 991px.
Regards
by choosing only Megamenu you can get megamenu on desktop and offcanvas on tablet and mobile version. You can choose it. And sorry we dont have any other default option. You have to choose that only.
I feel misunderstood or I am not expressing myself clearly :)
It's fine the way it is with the menus - I just want it to switch from mega (desktop) to offcanvas (mobile) at 1200px instead of 991px
Could you please create a new forum post about this new portion? I dont have enough information about it, sorry.
Thank you very much Pavel for the solution - is also implemented here
Regards - Marco