Vertical Menus on Mobile

  • aaronthomas1979

    #49532

    Hi everyone.

    On mobile devices, my header menu items are displaying horizontally, as they would on a desktop.

    However, it doesn’t look good that way; it would look better if they were vertical, like on the graphene forums page.

    (Vertical on Graphene Site)

    I looked through the settings, hoping to find a control for this, but I don’t think there is one.

    Is there a CSS fix for this?

    Mabul

    #49533

    The imgur link in your post isn’t working

    aaronthomas1979

    #49534

    Sorry about that. Please re-try. Thanks!

    Mabul

    #49535

    Hm, shouldn’t it be vertical in mobile by default? If you look at the Graphene theme demo https://demo.graphene-theme.com/ on mobile, the menu is vertical as well. Could it be that you have made changes to it?

    aaronthomas1979

    #49536

    You were right. This was happening because I was floating my header menu right, which looked good on desktop, but was messing things up for mobile.

    Do you happen to know of a safe way to float the menu right for desktop only?

    Mabul

    #49538

    Does this work for you?

    #header-menu {
    float: right
    }

    aaronthomas1979

    #49541

    It does.

    My big problem was that I was trying to float one menu item (Logo) left, and the others to the right. It seemed pretty challenging for me, so I decided to just use the header menu for mobile, and the secondary menu for desktop. (Easier)

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

You must be logged in to reply to this topic.