Add search icon back to Showcase theme - not showing up when added

Store Design
1

Currently hidden search icon as nothing shows up when you click on the icon in menu bar so have had to add an additional search menu in navigation. Can anyone help?

1 Like
2

@JessicaMole

Is that issue has been resolved?

3

No - I have unhidden the button now but it’s not working

4

@JessicaMole can you share the store url?

5

https://nephthysillustrated.co.uk/

6

@JessicaMole

i have looked it and it seems like there is some JS, CSS conflict with the search code and needs to be fixed. in the theme code.

7

Can you advise where and how we can fix this?

8

@JessicaMole please refer to the instructions below for CSS and JS

paste the below CSS code into your style.css file located in the theme files assets folder

.theme-modal.reveal {
	z-index: 9999 !important;
}
#search-modal .search-form .inline-mini-form input {
	color: inherit !important;
}
.theme-modal.reveal .search-form .inline-mini-form button {
	opacity: 1 !important;
	visibility: visible !important;
}

Paste below code into your theme.js file at the very bottom . Located in the same assets folder

document.querySelector('#search-modal .modal-close').addEventListener('click', function(e) {
    const searchModal = document.getElementById('search-modal');
    
    if (searchModal.classList.contains('reveal')) {
        searchModal.classList.remove('reveal');
    }
});

Mark as accepted if your issue is fixed by this code.

Thanks

9

That doesn’t work unfortunately

10

Found the solution, needed to change the style.css.liquid files colour

11

If the issue is fixed do mark as solution thank you