Mobile Menu Layout

Support
#1

Hi Guys

Looking to stop the menu bunching up when switching to mobile and tablet.

Want the logo to move below the menu and the menu and logo to be centralised.

http://dev.wmdyer.co.uk/
Help please :slight_smile:

#2

Hi There,

Please add the following code to Theme Options CSS

.ubermenu-skin-black-white-2.ubermenu-responsive-toggle, .ubermenu-skin-black-white-2.ubermenu-responsive-toggle:hover {
    background: none;
    margin-top: 30px;
    box-shadow: none;
}

Hope it helps

#3

Hello the logo and menu are directly underneath each other now which doesnt look right and there is a light black background. The menu should be above the logo and stay on screen.

Thank you

#4

Hi there,

Please try this code:

@media (max-width: 767px) {
    .ubermenu-skin-black-white-2.ubermenu-responsive-toggle {
        width: 100%;
        float: left;
    }

    .x-navbar-inner .x-container {
        display: flex;
        flex-direction: column;
    }

    .x-brand {
        order: 2;
        text-align: center;
        margin-bottom: 25px;
    }

    .ubermenu-skin-black-white-2.ubermenu-responsive-toggle {
        order: 1;
    }

}

Hope this helps.

#5

Were do I need to place this code please?

#6

Hi there,

Add it in the Global CSS panel which is in X > Theme Options > CSS.

Hope this helps.

#7

hello, it doesnt appear to have worked, can I fire the login details?

#8

Hello @Ormerod,

Thanks for updating the thread. :slight_smile:

Please share login details in a secure note for us to take a closer look.

Thanks.

#10

hello please see below

#11

Hi there,

The code did not work when you added it in the global CSS area because you had a CSS error where you forgot to close the CSS block for .wpcf7-form.

I have gone ahead and fixed it and the mobile menu button should display on top of the logo now.

#12

Thank you, can you please remove the grey background.

#13

Hi there,

Please update this code:

.ubermenu-skin-black-white-2.ubermenu-responsive-toggle {
    order: 1;
}

to

.ubermenu-skin-black-white-2.ubermenu-responsive-toggle {
    order: 1;
    background-color: transparent;
    box-shadow: none;
}
#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.