Replacing a header menu item with a logo image in a Shopify Debut theme. The goal is to swap the first menu item (“Bigger’s Market”) for a logo and control its size/spacing; image alternation is handled separately by the requester.
Key solution (via CSS – Cascading Style Sheets):
Implementation details:
Current status and open questions:
Note: Code snippets are central; screenshots are illustrative.
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.
Hello, can you provide your site’s url or a preview url so I can take a look.
Hello @nicotroplent the store url is https://biggers-market.myshopify.com/apps/under-construction and the password is admin321
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
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
@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
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;
}
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
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);
}
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.