Removing a background image from the header

[GamingVerse]

Hi, I’m having trouble removing an image that came pre-installed on the theme we’re using.

The code in question is
element {
background: linear-gradient(180deg, #020202 0%, rgba(29, 32, 40, 0) 163.33%), url(//cdn.shopify.com/s/files/1/0589/2417/1453/t/2/assets/breadcrumb.png?v=3159098017408404804);

But I can’t seem to locate where that is in the edit code section to then remove and replace with something else. I find this extra weird because on the home page changing the homepage header image was as simple as entering the “customise” and uploading the new one, but there’s so such option for the other pages of the site.

Any help would be amazing.

[dmwwebartisan]

@GamingVerse

Please share store URL and a screenshot.

[suyash1]

@GamingVerse - it might be added from customizer to home page , please check it

[Kinjaldavra]

hello @GamingVerse

can you please share the store URL and a screenshot

[GamingVerse]

Site isn’t currently live sorry, but I can provide screenshots and any code requests you’d need from “inspect”

@Kinjaldavra @suyash1 @dmwwebartisan

[GamingVerse]

As stated above, the customiser only has an option for the main header

[Diamond_11]

Hello @GamingVerse

You are welcome to this great community, I am happy to have you here also I have gone through your request and I can say that your request can be handled by a professional in this field because this is a coding case I guess and a mistake can ruined all your store so you have to be careful and look for an expert in the field

[GamingVerse]

@Diamond_11 I’m quite comfortable coding and it’s easy enough to undo anything that goes wrong so I’m not every concerned about that. Just want the image gone!

[Kinjaldavra]

hello @GamingVerse

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

#shopify-section-header .sub-nav {
	background: none !important;
}

[GamingVerse]

Hi @Kinjaldavra
That unfortunately won’t solve the problem as I want to be able to put my own image there instead

Thanks

[suyash1]

From source code we can find it out exactly, we will need to check code,
can you share your header.liquid file code

[GamingVerse]

@suyash1

So I actually managed to replace the image with one of my own by naming it “breadcrumb” as I noticed that was being assigned to the header in the code.
However, I’m still stuck with the weird grey over the top and the “collection title” which is the white text.

Header.liquid code is as follows

{% assign logoWidth = section.settings.logo_max_width | append: ‘x’ %}
{% assign logoWidthpx = section.settings.logo_max_width | append: ‘px’ %}
{% assign menuColor = section.settings.downdown_color | color_to_rgb %}
{% assign alpha = section.settings.downdown_color_opacity %}

{% assign menuColor = menuColor | color_modify: ‘alpha’, alpha %}

{% include 'social-icon' %} {% if customer %}

Welcome {{ customer.name }} Cart ({{ cart.item_count }}) | My account | Logout

{% else %}

Login or Create an account

{% endif %} {{ cart.item_count }}

{% unless settings.hide_address %}

{{ shop.address.street }}, {{ shop.address.city }}, {{ shop.address.province }} {% if settings.show_country %} {{ shop.address.zip}}, {{shop.address.country}} {% endif %}

{% endunless %}

PRODUCTS

Search for

{% if template == 'index' %}

{% else %}

{% endif %} {% if section.settings.logo_use_image %} {% else %} {{ shop.name }} {% endif %} {% if template == 'index' %}

{% else %}

{% endif %}

{% for l in linklists.main-menu.links %} {% include 'navigation' with 0 %} {% endfor %}

• {% unless customer %} Login / Register {% else %} My Account Logout {% endunless %}
{% for l in linklists.main-menu.links %} {% include 'mobile-nav' with 0 %} {% endfor %}

{{ cart.item_count }}

{% comment %}

{% include 'shopping-cart' %}

{% endcomment %}

{% schema %}

{
“name”: “Header”,
“settings”: [
{
“type”: “checkbox”,
“id”: “logo_use_image”,
“label”: “Use custom logo”
}, {
“type”: “image_picker”,
“id”: “logo”,
“label”: “Custom logo”,
“info”: “450 x 200px .png”
}, {
“type”: “range”,
“id”: “logo_max_width”,
“min”: 101,
“max”: 451,
“step”: 5,
“unit”: “px”,
“label”: “Max logo width”,
“default”: 231
}, {
“type”: “header”,
“content”: “Menu Settings”
}, {
“type”: “color”,
“id”: “downdown_color”,
“label”: “Menu Background color”,
“default”: “#000000”
}, {
“type”: “range”,
“id”: “downdown_color_opacity”,
“min”: 0,
“max”: 1,
“step”: 0.1,
“unit”: “%”,
“label”: “Menu opacity”,
“default”: 0.5
}, {
“type”: “select”,
“id”: “menu_font_size”,
“label”: “Menu Font Size”,
“options”: [
{
“value”: “16”,
“label”: “16px”
}, {
“value”: “15”,
“label”: “15px”
}, {
“value”: “14”,
“label”: “14px”
}, {
“value”: “13”,
“label”: “13px”
}, {
“value”: “12”,
“label”: “12px”
}, {
“value”: “11”,
“label”: “11px”
}
],
“default”: “16”
}, {
“type”: “select”,
“id”: “dropmenu_font_size”,
“label”: “Dropdown Menu Font Size”,
“options”: [
{
“value”: “16”,
“label”: “16px”
}, {
“value”: “15”,
“label”: “15px”
}, {
“value”: “14”,
“label”: “14px”
}, {
“value”: “13”,
“label”: “13px”
}, {
“value”: “12”,
“label”: “12px”
}, {
“value”: “11”,
“label”: “11px”
}
],
“default”: “16”
}
]
}

{% endschema %}

#shopify-section-header #main .header .menu .nav-bar .nav-item .dropdown-menu.show { background: {{menuColor}}!important; } #shopify-section-header #main .header { background: {{menuColor}}; } #shopify-section-header #main .header .menu .nav-bar .nav-item { font-size: {{section.settings.menu_font_size}}px; } .dropdown-menu { font-size: {{section.settings.dropmenu_font_size}}px !important; }

Updated Picture below

[GamingVerse]

@suyash1

Hi, I was able to change the image by renaming it “breadcrumb”, however, I am still stuck with an annoying grey overlay and type labeled “collection title”.

Updated picture below.

Header code also attached

[suyash1]

@GamingVerse - this wil need css, can you please share website link or preview link?

[GamingVerse]

@suyash1

https://the-gaming-verse.myshopify.com/

password I believe is “binderpos”

[Zworthkey]

hi, @GamingVerse
Paste this code in top of stylesheet.scss.css file.

.sub-nav.hidden-xs.hidden-sm.hidden-md.shopify-section {
    display: none !important;
}

If it helpful then accept my solution and like it.
Thank You.

[suyash1]

@GamingVerse - overlay is part of the image only and also the image is part of breadcrumb.liquid file, can you please share that? or add me as collaborator , I will check everything

[GamingVerse]

Hi @Zworthkey - That has completely removed the whole header unfortunately, not just the title or grey overlay.

[GamingVerse]

@suyash1

[Zworthkey]

hii, @GamingVerse
Can you provide me stylesheet.scss file so,
I can resolve your problem.
Thanku.