Site branding alignment in mobile


#1

Hi!

May I know how to make it align nicely in mobile? (make hamburger, site branding and cart in 1 line above)

Thank you.

Regards
Manhua


#2

Hello Manhua, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

div.site-header__content {
    flex-wrap: nowrap;
}

@media (max-width: 480px) {
    img.custom-logo {
        max-width: 50px !important;
    }

    p.site-title {
        font-size: 28px;
    }

    p.site-description {
        font-size: 16px;
        line-height: 1.2;
    }
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.


#3

Hi Roman,

Thank you!

Is it possible to make the [0] next to the cart icon?

Regards
Manhua


#4

Hello Manhua,

Try to add this CSS code as well:

.nav-link-cart .header-cart-link {
    min-width: 56px;
}

Kind Regards, Roman.


#5

Hi Roman,

It is perfect now. Thank you!

Regards
Manhua


#6

Great! You are welcome Manhua :slight_smile:

Kind Regards, Roman.


closed #7