How can I center the icon and text on my announcement bar?

Store Design
1

Hi there, today I added a code to the very top of the header.liquid section. It’s an announcement bar with a geolocation feature. It seems to be working fine, but I would like to position the icon and text at the center of the bar rather than having it positioned on the left, however I have no knowledge of coding. Could you help me out by positioning the icon and text at the center of the bar? I will anex a picture to further clarify what I want. Also, below I will copy and paste the code exactly as it is in my store so you can see if you can help me out.

:root { --cor-da-barra: #E91B26; /* COR DA BARRA */ --cor-do-texto: #D4AF37; /* COR DO TEXTO */ --cor-do-icone: #D4AF37; /* COR DO ÍCONE */ } .mobile #barra {float: left;padding: 12px 0px 12px 7px;height: 100%;width: 1400px;margin: 0 auto;} .modelo {background-color: var(--cor-da-barra);color: var(--cor-do-texto);height: 44px;width: 100%;display: flex;} .mobile #barra #bloco {float: left;height: 20px;display: inline-block;width: 85%;} .mobile #barra #bloco .continuo {float: left;clear: both;font-size: 13px;line-height: 20px;display: inline-block;width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} .mobile #barra #icone {background-position: -75px -340px;width: 20px;height: 20px;float: left;margin: 0px 4px 0 0px;} .biline {background-size: 275px;} @media (max-width: 768px) { .mobile #barra {width: 100%;} .mobile #barra #icone {margin: 0px 4px 0 20px;} }

Captura de Tela 2022-09-14 às 14.45.58.png
Captura de Tela 2022-09-14 às 14.45.58.png2532×1146 297 KB

1 Like
2

Hi @matteo_p

Do you mind sharing your website so we can provide a code specific for you?

3

feirinhadachina.com.br

4

Hi @matteo_p ,

Here you go

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the theme.scss.css
  3. Paste the code below at the very bottom of the file.
.modelo.mobile #barra #bloco {
    width: unset;
}

.modelo.mobile #barra {
    display: flex;
    align-content: center;
    justify-content: center;
}
5

Hi

Thank you so much for helping me. This is almost exactly what I was looking for. For some reason the text seems to be slightly more to the right. I’m not sure how much this can affect my conversions but this lack of alignment of the text with the logo and url bothers me a bit. Is it possible to do a slight change to the code or is there a way for me to do this manually? I will anex a photo for you to see.

IMG-0585.PNG
IMG-0585.PNG828×1792 201 KB

6

Hi @matteo_p

You can add this code below

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the theme.scss.css
  3. Paste the code below at the very bottom of the file.
@media (max-width: 768px) {
.mobile #barra #icone.biline {
    margin: 0px 4px 0 0px;
}
}
7

Hello again,

I appreciate your help. The position of the text did get better but unfortunately it’s still not perfectly centralized. It’s visible that the text is still slightly more to the right. Could you please make one more effort to help me out by moving the text a bit more to the left?