Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • #339312

    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!

    #339359

    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!

    • This reply was modified 10 years, 2 months ago by Eagles1227.
    #339816

    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!

    #340236

    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,
    Yigit

    #340288

    Added! Also added in the widget area.

    Thanks!

    #340310

    Hi!

    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,
    Yigit

    #340342

    Yes, 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!

    • This reply was modified 10 years, 2 months ago by Eagles1227.
    #342568

    Hi!

    Try with this code:

    #top .av-submenu-container {
        height: auto;
    }

    Regards,
    Josue

    #342762

    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!

    #342991

    Hey!

    Try with this code:

    @media only screen and (max-width: 767px) {
    .av-submenu-container .menu-item-has-children {
        pointer-events: none;
    }
    }
    

    Cheers!
    Josue

    • This reply was modified 10 years, 1 month ago by Josue.
    #343067

    Hmm, I added the code, cleared my mobile cache and tried an incognito tab, yet nothing.

    Anything else?

    Thanks!

    #343097

    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!
    Josue

    #343129

    Wups! 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…

    #343203

    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,
    Josue

    #343229

    Yes, that is correct. But I’d like to click the sub navigation items under that menu item.

    #343230

    Top Level Item (Non clickable)
    – Sub Level Item (Clickable)
    – Sub Level Item (Clickable)
    – – Sub Level Item (Clickable)
    – – Sub Level Item (Clickable)

    #343257

    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,
    Josue

    #343487

    Ok, 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
    – Blog

    All 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
    – Blog

    On 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,
    Tyler

    #345047

    Hey!

    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,
    Ismael

    #346047

    Hey!

    Next small update will include a few bugfixes regarding the mobile version of the submenu and also add some styling options ;)

    Regards,
    Kriesi

    #346081

    No rush! Just hope I helped.

    Thanks!

Viewing 21 posts - 1 through 21 (of 21 total)
  • The topic ‘Fullwidth Sub Menu Alignment Issues’ is closed to new replies.