[Resolved] Need Help With CSS Design

[Pranav]

Hello,

I am using GP with elemetor pro and woocommerce. I need a small help related to css. How to increase the width of header in mobile. Please see the attactment.

My website URL is https://www.siddhs.com

Please open in mobile view and see it. I want to remove the leading and trailing space of navigation in mobile view.

[David]

Hi there,

in Customizer > Layout > Header – switch to Mobile view and adjust the Header Left and Right padding to give it more space.

Make sure to clear the autoptimize cache if the change doesn’t show on the frontend.

[Pranav]

Thanks For Outstanding Support & Quick Replay.
One more thing how can I change order of search and cart icon in main navigation?

[David]

Try adding this CSS:

@media (min-width: 769px) {
    nav li.wc-menu-item {
        float: left;
    }
}
@media (max-width: 768px) {
    .inside-navigation {
        display: flex;
    }
    .main-navigation .menu-toggle {
        order: -1;
        margin-right: auto;
    }
}

[Pranav]

Ya, its really really works. Seriously, guys, you all are truly good helper. Thank you. Namaste

[Pranav]

Thanks

[David]

Glad to be of help

[Author]

Posts