Top Right Header- Need Widget Inline (CSS) WordPress
- SOLVED
Using the Genesis Framework, I need the 3 widgets I've put in the right header widget to align so that the 2 menus (categories menu and social icons menu) and the search box area are in line with the logo area.
The site is [[LINK href="http://webhost-solutions.net/diyp/"]]http://webhost-solutions.net/diyp/[[/LINK]]
So, I need some CSS skill. I've started to work on this, with floating 2 of them left and the other right.
I'm working on a test right now on something else that has me away from this issue, but I'm less than a day from flipping this site to live and this is one of the problems left.
Answers (2)
Navjot Singh answers:
Try this CSS
#nav_menu-4 {
float:right;
margin-top:20px;
margin-top:2rem;
}
section#search-3 {
margin-bottom:10px;
margin-bottom:1rem;
}
.site-header .search-form{
margin-top:14px;
margin-top:1.4rem;
}
Nile Flores comments:
Hi Navjot Singh! I've modified your code some for positioning as the search needed to be on the right.
#search-3 .widget {
float: right;
}
#nav_menu-4 {
float:left;
margin-top: 25px;
margin-top:2.5rem;
margin-left: 20px;
margin-left: 2rem;
}
section#search-3 {
margin-bottom: 10px;
margin-bottom: 1rem;
}
.site-header .search-form {
margin-top: -5px;
margin-top: -.5rem;
}
I think you've been the closest I know that my client wants to change out that search for a similar one used in the Twenty Fourteen Theme (also similar to Mashable) where you click the search icon, and the search field drops down. So if I don't have time, I'll probably be opening a ticket for that unless I'm lucky torip out the code from Twenty Fourteen for it. :)
Thanks!
Ryan S answers:
Here try this fix
// social-menu
section#nav_menu-4{ margin-top: 24px; float: left; }
ul#menu-3.menu{ clear: none; } // if needed add this(optional)
// search widget are
section#search-3{ float: left; } /* if needed add this optional, or just simply update the one you already added */
form.search-form{ margin-top: 1em; }
Hope that helps
Nile Flores comments:
that form.search-form actually helped replace the other code for just using the search-form, and with the positioning that Navjot had, and your addition, it worked great.