- This topic has 20 replies, 3 voices, and was last updated 6 years, 9 months ago by
.
-
Posts
-
How would I go about making the mobile menu/sandwich bar menu replace my current Float Right menu at specific breakpoints? Some CSS weirdness pops up at certain resolutions and I figured I’d use the mobile menu to keep the main navigation from breaking my website.
Customer Support
Perfect! Thank you very much!
Dear God, you guys are the best. I’m totally gonna recommend GP/GP premium to anyone I know looking for a new theme.No problem! Please do!
Hi !
I’m using this code to change the breaking point for mobile menu but I have one problem.
The little menu icon is center at the custom breaking point and the position change right at the standard/default breaking point. How can I modify my css so the menu icon is always right at the custom breaking point like the default breaking point so I don’t see any change of position? THANKS ! 🙂
@media (max-width: 1235px) {
.main-navigation .menu-toggle {
display: block;
}.main-navigation ul {
display: none;
}.main-navigation.toggled .main-nav > ul {
display: block;
}.main-navigation .main-nav ul ul {
position: relative;
top: 0;
left: 0;
width: 100%;
}.main-navigation .main-nav .sf-menu > li {
float: none;
clear: both;
display: block !important;
text-align: left !important;
}.main-navigation .sub-menu.toggled-on,
.main-navigation .children.toggled-on {
display: block !important;
opacity: 1 !important;
}.main-navigation .dropdown-menu-toggle:before {
content: “\f107” !important;
}.main-navigation .sfHover > a .dropdown-menu-toggle:before {
content: “\f106” !important;
}.main-navigation .menu-item-has-children .dropdown-menu-toggle {
float: right;
}.main-navigation .mobile-bar-items {
display: block;
}.main-navigation .menu li.search-item {
display: none !important;
}.main-navigation .sf-menu > li.menu-item-float-right {
float: none !important;
display: inline-block;
}[class*=”nav-float-“] .site-header .inside-header > * {
float: none;
clear: both;
}
}Hi there,
Are you using mobile header feature?
If so try this CSS instead: https://gist.github.com/generatepress/282078076cd8631c17717d5b8640c043
If this doesn’t work are you able to link me to your site?
Thanks!
Hi Leo!
Thanks for the reply!
It’s not working. The whole menu disappear when mobile with the code you provide.Here’s the website
http://opti-services.comThanks !!
Hmm looks like you are not using the mobile header so this CSS should work:
https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-widthCan you add it back so I can see what’s not working? Thanks!
I tried and left the code you just gave me…
It’s working but I still have the menu icon center instead of right like the default mobile icon menu.Thanks !!
The mobile menu icon is actually default below the logo if you don’t use the mobile header feature:
https://docs.generatepress.com/article/mobile-header/If you don’t want to use the mobile header feature, give this CSS a shot:
https://generatepress.com/forums/topic/mobile-menu-alignment/#post-260447Thanks for the link !
Only got to add this :
button.menu-toggle {
width: auto;
float: right;
}
}And it’s working!!
Thanks a lot!
But now I got another concern haha!
Can you please visit my website. You’ll see that there’s a line under the menu title. When it turn to mobile, the line is not showing correctly. How can I get rid of it when it turn to mobile ??
Thanks !!
Try wrapping the CSS like this:
@media (min-width:769px) { /* CSS here */ }Thanks Leo!
I tried and left the code online but as you can see (opti-services.com), the line still look awkward!
Any other idea ?
Thanks again ! 🙂
Just checked your site on mobile and I’m not seeing any lines in the menu?
- You must be logged in to reply to this topic.