Ask your WordPress questions! Pay money and get answers fast! (more info)

Top Right Header- Need Widget Inline (CSS)


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=""]][[/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 {
section#search-3 {
.site-header .search-form{

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 {
margin-top: 25px;
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. :)



Ryan S answers:

Here try this fix

// social-menu

section#nav_menu-4{ margin-top: 24px; float: left; }{ 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 */{ margin-top: 1em; }

Hope that helps

Nile Flores comments:

that 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.