Responsive menu on iPad

  • Resolved adrianmroberts

    (@adrianmroberts)


    4 years, 1 month ago

    The responsive menu shows a “hamburger” icon for the menu below the header. This is fine on phones, but on iPad, it would seem sensible to show the full text of the menu items, as on desktop. Is this customisable?

    Thanks.

Viewing 4 replies - 1 through 4 (of 4 total)
  • blossomthemessupport

    (@blossomthemessupport)

    Hi @adrianmroberts,

    Can you please provide me your site link so that I can look into your requirement further?

    Thread Starter adrianmroberts

    (@adrianmroberts)

    Thanks. It is rangitoto.co.uk Please note it is in early development, so you may see strange things coming and going ??

    blossomthemessupport

    (@blossomthemessupport)

    Hi @adrianmroberts,

    You can use the below CSS code to show the extended menu in small screen sizes:

    @media screen and (min-width: 768px) and (max-width: 1024px) {
    .main-navigation button.toggle-button {
    display: none;
    }
    .main-navigation .primary-menu-list {
    display: block;
    position: unset;
    background: unset;
    height: unset;
    width: unset;
    z-index: unset;
    padding-top: unset;
    overflow-y: unset;
    text-align: unset;
    box-shadow: unset;
    }
    .main-navigation .close-main-nav-toggle {
    display: none;
    }
    .main-navigation .primary-menu-list .mobile-menu {
    width: unset;
    }
    .main-navigation ul li {
    display: inline-block;
    }
    .main-navigation ul li a {
    border-bottom: unset;
    }
    .main-navigation ul li.menu-item-has-children .submenu-toggle {
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 17px;
    }
    .main-navigation ul ul {
    position: absolute;
    }
    }

    Thread Starter adrianmroberts

    (@adrianmroberts)

    Thanks very much for your help. It works perfectly.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Responsive menu on iPad’ is closed to new replies.