Menu inline with logo on mobile version

Hi there,

I was worndering if its possible to make the top mobile menu inline with the logo… Currently, I only have logo and under it just the menu hamburger icon. A lot of space has been wasted…
I want that menu icon inline with the logo (menu icon on the preferably on the left or right)… Is it possible?

I’d appreciate your help here.

regards

Hi,

Please post a link to your website, so I can check.

Kind Regards,
Csaba

site: ******* (on the mobile version), I need menu hamburger icon inline with the logo…

I will appreciate any help…

edit: I have hid the top menu icon on home page, so please refer to any other page to see what i mean…

Hi,

You can make the mobile menu logo and hamburger inline with this Custom CSS:

@media only screen and (max-width: 767px) {
.site-branding {
    width: 50% !important;
    text-align: left !important;
    display: inline-block !important;
}

.mobile-nav .slicknav_menu {
    text-align: right !important;
}

.mobile-nav, .s-mobile-nav {
    display: inline-block !important;
    width: 50% !important;
}
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Kind Regards,
Csaba

Hello,

Thanks for your quick reply and help. It worked. However, it caused two problems.

  1. The shop page left margin is disturbed. It is not centered anymore… can you please see the screenshot below to understand what I mean.

  2. The positioning of side menu (the one on the left of slider) has gone bad and it looks ugly now… Is it possible to fix that one like it was used to be. If not then just take it off completely in the mobile version. please see the screenshot below to understand what I mean.

Thank you for your help, it really means a lot…
I will try to contribute as much as possible to the community.

I will appreciate your reply.
thanks

Hi,

On the Shop Page the margin issue is resolved if you remove the CSS I gave you? Please check and let me know and also let me know if you want to change anything on the margin on the shop page, then please add the CSS back in place, so I can check the secondary menu issue.

Kind Regards,
Csaba

Hi,

  1. Sorry my bad. The css code didn’t cause the shop margin issue. Even if I remove your CSS, it still stays the same. and yes, I’d preferable want the shop page content to be centered on the mobile version too.

  2. However, yes the CSS did cause the secondary menu issue, it fixes if I remove the CSS.

Thank you so much again… I know I am bothering you a lot. I have put the css back in place now.

Hi,

  1. You can remove the empty white space on the shop page with this Custom CSS:

    @media only screen and (max-width: 1024px) {
    .post-type-archive-product.woocommerce .content-area {
    padding-left: 0 !important;
    }
    }

  2. You can fix the secondary menu issue with this Custom CSS:

    @media only screen and (max-width: 767px) {
    #secondary-nav .mobile-nav, #secondary-nav .s-mobile-nav {
    display: block !important;
    width: 100% !important;
    }
    }

Please let me know how it works.

Kind Regards,
Csaba

1 Like

hey there,

I apologise for the late reply. This fixed all the issues! thank you so much… really appreciate that… We can mark this as sovled now! :slight_smile:
Thank you so much again for your kindness.

Regards

Hi,

Great! You’re most welcome! If you need help with anything else, please open a new topic.

Have a nice day!

Kind Regards,
Csaba

1 Like