Can I use CSS change the position of search box on the right to the menu

ffffll · Member · Jun 30, 2016 at 8:58 pm
Copy link

Add topic to favorites
My theme doesnt have a search box in the menu. I modified it a lot so I do not want to change it. Now I am trying to move the search box in the sidebar to the right side of the menu. I could do it with absolute position but it will not look friendly on the mobile. The code that I got was: .widget_search { position: absolute; top: 250px; right: 30px; }

Is there any other way to locate the search box? I mean it doesnt need to be inside the menu, and I think just to the right side of the menu actually may be better. So is it doable?
We could find the location of the menu, right? And then all we need to do is to align or bound the search box with it, right?

So how we gonna do that? could we use float code, multiple column, flex box or grid layout to achieve that?

Thank you very much for your attention

The blog I need help with is: (visible only to logged in users)
ffffll · Member · Jun 30, 2016 at 9:03 pm
Copy link
Or maybe it would be easier to replace an element in the menu with the search box, The picture of the element that could be replaced on the menu and I just put the element and the search box in the picture.

Looking forward to your replies.
ffffll · Member · Jun 30, 2016 at 9:44 pm
Copy link
I found this one may be useful but I dont know how to translate it to the code for my website….
Hopefully there could be someone that can help
ffffll · Member · Jun 30, 2016 at 9:45 pm
Copy link
CSS align items
In the last post, I forgot the link….
thesacredpath · Member · Jul 1, 2016 at 11:51 pm
Copy link
Position: absolute is the only way to move the search box out of the sidebar and into the menu area, and yes it is problematic on responsive designed themes. I’ve looked at your site and let’s make the following change to your widget relocation rule.
```
.widget_search {
	position:absolute;
	top:230px;
	right:0;
}
```
and then add the following.
```
#page {
    position: relative;
}
@media screen and (max-width: 480px) {
.widget_search {
    top: 270px;
}
}
```
See what you think with the above. It moves it to the lower right corner of the header area, just above the menu bar. Make sure and view in a phone and tablet, if you can to make sure all looks good. In my testing, it seems good.

No items found.