Logo off center

Solved

Logo off center

LindsayDesigns
Excursionist
19 0 5

Hi all,

I've been doing a lot of edits lately to my new website, thanks to the help of this community! I don't know if I did something in some of the code editing or if it's always been off... but for some reason my "Lindsay Designs" logo is off-center and needs to be moved over to the left quite a bit so that it visually lines up in the middle of all the other text at the top of my page. 

 

I've also been wondering if it's possible to make the logo a little bit bigger? For example, if it was a font could it be increased in size by roughly 4 points or so? Nothing exact - just looking for it to be a little bigger.

 

URL: https://lindsay-designs.net

Screenshot 2024-07-09 at 11.35.44 PM.png

 

Thanks for the help!

Lindsay

Accepted Solution (1)

Raj-webdesigner
Shopify Partner
325 76 78

This is an accepted solution.

Add This css in your edit code > base.css file

@media screen and (min-width:767px){
	.header--top-center .header__heading,a.header__heading-link.link.link--text.focus-inset {
	    width: 100% !important;
	    padding-right: calc(10% - 88px) !important;
	}	
	.header__heading-logo {
	    width: 360px !important;
	}
}

 

Are you looking for Shopify Developer then your search is over I will help you


If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com


View solution in original post

Replies 7 (7)

Raj-webdesigner
Shopify Partner
325 76 78

This is an accepted solution.

Add This css in your edit code > base.css file

@media screen and (min-width:767px){
	.header--top-center .header__heading,a.header__heading-link.link.link--text.focus-inset {
	    width: 100% !important;
	    padding-right: calc(10% - 88px) !important;
	}	
	.header__heading-logo {
	    width: 360px !important;
	}
}

 

Are you looking for Shopify Developer then your search is over I will help you


If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com


LindsayDesigns
Excursionist
19 0 5

Thanks for your code to adjust my logo. It did the trick! Only thing... when I added the code it created more white space underneath my menu and above the dark grey announcement bar. Can you tell me how I might be able to eliminate the extra white space? Thanks!

LindsayDesigns
Excursionist
19 0 5

Scratch that last reply! All of a sudden it looks fixed! So weird. Maybe it didn't refresh the last few times? I'm not sure, but it looks great! Appreciate the help so much!!

LindsayDesigns
Excursionist
19 0 5

So sorry... I thought everything was all good. But apparently the logo is now only centered on the home page. The other pages don't match up with it for some reason.  I did make one adjustment to your code and adjusted the % on this line from 10% to 12%:

 

padding-right: calc(12% - 88px) !important;

 

Could my adjustment have messed it up across the whole site?

Raj-webdesigner
Shopify Partner
325 76 78

don't worry Sir,

All Fine!!

Are you looking for Shopify Developer then your search is over I will help you


If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com


pwcsangeeta
Shopify Partner
52 5 10

Hello @LindsayDesigns 

1. Centering the Logo
First, you need to make sure that the logo container is centered within the header. You can achieve this by adding some CSS.

2. Increasing the Logo Size
To increase the logo size, you can adjust the width or the font size if the logo is text-based.

Steps to Edit CSS in Dawn Theme:
1.Login to your Shopify admin panel.
2.Navigate to Online Store > Themes.
3.Center the Logo:
4.Open the assets/component-header.css file.
5.Add the following CSS to center the logo:

/* Center the logo */
.header__heading-logo {
    margin: 0 auto;
    display: block;
    text-align: center;
}

/* Center the logo image */
.header__heading-logo img {
    display: block;
    margin: 0 auto;
    max-width: 150px; /* Adjust the size as needed */
}

/* If the logo is text-based */
.header__heading-logo {
    font-size: 24px; /* Increase the font size */
}

Buy me a Pizza
- If helpful then please Like and Accept Solution.

Thanks

 

LindsayDesigns
Excursionist
19 0 5

Thank you so much for taking the time to offer a solution to my issue. It looks like the other solution did the trick, but I appreciate your time!