Two row menu shows only one row for mobile

Viewing 3 posts - 1 through 3 (of 3 total)
  • #22697
    iboregua
    Participant

    Hello,

    I tried to write a menu item on the main menu in two rows. I achieved that by writing the following HTML the Menus | Menus structure where there should be a name of the menu item:
    Language<br><div class=”centeredmenuitem”>Classes</div>
    MENU_ITEM
    and the css is:
    .centeredmenuitem {text-align: center;}
    Of course you can see the result on wordimagine.com

    Well, my mobile the menu shows only the first row like that:
    MOBILE_MENU_ITEM

    Can you tell me where I could enable the mobile version to show two rows?

    Beside that I cannot control the behaviour through Customize section clicking the mobile icon at the bottom of the customize section. When the page shrinks a click on the menu button does not expand the menu.

    • This topic was modified 8 years ago by iboregua.
    #22699
    Daniel Tara
    Keymaster

    This CSS should fix the issue:

    @media screen and (max-width: 760px) {
        #access:target .menu a {
            height: auto !important;
            max-height: 80px;
            transition: max-height .25s, line-height .25s;
        }
    }
    #22700
    iboregua
    Participant

    It did indeed!

    Thank you very much – that was quick!

    Best regards!

    Igor

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.