Logo in Header & Home Page Icon

[jayne_dough]

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.

[suyash1]

@jayne_dough - can you share your webpage link?

[jayne_dough]

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

[suyash1]

@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;}
}

[Hasan112]

Hello @jayne_dough  Share ur URL link

[DaisyVo]

Hi @jayne_dough 

Could you please share with me your store link?

Best,

Daisy

[jayne_dough]

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

[DaisyVo]

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: 

2.  Change text to icon

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

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

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

4. Add this code and insert URL in the code 

<li><a id="HeaderMenu-home-page" href="/" class="header__menu-item list-menu__item link link--text focus-inset" aria-current="page">
            -- code icon --
          </a></li>

I hope this helps

Best,

Daisy

[Made4uo-Ribe]

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;
}

• And Save.
• Result:
• 

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