Custom CSS for header Mobile only.

Store Design
1

Hey hey!

I’m looking for some help with custom CSS for my webshop for Mobile only!

Website: https://worldofmina.be/

I’d like my logo to be in the center with the icons (in the red square) under the logo as well in the center.

Thank you in advance!

WoMmobile.jpg
WoMmobile.jpg921×2048 106 KB

2

HI @WorldofMina ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

@media (max-width: 768px){
h1.header__heading {
    margin-left: -77px !important;
}

.header__icons{
    justify-self: auto !important;
}
}
3

Hey CodingFifty

Thank you for your reply, Would it be possible to also have all icons in the center under the logo?

Thanks in advance.

image.jpeg
image.jpeg921×2048 91.9 KB

4

Hi @WorldofMina ,

Try this code.

@media screen and (max-width: 768px) {
    #shopify-section-sections--23880637808978__header header.header {
        justify-items: center !important;
    }
}
5

Hey hey,
The logo is now out of position & the icons are on the left (with one of the right)

WoMmobile3.jpg
WoMmobile3.jpg921×2048 91.8 KB

6

@WorldofMina ,

@media (max-width: 768px){
h1.header__heading {
    margin-left: -77px !important;
}

.header__icons{
    justify-self: auto !important;
}
#shopify-section-sections--23880637808978__header header.header {
        justify-items: center !important;
    }
}
7

Thank you very much @CodingFifty
That did the trick!

8

Sorry @CodingFifty to bother you again but on IOS it looks different.

WoMmobile4.jpg
WoMmobile4.jpg947×2048 110 KB

9

@WorldofMina ,

@media (max-width: 768px){
h1.header__heading {
    margin-left: -77px !important;
}

.header__icons{
    justify-self: auto !important;
}
#shopify-section-sections--23880637808978__header header.header {
        justify-items: center !important;
    }
header-drawer {
    justify-self: left;
    margin-left: -1.2rem;
    margin-top: auto !important;
}
.header__heading-logo {
    height: auto;
    max-width: 65% !important;
    margin: 0px auto !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin-left: 100px !important;
}
}
10

IOS looks good but now it looks off again on Android.

I hope I’m not being too annoying.

WoMmobile5.jpg
WoMmobile5.jpg921×2048 88.4 KB

11

@WorldofMina

Set the margin-left value, which is currently 100px, according to your preference by increasing or decreasing it as needed.