Tagged: , ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • June 27, 2017 at 3:55 pm #813493
    waveshaper

    Hi there

    I would like to provide access to both category landing pages and mega menus in the absence of hover on mobile with a message e.g.
    “Touch the arrow to view sub pages…” at the top of the menu for mobile visitors to my site.

    Is there a way to achieve this with Enfold? Could you direct me to a link which explains how?

    Thank you for your time.

    Cupertino Website Mobile Menu

    June 28, 2017 at 4:16 pm #813926
    Victoria

    Hey waveshaper,

    The website did not load, but normally top level menu item is not a link, it opens the submenu on click. Or you need to add arrows like you suggested. We need to check first, please get back to us when the site is back up.

    Best regards,
    Victoria

    June 28, 2017 at 5:07 pm #813968
    waveshaper

    Hi Victoria
    Thank you for looking into this.
    The site loads fine on my side.
    Please check again.

    June 29, 2017 at 1:23 pm #814432
    Victoria

    Hi waveshaper,

    Your menu does not have submenues, so the arrows will not show anything.

    Best regards,
    Victoria

    June 29, 2017 at 3:38 pm #814540
    waveshaper

    Hi Victoria
    Ok, first let me add some.
    What I would like to do is hide the sub-menus from desktop view and only display them on mobile, is that possible?
    What is the correct way to achieve that?
    Is the only way to do it to add a custom class and e.g.

    @media only screen and (min-width: 769px) {
    .only_mobile { display: none !important; }}

    @media only screen and (max-width: 768px) {
    .only_desktop { display: none !important; }}`

    As when I apply the above CSS, the dropdown still appears on desktop, no text in the dropdown menu but a colored block appears.
    Thanks a mill

    • This reply was modified 7 years, 4 months ago by waveshaper.
    July 5, 2017 at 3:54 am #816567
    Ismael

    Hi,

    Thank you for the update.

    Which of the menu items are you trying to modify? I checked the menu items’ markup but I don’t see the class attributes.

    Best regards,
    Ismael

    July 5, 2017 at 11:12 am #816691
    waveshaper

    Hi Ismael
    Thank you for taking the time to look into this.

    You will see I added a drop-down menu for the 2nd main menu item, I wish to add drop-down menus for all product categories but only to be visible on mobile/tablet views.
    Please see in Chrome Browser, even though I hid the drop-down menu item for desktop, there still appears a drop-down menu “box” without text.
    I wish to hide the drop-down menus for desktop and only show them on mobile/tablet views.
    thanks

    Drop-down menu item appears even though it is hidden for desktop view

    • This reply was modified 7 years, 4 months ago by waveshaper.
    July 10, 2017 at 3:41 am #818511
    Ismael

    Hi,

    Thank you for the update. I’s sorry but I don’t see that box in the page.

    Best regards,
    Ismael

    July 10, 2017 at 2:43 pm #818759
    waveshaper

    Hi Ismael
    I had to remove it as I saw no replies, I placed it there again no, please check as soon as possible.
    In firefox it is hidden except for a dark bottom border. In Chrome it is not hidden at all.
    Thank you for your time.

    July 11, 2017 at 10:34 am #819212
    Ismael

    Hi,

    I’m sorry but I can’t still see the box. How can we reproduce the issue? Please post the login details here.

    // http://imgur.com/a/I4kJZ

    Best regards,
    Ismael

    July 11, 2017 at 2:47 pm #819373
    waveshaper

    Hi Ismael

    If you hover over the main menu item “Metal Detectors” you will see the drop-down menu item “New Products and Specials” even though I hid it for desktop and allowed it only to display on Mobile/Tablet through CSS.

    Dropdown Menu displays on desktop even though hidden in CSS - Chrome

    This happens in Chrome,Opera and IE. In Firefox it is hidden but the drop-down menu border still shows up.
    Do you see this on your side?

    CSS I used is –

    `@media only screen and (min-width: 769px) {
    .only_mobile { display: none !important;opacity:0!important; }
    }

    @media only screen and (max-width: 768px) {
    .only_desktop { display: none !important;opacity:0!important; }}

    Thanks

    July 12, 2017 at 5:50 am #819793
    Ismael

    Hi,

    Thank you for the clarification.

    You need to hide the whole mega menu container. Please add the following css code inside the desktop media query.

    .avia_mega_div {
    display: none !important;
}

    Best regards,
    Ismael

    July 12, 2017 at 11:01 am #819922
    waveshaper

    Hi Ismael
    Beautiful, thank you, thank you!
    It is working now.
    Excellent support!
    You can close this thread if you like.
    Cheers

    July 12, 2017 at 12:23 pm #819953
    Sarah

    Hi,

    We’re glad that Ismael was able to help you! For any other questions or issues, feel free to post them here on the forum and we will do our best to assist you.

    We’d also appreciate it if you can take a moment to review our theme if you haven’t already. https://themeforest.net/downloads

    Thank you for using Enfold.
    Cheers!
    Sarah

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Mobile Menu Drop Down Categories / Subcategories’ is closed to new replies.