Search box alignment when browser is resized

verenakacinskis · Member · Jan 20, 2016 at 2:41 pm
Copy link

Add topic to favorites
Hi!

I have been using this forum to play with css customisation for my blog and I’m really happy wit the results I’m getting. Thanks for that!

One of the things I changed is the position of the search box, which now is aligned with the navigation menu and looks exactly like I wanted. However the search box moves from its position when the browser is resized (like on the tablet or smartphone) and I don’t know how to make it work right.

I would appreciate your help with this.

Thanks!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jan 21, 2016 at 2:20 am
Copy link
Below 450px in width, there really isn’t room for the menu toggle and the search on one line. Let’s try this. Find this rule in your CSS and replace it with the following.
```
.widget_search {
    border: medium none;
    position: absolute;
    top: 265px;
    max-width: 300px;
    right: 0;
    margin-right: 7px;
}
```
next add the following to the very bottom of your custom CSS.
```
input[type="search"] {
    width: 150px;
}
@media screen and (max-width: 799px) {
	.site-header {
		margin-top: 150px;
	}
	.widget_search {
		top: 220px;
	}
}
@media screen and (max-width: 450px) {
	.main-navigation {
		margin-top: 0;
		padding-top: 0;
	}
	.site-header {
		margin-top: 120px;
	}
	.widget_search {
		top: 185px;
	}
}
```
I’ve used some Media Queries to adjust the positioning of things so that the gap between the header image and the menu toggle and search isn’t as great on smaller screens. Also at 450px and smaller, the search moves down below the menu toggle button.
verenakacinskis · Member · Jan 21, 2016 at 6:03 pm
Copy link
It worked perfectly!

Thank you very much!
thesacredpath · Member · Jan 22, 2016 at 6:37 am
Copy link
You are welcome.

No items found.