Return to previous page

Change the mobile header - by javigilta - on WordPress WooCommerce support

This topic has 6 replies, 2 voices, and was last updated 6 years, 1 months ago ago by Rose Tyler

javigilta

Participant

September 24, 2018 at 09:47

Hello,

I have a simple header on my pc version with the logo, the cart and one menu option:
https://prnt.sc/kxzdda

However, on the mobile version I have the logo, the cart and the dropdowm menu:
https://prnt.sc/kxzey2

Is it possible to change the mobile header to have the same distribution than the pc header?

Thanks!
Javi

#199850 Copied Theme version: 5.0

5 Answers

Rose Tyler

Support staff

September 24, 2018 at 09:52

Hello,

There is no such possibility, by default.
Please provide us with your site URL so we can check if the desired result can be achieved using custom css code.

Regards

#199851 Copied

javigilta

Participant

September 24, 2018 at 10:06

Thanks!

#199852 Copied

Rose Tyler

Support staff

September 24, 2018 at 10:26

Hello,

Please add this code in Theme Options > Styling > Custom css > Global custom css:

/* header */
@media only screen and (max-width: 992px){
    .header-xstore .menu-wrapper {
        display: block !important;
    }    
    .menu-wrapper>.menu-main-container>.menu>li a {
        font-size: 12px;
    }
    .header-wrapper .navbar-toggle {
        display:  none !important;
    }
    .header-xstore .header-logo {
        float:  left;
    }
    .header-xstore .menu-wrapper {
        width:  100% !important;
    }
    .header-xstore .menu-wrapper {margin-top: 1%;}
}
@media only screen and (max-width: 480px){
    .menu-wrapper>.menu-main-container>.menu>li {
        padding: 0px 10px;
        margin-right: 25px !important;
    }
}

Regards

#199853 Copied

javigilta

Participant

September 24, 2018 at 10:37

Thanks Rose!

Now it’s working, but not with the fixed header.

How can I put it also in the mobile fixed header?

Thanks again 🙂

#199856 Copied

Rose Tyler

Support staff

September 24, 2018 at 10:40

Please change the previous code to:

@media only screen and (max-width: 992px){
    .menu-wrapper {
        display: block !important;
    }    
    .menu-wrapper>.menu-main-container>.menu>li a {
        font-size: 12px;
    }
    .navbar-toggle {
        display:  none !important;
    }
    .header-logo {
        float:  left;
    }
    .menu-wrapper {
        width:  100% !important;
    }
    .menu-wrapper {margin-top: 1%;}
}
@media only screen and (max-width: 480px){
    .menu-wrapper>.menu-main-container>.menu>li {
        padding: 0px 10px;
        margin-right: 25px !important;
    }
}

Regards

#199857 Copied