Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • November 6, 2019 at 4:41 pm #1154324
    andersart

    Hi,
    the burger menu is not displayed on the iPad. Everything is fine with the smartphone. In WordPress Mobile Preview, the burger menu is also displayed. What do I have to change?
    Thank you.
    Best regards,
    Nadja

    November 6, 2019 at 9:40 pm #1154443
    Jordan Shannon

    Hey andersart,

    Add this to quick css:

    @media only screen and (max-width: 1024px) {
  nav.main_menu {
    display: block !important;
  }
  #avia-menu .menu-item {
    display: none;
  }
  .av-burger-menu-main.menu-item-avia-special {
    display: block;
  }
}

    Best regards,
    Jordan Shannon

    November 7, 2019 at 11:21 am #1154576
    andersart

    Hi Jordan,
    that did not help.

    The page is not very simple. For the desktop version I use the element “full width submenu” and hide the normal menu bar with the logo. In the mobile version then the burger menu should appear, also in the version for the tablet. That works in the WordPress preview as well. But if you log on to an iPad in the WordPress Dashboard, the menu does not jump to the burger menu. I attached a few screenshots. (private) I have used this code and I just do not know how to change it.

    /* Header */

    .logo { display: none !important; }

    @media only screen and (max-width: 767px){
    .responsive #top #wrap_all .main_menu {
    top: 20px!important; }}

    /* Header Menü ausblenden */
    @media only screen and (max-width: 768px) {
    .hide-on-mobile { display: none !important; }}

    @media only screen and (min-width: 768px) {
    .hide-on-desktop { display: none !important; }}

    .header_color .header_bg{
    background-color:transparent !important;
    }

    .logo-header-abstand {
    bottom: 65px;
    }

    @media only screen and (max-width: 767px) {
    .responsive #top .av-main-nav .av-burger-menu-main {
    position: fixed;
    top: 40px;
    right:25px;
    }}

    Thank you for your help,
    andersart

    • This reply was modified 5 years, 3 months ago by andersart. Reason: i added wrong screenshots
    November 10, 2019 at 9:28 pm #1155405
    Mike

    Hi,
    Sorry for the late reply, Jordan’s css worked for me when I tested, I made a couple of adjustments based on your screenshots,
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 1440px) {
  nav.main_menu {
    display: block !important;
  }
  #avia-menu .menu-item,#sub_menu1 {
    display: none !important; 
  }
  .av-burger-menu-main.menu-item-avia-special {
    display: block !important; 
  }
}

    After applying the css, Please clear your browser cache and check.
    Please see the screenshot in Private Content area.

    Best regards,
    Mike

    November 11, 2019 at 2:45 pm #1155625
    andersart

    Hi Mike,
    thank you very much. This works perfekt.
    Best regards,
    andersart

    November 11, 2019 at 4:26 pm #1155652
    andersart

    Hi Mike,
    There is still a problem. The burger menu on the iPad is empty. If you click on it comes only a white area.
    Screenshot in Private Content.
    Best regards,
    andersart

    November 12, 2019 at 3:59 am #1155794
    Rikard

    Hi,

    You have a class assigned to your menu items which is hiding them on tablet and larger screens:

    @media only screen and (min-width: 768px) {
.hide-on-desktop {
    display: none !important;
}
}

    Best regards,
    Rikard

    November 12, 2019 at 11:49 am #1155969
    andersart

    Hi,
    When hiding the code, the burger menu appears with content. But now I have the problem that the menu appears again in the header. Screenshot attached. We only need the menu under the header image in desktop view.
    Thank you,
    Best regards,
    andersart

    November 12, 2019 at 3:59 pm #1156034
    andersart

    Hi,
    The problem with the burger menu is done.
    But now I have another problem and unfortunately I can not figure out what it can be.
    I’ve created different headers for the different screen sizes. For the iPad but not the picture is inserted, what I have deposited. It will take the picture for the desktop version. This will cut the picture. I have attached two screenshots. I hope I could describe exactly where the problem is.
    Thank you,
    Best regards,
    Nadja

    November 13, 2019 at 12:49 pm #1156377
    Mike

    Hi,
    I took a look at your page and see that one of your headers is for mobile and tablet:
    2019-11-13-053048
    which is a large area to cover, perhaps making these two different headers would be better, or you could adjust with css like this:

    @media only screen and (min-width: 1024px) and (max-width: 1440px) {
 .av-parallax-inner {
    height: 70% !important; 
}
}

    Best regards,
    Mike

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