Archived topic
Have search box feature top right corner of header?
7 replies · Started by robchanoi on July 12, 2021
Hi,
Having difficulty understanding how to place search box in top right of header.
Under customize it appears like this when enabled:
https://menspleasures.com/wp-content/uploads/2021/07/get-search-to-feature-top-right.png
However adding a search widget to the header automatically loads it top right but is flush against right side. Is it possible to add padding and change the background color or have the background as the same as the header color applied to each respective element header?
Thanks.
Hi there,
looks like you're using CSS for centering the logo - but you have no Menu in your navigation.
Are you going to add a menu to the nav ?
Hi David,
Yeah I will add a menu - have a hamburger icon top left. Thought I'd resolve search before menu or perhaps you recommend vice versa?
When you say i'm using css for header - do u mean alternatively to setting it up through Customize?
I can see this CSS in the Simple CSS:
@media (min-width: 769px) {
.main-navigation {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%);
}
}That CSS centres the main navigation and absolutely positions it - which is why the search icon was on to top the Site Logo.
Not sure if you were planning to use that CSS for something ?
Ahh, that must have been there from previous design. Have removed and enabled to see new search box appearance and it now features full width below header.
Simple css also features:
@media (max-width: 768px) {
.inside-header {
display: flex;
}
.main-navigation {
margin-left: auto;
}
}
I think to do with navigation / menu?
Yeah looks like it.
Probably best to remove it.
Once you got all the menu items in place, if you need assistance changing its layout then let us know.
Thanks. Would still like to set the search box to top right corner though - transparent if possible against whatever header background there is. Do I need to sort menu before that?
cheers.
Yep - best to sort the menu first.
