Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • December 8, 2017 at 12:35 pm #886456
    Biggy

    Hi,
    we used in some sites images in the mega menu. Since version 4.1.2 this images are shown in the mobile version.
    In the past this images had the css #mobile-advanced .avia_mega_text_block img { display: none !important;}
    In the actually version it is not possible to hide the images in the responsive mode. (smartphone)
    we tested #top #header .avia_mega_div .sub-menu .avia_mega_text_block a { display: none !important;} but without success.
    Do you have any idea to hide this images in the responsive mode. @media only screen and (max-width: 767px)

    Regards
    Biggy

    December 8, 2017 at 8:35 pm #886605
    Victoria

    Hey Biggy,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    December 9, 2017 at 1:24 pm #886808
    Biggy

    Hi,
    you need more context to understand this simple question?
    Ok… in enfold it is possible to integrate images in the mega menu. You have this video online to declare it:

    Since enfold version 4.1 are many changes in the layout.css. Before enfold 4.1 we had the following style for images in mega menu when appears in responsive mode, for example in a smartphone. On line 4154: #mobile-advanced .avia_mega_text_block{display:none;}
    It makes no sense to show the image in smartphone.
    But since version 4.1 we missed the display: none for images in mega menu.
    And now the question: How to hide this images in the responsive mode. @media only screen and (max-width: 767px)

    Regards
    Biggy

    December 10, 2017 at 1:26 am #887012
    Mike

    Hi,
    Have you tried adding a class to your image tag?

    <img src="images/happyface.jpg" height="45" width="55" alt="happy" class="megaimg">

    Then use the display none rule

    @media only screen and (max-width: 767px) {
img.megaimg {display:none;}
}

    Best regards,
    Mike

    December 10, 2017 at 12:35 pm #887086
    Biggy

    Hi Mike,
    yes, we tried it. And we have a own solution: .responsive .av-burger-overlay img{ display:none !important;}
    But we have always the li with 2 borders in the responsive mode.
    The images in the mega menu have a link (link to the site. And so we have a sub-menu. How to hide this. I can hide this sub-menu only with the item ID?
    In the past this way to include a image in mega menu had the class .avia_mega_text_block
    And it was possible to hide with this class the images with link in responsive mode. But now it is not more possible to do that.
    We found our solution to hide the images and the li with this css:
    For the images: .responsive .av-burger-overlay img{ display:none !important;}
    For the li : .responsive ul.sub-menu li.menu-item-000 { display:none !important;} For the ID (000) you have to include the item id
    If you have a better solution please give us the details.
    If not you can close the topic.
    But always thanks for your help!

    Regards
    Biggy

    December 11, 2017 at 3:55 am #887205
    Mike

    Hi,
    Yours is a good solution, and sense the the class .avia_mega_text_block has been removed, it may be the best solution. What I liked about my solution is that I added my own class and didn’t need to use any IDs or Enfold classes. But I don’t have a better solution.
    Thank you for sharing your solution, shall we close this then?
    Thank you for using Enfold.

    Best regards,
    Mike

    December 13, 2017 at 3:14 pm #888378
    Biggy

    Hi Mike,
    yes…please close the topic.
    Regards
    Biggy

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.