How can I replace a menu item with an image?

[BB_Tech]

Howdy, I need to change my header so that I have two images that alternate, I can figure out the alternation part I just cant for the life of me figure out how to put a image in the menu. 

For example in the below image I would like to replace bigger's market button with a whole different logo. Any help or suggestions would be greatly appreciated. 

[PageFly-Victor · Accepted solution]

Hi @Jessicaivyart,

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file vendor.css.

Step 3: Paste the below code at bottom of the file -> Save

#shopify-section-header .header__inline-menu ul.list-menu.list-menu--inline li:first-child{
   min-width: 150px;
  background: transparent !important;
   background-image: url('https://cdn.shopify.com/s/files/1/0518/5454/0969/files/Transparent_2-01.png?v=1614326555&width=500') !important;
   background-size: contain !important;
   background-repeat: no-repeat !important;
   background-position: center !important;
}

#shopify-section-header .header__inline-menu ul.list-menu.list-menu--inline li:first-child a{font-size:0 !important}

You can change the URL of the background image to another URL 

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

[nicotroplent]

Hello, can you provide your site's url or a preview url so I can take a look.

[BB_Tech]

Hello @nicotroplent the store url is https://biggers-market.myshopify.com/apps/under-construction and the password is admin321

[PageFly-Victor · Accepted solution]

Hi @Jessicaivyart,

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file vendor.css.

Step 3: Paste the below code at bottom of the file -> Save

#shopify-section-header .header__inline-menu ul.list-menu.list-menu--inline li:first-child{
   min-width: 150px;
  background: transparent !important;
   background-image: url('https://cdn.shopify.com/s/files/1/0518/5454/0969/files/Transparent_2-01.png?v=1614326555&width=500') !important;
   background-size: contain !important;
   background-repeat: no-repeat !important;
   background-position: center !important;
}

#shopify-section-header .header__inline-menu ul.list-menu.list-menu--inline li:first-child a{font-size:0 !important}

You can change the URL of the background image to another URL 

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

[BB_Tech]

Hi @jessicaivyart I dont see a vendor.css file, I am using the debut theme so maybe it will be named something different. Would you know an alternate name 

[BB_Tech]

@jessicaivyart that worked perfectly, I realized I just needed to put it in base.css, is there anyway to make it larger tho? Changing the min pix size doesnt seem to work 

[PageFly-Victor · Accepted solution]

Hi @BB_Tech,
You can add

#shopify-section-header .header__inline-menu ul.list-menu.list-menu--inline li:first-child {
    min-width: 200px;
    background: transparent!important;
    background-image: url(https://cdn.shopify.com/s/files/1/0518/5454/0969/files/Biggers_Transparent_Logo_BTT.png?v=1675960292)!important;
    background-size: contain !important;
    background-repeat: no-repeat!important;
    background-position: center!important;
    min-height: 95px !important;
}
ul.list-menu.list-menu--inline{
align-items: center !important;
}

[BB_Tech]

How do I change the spacing on the left side of the logo? It is a little funky and I would like to decrease it 

[PageFly-Victor]

You can try

#shopify-section-header .header__inline-menu ul.list-menu.list-menu--inline li:first-child {
    min-width: 200px;
    background: transparent !important;
    background-image: url(https://cdn.shopify.com/s/files/1/0518/5454/0969/files/Biggers_Transparent_Logo_BTT.png?v=1675960292)!important;
    background-size: contain !important;
    background-repeat: no-repeat!important;
    background-position: center!important;
    min-height: 65px !important;
    transform: translateX(10px);
}

or

#shopify-section-header .header__inline-menu ul.list-menu.list-menu--inline li:first-child {
    min-width: 200px;
    background: transparent !important;
    background-image: url(https://cdn.shopify.com/s/files/1/0518/5454/0969/files/Biggers_Transparent_Logo_BTT.png?v=1675960292)!important;
    background-size: contain !important;
    background-repeat: no-repeat!important;
    background-position: center!important;
    min-height: 65px !important;
    transform: translateX(-10px);
}

[VictoriaD]

Hi @PageFly-Victor is there anyway to use this code in a Debut 8.0 theme? Unfortunately, I'm working with a very old version of Shopify, but can't update because there isn't a new version of Debut and need to use the my existing theme for the time being. Any insights as to where to place the code or how to adapt the code for this earlier type theme? Thanks so much.