Two row menu shows only one row for mobile

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


    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>
    and the css is:
    .centeredmenuitem {text-align: center;}
    Of course you can see the result on

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

    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 7 years, 8 months ago by iboregua.
    Daniel Tara

    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;

    It did indeed!

    Thank you very much – that was quick!

    Best regards!


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

You must be logged in to reply to this topic.