Archived topic

Move custom search bar under mobile header / site width issue

7 replies · Started by Thomas on April 30, 2020

Viewing posts 1–8 of 8

April 30, 2020 at 6:58 am #1263030

Hi Tom, David and others ;)

I'm building up an new Site for a friend of mine and it's nearly done. But now there are some issues:

1. I am using a custom search bar from a plugin called "WooEvents". On the mobile version I want the search bar to be shown under the mobile header. (see image below)

position of search bar

2. There is a problem with the width of the mobile site (you can move the content a bit). I can't find the problem. You have an idea?

Thanks in advance.

Cheers,
Thomas

April 30, 2020 at 8:45 am #1263376

Hi there,

Try this CSS to re-order the mobile header:

@media(max-width: 768px) {
    .we-search-container {
        order: 5;
    }
    .woo-event-toolbar {
        padding-bottom: 0;
    }
}

April 30, 2020 at 8:57 am #1263403

Thanks David,

works perfectly!

Do you also have an idea what I could do about the wrong mobile width?

April 30, 2020 at 9:13 am #1263431

Sorry missed #2.
Its the section with the Carousel thats causing the issue. Try this CSS to fix that:

#generate-section-2.generate-sections-container {
    overflow-x: hidden;
}

April 30, 2020 at 9:15 am #1263442

Nailed it!

Thanks so much - really the best support for any piece of software I bought so far :)

April 30, 2020 at 9:17 am #1263451

Awesome - glad we could be of help :)

May 2, 2020 at 9:40 am #1266489

Hi David,

got a new question :)

Would it be possible, to replace the gp search in the header with my custom search from the wooevents plugin?

May 2, 2020 at 2:44 pm #1266759

Any chance you can open a new topic for it?

I'll mark this one as resolved so you can start a new one.

Thanks :)

This archived topic is closed to new replies.

Start building better websites today.