[Support request] Mobile menu

[Sonador]

Hi,
I,m trying to recreate this header made with elementor. Got pretty close on desktop, but can’t make it work on mobile. Could you please point me in the right direction.

Thank you in advance.
Best regards,
Matko Petrović

[David]

Hi there,

if you created it with Elementor – then you will need to ask Elementor support for assistance as the Theme has no control over there code.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sonador]

It was created with elementor,but now I’m trying to recreate it without elementor, using GP Elements and GB.

[David]

Ah ok 🙂
Can i see the site ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sonador]

Sure, here it is
https://online-alat.gtf.hr/

[David]

Do you have a mockup image of how you would want the mobile layout to look ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sonador]

It should look just like the one in the first post.

[David]

Doh – that was kind of obvious 🙂

1. In Customizer > Layout > Primary Nav – remove the mobile menu label.

2. Add this CSS:

@media(max-width: 768px) {
    .main-navigation .menu-bar-items {
        margin-right: auto;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sonador]

Tnx David,
I will try that and get back to you.

[David]

OK – let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sonador]

Tnx David, that worked out great. Now I only need to make logo image a bit bigger and apply the same thing for sticky navigation.

[David]

Ok, try this CSS:

.mobile-header-navigation .site-logo.mobile-header-logo img {
    height: 80px !important;
    padding: 0;
}
.main-navigation.has-branding .menu-toggle {
    padding-left: 40px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts