-
Posts
-
Not sure if you are aware of this, but your Fullwidth Sub Menu disappears when the window is resized or on mobile. Therefore, it makes it useless, unfortunately.
http://tjmpropertygroup.com/philadelphia-condos/
For what it’s worth, it was such a great idea!! Hope this gets fixed soon. Also, just a suggestion, have the option for a custom color / styling.
Thanks!
On a side note, does something look off with my sidebar widget area? I added it in using the layout builder on the page. They styling seems off. Also, is the dividing line supposed to separate the widget area and text area, as it does on the sidebar templates?
Page Edited – here is a screenshot: http://tinypic.com/r/a5gb50/8
Thanks!
Sorry to load on the issues, but hopefully it’ll help you smooth out everything for new users –> $$!!
I tried consolidating the “Fullwidth Sub Menu” as a dropdown menu. It works fine on a desktop, but not at all on a mobile device. The issue is, when clicked, it is directed to the top level url. As a result, user, such as myself, cannot have sub level navigations using this feature.
It would be nice if the mobile properties applied to the fullwidth sub menu as they apply to the main header menu. Just a thought.
Thanks!
Hey!
Can you please remove dropdown from the element and let us know so we can provide you accurate custom CSS for a fix?
Best regards,
YigitHi!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
@media only screen and (max-width: 1340px) and (min-width: 770px) { #top .av-submenu-container { height: 100px; }} @media only screen and (max-width: 769px) and (min-width: 540px) { #top .av-submenu-container { height: 165px; }} @media only screen and (max-width: 539px) { #top .av-submenu-container { height: 210px; }}Best regards,
YigitYes, that does work for one Submenu, however, if I implement 2, 3, 4 or even more of this feature on different pages, the dimensions will be effected, resulting in a look that is not appealing. As a fix, that unfortunately will not do the trick. Is there a way to have the menu float automatically?
In terms of the top-level menu item on mobile, any recommendations to address that issue? Recap: When selected, submenus are not shown. The behavior is not that of the primary navigation, where a top level navigation page must be double clicked to view that page, or clicked once to see the sub levels.
Also, any update on the sidebar?
Thanks!
That worked!
I’ve also searched how to make the top level navigation property of that Fullwidth Sub Menu non clickable on mobile. Meaning: on mobile, I cannot view sub level navigation links. I have removed the link in the menu settings of WordPress, but when clicked on mobile, it just refreshes the page.
The menu is on the same page under: “Select A Neighborhood.”
Thanks!
Hmm, I added the code, cleared my mobile cache and tried an incognito tab, yet nothing.
Anything else?
Thanks!
Hey!
The code has been copied wrong, make sure it is exactly like this:
@media only screen and (max-width: 767px) { .av-submenu-container .menu-item-has-children { pointer-events: none; } }Cheers!
JosueWups! The mobile part of the code did not show in my email – weird. But, I just added the code and now I can not click the navigation option.
Hmm…
I’ve also searched how to make the top level navigation property of that Fullwidth Sub Menu non clickable on mobile.
I understood that’s the behavior you wanted.
Regards,
JosueTop Level Item (Non clickable)
– Sub Level Item (Clickable)
– Sub Level Item (Clickable)
– – Sub Level Item (Clickable)
– – Sub Level Item (Clickable)Hey!
I’m not sure if that’s possible to do to be honest. One thing you can do is re-create those submenus as top level menus for mobile devices, you can assign custom classes to menu item while editing them, for example “only_desktop” and “only_mobile”, Quick CSS to add would be:
.only_desktop{ display: none; } @media only screen and (min-width: 767px) { .only_desktop { display: inline-block; } .only_mobile { display: none; } }Regards,
JosueOk, I am not sure if we are understanding each other – let’s start over.
The way a navigation menu works, as you know, is, there are top level items:
– Home
– About
– Services
– BlogAll of these are clickable to go to that respective page (or post, depending how you have it setup).
Then, there are menu items under those top level items, which I will call, sub level items (Buy, Sell, Invest):
– Home
– About
– Services
– – Buy
– – Sell
– – Invest
– BlogOn a desktop, using your fullwidth menu feature, everything works as it should. I am able to navigate the navigation menu without any issues.
However, when using your fullwidth menu feature on mobile, I cannot navigate to those sub level items. Why? Because when I click on the top level item, which houses the sub level items, the page is refreshed, rather than giving me an option to choose from those sub level items.
In short, your fullwidth menu feature DOES NOT work like the navigation properties of the main navigation at the top of the page.
To see the problem for yourself, as is, please go to http://tjmpropertygroup.com/philadelphia-condos/ on a mobile device (I am using an iPhone – chrome & safari) and try to see the sub level items under “Select A Neighborhood.” As you will see, you CANNOT see those options. Instead, as previously mentioned, the page is refreshed with a link of: http://tjmpropertygroup.com/philadelphia-condos/#.
Thanks,
TylerHey!
Thank you for the info.
We reported the issue to Kriesi. Please wait for his response. For now, please hide the fullwidth sub menu on mobile devices via css. Add the menus either on your main menu or the secondary menu on top of the header.
@media only screen and (min-width: 768px) { #top .av-submenu-container { display: none !important; } }Best regards,
IsmaelHey!
Next small update will include a few bugfixes regarding the mobile version of the submenu and also add some styling options ;)
Regards,
Kriesi
- The topic ‘Fullwidth Sub Menu Alignment Issues’ is closed to new replies.