How can I center my logo in the Debut theme header?

Store Design
,
1

Hey guys.

Hoping for some assistance with centering my logo image in the Debut theme.

I have successfully increased the maximum logo size using the following code:

.site-header__logo img {
width: 500px!important;
max-width: 500px!important;
display: block;
margin-left: auto;
margin-right: auto;
}

The logo image is larger, but since being resized, is not centered with the menu text below it.

For reference:

Website:

https://celsiusmedicinals.com/

Password:

Optimal

Thanks in advance!

2

Hi @Lawson_1 , I viewed the website but it appears to be in the center to me. Have you solved the problem already?

3

Hi Musfirah.

I had deleted the code temporarily.

It is back now to the increased size, but off center, if you would have another look!

Much appreciated.

4

In your theme.css file find this code

Musfirah_0-1672639163011.png
Musfirah_0-1672639163011.png276×123 7.61 KB

Replace it with the following code:

.site-header__logo img {
    width: 350px!important;
    max-width: 350px !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Find this code:

Musfirah_1-1672639264387.png

And replace it with code below:

.site-header__logo-image {
    max-width: 350px;
}

This will make the logo smaller and align it in center

Musfirah_2-1672639393280.png
Musfirah_2-1672639393280.png546×285 22.4 KB

5

Hi Musfirah.

Thanks for the advice.

The first code works fine and decreases the size of the image slightly.

The logo is still not centered.

I cannot find the second code to replace in the theme.css file.

Is the second code to replace in a different code file?

Thanks in advance,

Lawson

6

You can just paste this at the bottom of theme.css file

.site-header__logo-image {
    max-width: 350px !important;
}
7

Indeed that does work! Thankyou.

Have you any idea how to make this apply only to the computer version of the site - not the mobile site?

Thanks again

8

Hi Musifirah,

Since resizing the logo in the header, the logo image is blurry upon first page load.

It goes to a clear resolution if I zoom in and then out again, which obviously shouldn’t be necessary.

Any idea how I could get this to load at the proper clarity when the page fist loads?

Thanks in advance,

Lawson