Logo in Header & Home Page Icon

Store Design
1

Can anyone help me with the code for a larger logo in my header section (past 300 px)? And also, it would be great if someone could help me to add a home page icon in my header instead of a button that says Home Page.

1 Like
2

@jayne_dough - can you share your webpage link?

3

Hello @jayne_dough Share ur URL link

4

Hi @jayne_dough

Could you please share with me your store link?

Best,

Daisy

5

Sure. I will be in touch.! Thanks for the tip

6

Hi Daisy.. sure. It’s https://d81d26-54.myshopify.com/

7

@jayne_dough - please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

@media screen and (min-width: 990px) {
.header{grid-template-columns: 1fr 1fr 1fr;}
.header__heading-logo{width: 300px;}
}

suyash1_0-1735786702753.png
suyash1_0-1735786702753.png1366Ă—768 98.6 KB

8

Hi @jayne_dough

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
img.header__heading-logo.motion-reduce {
    width: 300px;
}

a#HeaderMenu-home-page::before {
  content: "\1F3E0";
  margin-right: 8px; 
  font-size: 16px; 
}

a#HeaderMenu-home-page span {
  display: none;
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

9

HI @jayne_dough

  1. Change logo size:

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
.header__heading-logo-wrapper img {
    width: 300px;
}

Here is the result:

image_720.png
image_720.png720Ă—347 106 KB

  1. Change text to icon

  2. Find the file header-mega-menu.liquid https://prnt.sc/m3uiLR-QE1es

  3. Add this code like this https://prnt.sc/56nphacAwGMZ

  4. Find the icon you want to add and take it URL

  5. Add this code and insert URL in the code

- -- code icon --

I hope this helps

Best,

Daisy