How to customise Brooklyn Theme Search function

Highlighted
Tourist
8 0 1

Hi,

I'm looking to customise my stores Brooklyn Theme so the search function doesn't take up the whole screen which takes away from my customers experience.

On mobile it's fine, but desktop I'd like it to just be a simple bar (or drop down bar) so the customer isn't hit with a bright white screen.

My store: https://pointsstore.com.au/

Thanks in advance!

Regards,
Myles 

0 Likes
Highlighted
Excursionist
80 19 19

I'd be fairly confident in saying this has been answered before and someone could probably come up with something much better than this but initially something like this might help.

Add to the bottom of your theme.scss file:

@media screen and (min-width: 769px) {
    .mfp-content {
        display: flex;
        align-content: center;
        justify-content: center;
    }

    .mfp-wrap {
        height: 10%;
    }

    .mfp-bg.mfp-fade.mfp-ready {
        height: 10%;
        box-shadow: 1px 1px 4px black;
    }

    form.input-group.search-bar.search-bar--modal {
        margin: 5% auto 0;
    }

    button.mfp-close {
        margin-top: 10px;
    }
}
0 Likes
Highlighted
Tourist
8 0 1

Thanks for the reply, definitely a step in the right direction. At least the full white page is gone. 

Would love to compact it down further if possible.

Previous answers haven't been answered in full and the one that seems to have an answer goes into a private email thread.

Hoping we can get an answer everyone can make use of.

Thank you for your help.

0 Likes