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

Top Right Header- Need Widget Inline (CSS)

  • 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)

2014-02-17

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!

2014-02-17

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.