- This topic has 14 replies, 3 voices, and was last updated 7 years ago by Tom.
-
AuthorPosts
-
March 14, 2017 at 7:59 pm #291677Brent
I’m trying to transition one of my client’s sites to GP, and on my local testing environment (using XAMPP), I am having a problem with Ubermenu and GP. I haven’t seen this on any other site I use Ubermenu on, which is several. So I’m assuming there is a conflict somewhere with GP, though I don’t know whether it is the fault of GP or Ubermenu. I am running latest versions of both, as of an hour ago.
So when I use Ubermenu, I get a mobile menu icon that appears before my actual menu on desktop.
When I collapse down to smaller screen sizes, there are then TWO mobile menus, both with different stylings and positions, but still on top of each other stacked.
I wish I could give you a login, but it is only on a local server at the moment. Any idea what might be causing this? I can’t find anything in the Ubermenu settings to change this. If needed, I can try to create a live version of the site, but trying to avoid that.
Very happy with GP, and this is the only issue preventing me from finishing the transition! Help is appreciated! Thanks!
Brent
March 14, 2017 at 8:07 pm #291678LeoStaffCustomer SupportHi Brent,
Can you first try disabling it in Customizer > Layout > Primary Navigation > Navigation Location?
Let me know if this works.
March 14, 2017 at 8:09 pm #291680BrentJust tried it, and it removes both menus. So no luck unfortunately π
I know Ubermenu can work with GP as I’ve seen it recommended, so I’m sure it is a conflict somewhere. But just can’t figure it out since I haven’t had this problem previously.
For the record, previous theme was Avada, which they have had on their site for many years. So I’m excited to get them off of it π
Brent
March 14, 2017 at 8:12 pm #291687LeoStaffCustomer SupportThought that might happen…Can you try this CSS:
.main-navigation .menu-toggle { display: none !important; }
Adding CSS: https://docs.generatepress.com/article/adding-css/
Let me know.
March 14, 2017 at 8:20 pm #291688BrentThat seems to remove one of them on mobile sizes, but not on desktop resolutions. When using that CSS, it keeps the menu toggle that is shown on top in my image above, and removes the other menu. But again, only on mobile. I’m sure I could set up an !important rule or something using media queries, but would love to figure out if this problem is an actual conflict or not?
Thanks.
Brent
March 14, 2017 at 8:23 pm #291689LeoStaffCustomer SupportCan you try the code above again? I edited after posting it initially.
Can’t tell without seeing the site but some other user had similar problem before I believe: https://generatepress.com/forums/topic/uber-menu-issue/
Let me know.
March 14, 2017 at 10:34 pm #291738BrentOk, so an update. I tried the newer code above, but it didn’t work. I went to the thread you referenced and used the following code:
@media (min-width: 960px) {
.ubermenu-responsive-toggle-main.ubermenu-responsive-toggle-align-full {
display: none;
}
}It DID work……kind of. It makes everything work, but when the viewport is reduced below 768px, a second mobile menu still appears.
To make things easier, I have uploaded everything to a test site of mine that is live, and set everything to the state that I have them on the local site. You can see it here:
When you resize down below 768px, you will see the menu appear. It’s the one that is controlled by the Customizer>Layout>Primary Navigation. You can see I gave it a custom name, lol.
The kicker is that the menu in question that appears doesn’t even work. It doesn’t actually display any menu items when clicked. The other menu, which is supplied by Ubermenu, does.
Now, I know I can probably use another media query to hide that one. But I’m just thinking there might be another way. So look at the site above and see what you find, and if you need a login, I can send a Privnote to you or a private message or whatever you prefer.
Going to bed soon, so if I don’t reply right away, that’s why. But will try to stick around for a bit. Thanks!
Brent
March 15, 2017 at 12:35 am #291815TomLead DeveloperLead DeveloperThis should do it:
@media (max-width: 768px) { .main-navigation .menu-toggle { display: none; } }
March 15, 2017 at 2:28 pm #292436BrentThat code works π I kind of figured that would be the solution, but didn’t know if it was intended behavior or something that is worth addressing. I’m ok with the CSS answer (and using Simple CSS, which rocks!). So I appreciate the help!
Brent
March 15, 2017 at 3:42 pm #292468TomLead DeveloperLead DeveloperGlad we could help π
March 16, 2017 at 11:27 am #292989BrentSo just a quick question on this, if you can answer. Would it be cleaner to do the method above, with the menu in GP “turned on”, but being selectively hidden, or would it be cleaner to turn it off in the Customizer, and then insert the Ubermenu directly using GP Hooks? Any downside to that compared to the method discussed in this thread? Thanks.
Brent
March 16, 2017 at 11:33 am #292992LeoStaffCustomer SupportHi Brent,
I would say it would be cleaner if you can get it to work with GP Hooks.
Then GP menu wouldn’t be loaded then hidden by CSS. The speed maybe slightly faster πLet me know if this answers your question.
March 16, 2017 at 11:35 am #292993BrentThanks. That was kind of my thinking. I just didn’t know how much code was loaded (or turned off) based on having the GP menu load or not. I’ll do a test and see which is faster, but just wanted to be sure I wasn’t missing something. Thanks!
Brent
March 16, 2017 at 11:36 am #292994LeoStaffCustomer SupportSounds good. Let us know the result.
I’m interested to know if there would be noticeable difference as well πMarch 16, 2017 at 12:26 pm #293008TomLead DeveloperLead DeveloperMost likely wouldn’t be able to tell the difference speed-wise, but worth a shot π
-
AuthorPosts
- You must be logged in to reply to this topic.