Main Menu In The Center, Offcanvas Toggler (burger Menu Icon) On The Right Side
Marco
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
Pavel
Accepted Answer.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;
}
}
Mehtaz Afsana Borsha
Accepted AnswerHi
Thanks for contacting us. Use this custom CSS in your custom.css file
.justify-content-end {
justify-content: flex-end !important;
}-Regards.
Marco
Accepted AnswerThank 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
Marco
Accepted Answerthanks 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
Mehtaz Afsana Borsha
Accepted AnswerHi
Please use this for megamenu to offcanvas, you can get it from template settings.
Marco
Accepted AnswerThanks 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
Marco
Accepted AnswerI 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
Mehtaz Afsana Borsha
Accepted AnswerCould you please create a new forum post about this new portion? I dont have enough information about it, sorry.