Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 10, 2018 at 6:58 am #1007772
    L-mobileGroup

    Dear support

    I tried several older code examples of other posts to hide/ show menue items on different viewports. But it seems they are not working with the actual enfold version.

    May could give me some advice. What we want to do is:

    1. build a menue with items which are visible in desktop menue or mobile –> we give classes to the menue items –> how the css code has to look?
    2. which css codedo we need to disable the mobile menue and use the desktop menue under viewport 990px?
    3. if we want to use icons instead of text in mobile version how the css code has to be? or in which menue item field we have to put the icon code?
    4. is it possible to give a menue item more than one css class?

    thank you for your help Marc

    • This topic was modified 6 years, 2 months ago by L-mobileGroup.
    September 11, 2018 at 12:57 pm #1008370
    Nikko

    Hey Marc,

    1. Go to Appearance > Menus > Screen Options > check CSS Classes, then add class to those menus like mobile-only or desktop only and use those selectors to show/hide specific menus in desktop or mobile.
    2. You can use this code:

    @media only screen and (min-width:768px) and (max-width:990px) {
  .responsive #header_main_alternate {
    display: block;
  }

  .responsive #top .av-main-nav .menu-item {
    display: list-item;
  }
}

    if this doesn’t help, please give us a link to your site.
    3. You can use web inspector to know and select specific menu to add icons. I think you can use :before selector for that and use ‘entypo-fontello’ as the font.
    4. Yes, that’s possible just separate them with space.
    Hope this helps.

    Best regards,
    Nikko

    September 11, 2018 at 3:28 pm #1008437
    L-mobileGroup

    Hello Nikko

    thank you for help but we have some problems to work the menue out:

    1. we use this code to show/ hide menue-items. Does work in mobile view but in desktop view all items are visible.

    @media only screen and (max-width: 990px) {
.hsizeheadingmenu { display: none !important; }}
@media only screen and (min-width: 990px) {
.showonmobile { display: none !important; }}

    2. code is unfortunatelly not working. we want to disable mobile menue and use instead a alternate desktop version of the menue with two menue items which are linking to a own flyout menu

    3. i have to try, you may can write a code example for this?
    4. yes works this way.

    Thank you for your help Marc

    September 12, 2018 at 7:18 am #1008752
    Nikko

    Hi Marc,

    Can you give us a link to your site? so we can take a closer look.
    You can post the details in private content, so only the moderators can view it.

    Best regards,
    Nikko

    September 12, 2018 at 9:39 am #1008802
    L-mobileGroup

    Dear Nikko

    URL is: htttps://www.l-mobile.com
    Login data in private message.

    Also we got one more issue: If we enable the new enfold option to merge css and js – the lightboxes do not work properly anymore. If activated you cant go back while clicking outside the image . also the close cross is not visible.

    Thank you for your help Marc

    • This reply was modified 6 years, 2 months ago by L-mobileGroup.
    September 12, 2018 at 1:48 pm #1008905
    Victoria

    Hi Marc,

    Image 2018-09-12 at 14.47.49.png
    You can enable classes for the menu items in the screen options and add classes to the menu items that you need to control.

    Best regards,
    Victoria

    September 13, 2018 at 7:39 am #1009252
    L-mobileGroup

    Dear Victoria

    we know. This isn`t the problem of our thread. CSS class option is already active. Class/ code is not working the right way.

    Regards Marc

    September 13, 2018 at 11:48 am #1009336
    Nikko

    Hi L-mobileGroup,

    Thanks for giving us the link to your site.
    I have checked it and I couldn’t find the code you posted when I tried to inspect your site.
    As for 2, you can use this code instead:

    @media only screen and (min-width:768px) and (max-width:1366px) {
  #top .av_mobile_menu_tablet .av-main-nav .menu-item {
    display: block !important;
  }

  #top .av_mobile_menu_tablet .av-main-nav .av-burger-menu-main {
    display: none !important;
  }
}

    For 3, use this code:

    #avia-menu .hsizeheadingmenu > a:before {
    display: inline-block;
    font-family: 'entypo-fontello';
    content: '\e808';
    margin-right: 4px;
}

    As for the new issue you have, can you try to disable Autoptimize plugin and check.
    Let us know if this helps.

    Best regards,
    Nikko

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