Search Alignment In Header

This topic has 29 replies, 3 voices, and was last updated 6 years, 1 month ago by Leo.

Viewing 15 posts - 1 through 15 (of 30 total)

1 2 →

Author

Posts
June 24, 2017 at 7:23 am #338336

johnzoro

I’m managed to get the search widget in the header.

Is there a way to center it?

June 24, 2017 at 7:32 am #338342
Tom
Lead Developer
Lead Developer
Try this CSS:
```
.header-widget {
    float: none;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
```
June 24, 2017 at 8:21 am #338364

johnzoro

that kinda worked

this is how it looks with that code added

this is a mock up of what i want it to look like. i may want a “go” button after the search beox and then possibly something to the right of that like some links or text

June 24, 2017 at 8:26 am #338365

Tom
Lead Developer
Lead Developer

Any chance you can link me to the site?

June 24, 2017 at 8:27 am #338366

johnzoro

https://www.greatestreviews.co.uk

June 24, 2017 at 8:31 am #338369
Tom
Lead Developer
Lead Developer
Try this as your full CSS:
```
.header-widget {
    float: none;
    width: 600px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
}

.header-widget .widget .search-field {
    width: 70%;
}

.header-widget .widget_search .search-submit {
    display: inline-block;
}

@media (min-width: 769px) {
    .site-logo {
        float: left;
        margin-right: 20px;
    }
}
```
June 24, 2017 at 8:38 am #338371

johnzoro

Getting there! I just need it to the right of the logo instead of above?

June 24, 2017 at 8:39 am #338372

Tom
Lead Developer
Lead Developer

Adjusted the CSS above 🙂

June 24, 2017 at 8:42 am #338373

johnzoro

That did it! You are amazing!

Is there a way to make the search box a bit longer?

June 24, 2017 at 8:43 am #338378

Tom
Lead Developer
Lead Developer

Adjusted again 🙂

June 24, 2017 at 8:47 am #338381

johnzoro

ace! thanks a bunch!

June 24, 2017 at 8:48 am #338382

Tom
Lead Developer
Lead Developer

You’re welcome 🙂

June 24, 2017 at 9:34 am #338412

johnzoro

i know i’m sort of gatecrashing my own thread, but is there anyway i can change the mobile view from this

to this? (ish)

June 25, 2017 at 12:46 am #338559

Tom
Lead Developer
Lead Developer

This might help: https://docs.generatepress.com/article/header-widget/#showing-your-header-widget-below-other-header-elements-on-mobile

June 25, 2017 at 7:49 am #338666

johnzoro

tom you are a genius

is there a way i can have the logo on the left and maybe in the future something on the right?

also search is coming up under logo like i mentioned but can i make it smaller so the button is to the right of the search box instead of underneath (sorry to be a pain)
Author

Posts