How to make logo in Center in Infinite Theme?

Technical Q&A
1

How can I make the logo in the center in Infinite theme, I am using header style 03, When adding CSS I am able to give margin from let/right but that is not properly aligned.

2

@Aman0309 ,

can you please share your store details? So, I can check and guide you based on that.

3

https://thebigtopshop.com/

Here is the store link currently I have added a css and given margin from left 650px but it is not responsive to all the devices.

4

@Aman0309

if you want a block in center you should use ‘margin: 0 auto’, not ‘margin-left: 650px’

Kani_1-1658904220967.png
Kani_1-1658904220967.png530×239 10.4 KB

5

Not Working… Header Style 04 is predefined from the theme, How can I change it from the Edit code?

6

Hi! @Aman0309

This is PageFly - Free Landing Page Builder. I would love to provide my recommendations for your store based on 6 years of providing solutions for about 100.000 active Shopify merchants.

first unset margin-left in this class

#desk_logo-wrap {

margin-left: 0 !important;

}

then add justify-content: center; come in

@media only screen and (min-width: 1025px) {

.page-header .header-panel-left {

display: flex;

align-items: center;

padding: 0;

justify-content: center;

}

}

followed add flex-direction: column; come in

@media only screen and (min-width: 1025px) {

.page-header .sticky-menu:not(.active) .header-panel-top {

padding: 20px 0;

display: flex;

flex-direction: column;

}

}

PageFly_0-1658908064592.png
PageFly_0-1658908064592.png1600×739 180 KB

If you feel my answer is helpful, like it or mark it as a solution. Let me know if you have any questions.

Best regards,

PageFly

7

@Aman0309 duplicate your theme first and try to edit it.

search in your code editor

file named ‘styles.scss.css’

add follow code at last of this file and ‘Save’

#desk_logo-wrap,.page-header .logo {
    margin: 0 auto;
}

and then you should find your header snippet，to chage ‘col-4’ to ‘col-12’, and remove ‘col-8’

Kani_0-1658908529230.png
Kani_0-1658908529230.png470×206 9.34 KB

if you think it’s hard to edit header file. then you can just add this css code at last of ‘styles.scss.css’ too

.desktop-header-inner .header-panel-top .header-panel-right {
 display:none;
}

any way you like

Kani_0-1658909384428.png
Kani_0-1658909384428.png1892×512 227 KB

8

HI @Aman0309 ,

Please remove your CSS which you have given 650px. and add this new one at the end of styles.scss file. Let me know if it’s not working as expected.

#desk_logo-wrap{
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0 auto;
    justify-content: center;
}
1 Like