Search form in line with header

[nomad_jess]

Hi there,

I’ve recently changed my header and I’d like the search bar to appear to the right of it, similar to the Magazine layout example on your site. I’ve tried playing with CSS but so far I haven’t been able to get the search bar to appear inline with the header. Could you please assist?

Thank you so much,

Jess

[Chinmoy Paul]

Share your site URL once.

[nomad_jess]

Whoops, sorry! It’s http://notesofnomads.com

[Chinmoy Paul]

Your style.css file have unwanted text. Remove following lines

Don't show header image in mobile view

Edit the existing CSS with new one:

1. Go to line number 1331 and replace old code with this code

.title-area {
    float: left;
    max-width: 400px;
    padding-left: 10px;
    padding-top: 10px;
}

2. Go to line number 1376 and replace old code with this code

.site-header .widget-area {
    float: right;
    margin-left: 30px;
    margin-top: 8px;
    max-width: 400px;
    text-align: left;
    width: 100%;
}

[nomad_jess]

Thank you so much! That’s great.

With the don’t show header image in mobile view, I removed all of this:

Don’t show header image in mobile view

@media only screen and (min-width: 400px) {
.site-header {display:none}
}

Is that correct?

[Chinmoy Paul]

Yes.

[Author]

Posts