Changing the width of the search bar - Empire Theme

Store Design
1

Hi,I would like to change the search bar to be smaller in width, I have tried to find the code for it but it doesn’t seem to be there. We have the empire theme

Website:https://vauxcentre.co.uk/

2

Hey @Charlotte93 ,

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.

Change the 50% to any size you like

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1710872823370.jpeg
ThePrimeWeb_0-1710872823370.jpeg1253×933 87.9 KB

3

Hi @Charlotte93

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

PageFlyRichard_0-1710898284166.png
PageFlyRichard_0-1710898284166.png2880×1038 320 KB

Hope this can help you solve the issue

Best regards,

Richard | PageFly

1 Like
4 
.ui-menu.glFilter-search-popup .gl-fullscreen-layer .gl-d-close-btn{
    width: 30px;
    height: 30px;
    flex: unset;
    padding: unset;
}
.ui-menu.glFilter-search-popup .gl-fullscreen-layer .gl-d-searchbox-input{
    font-size: 18px;
}
.ui-menu.glFilter-search-popup .gl-fullscreen-layer .gl-d-searchbox-icon{
    width: 50px;
    height: 50px;
}
.ui-menu.glFilter-search-popup .gl-fullscreen-layer .gl-fullscreen-header {
    width: 50%;
    margin: 0 auto;
}

Add This Css In Your base.css file and see Magic

5

Hi Richard,

Thank you for this! It changed it on the web, however it changed on the mobile as well when I am happy with how it looks on the mobile. Is there anyway of just changing it on the web and not the mobile too?

Thank you!