Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


Floating an image to the right of Nav Bar with Responsive Layout

Is there a way to float an image to the right of my Primary Navigation Bar, in a responsive design.

Using Wordpress v3.8, Genesis Framework v2.0.2

Please add your code so that the community can better assist you with your issue.

8 Answers

Richmond Lauman
Richmond Lauman
28,793 Points

It is difficult to get an idea of what the styling would look like now or how you want it to look in relation, but I think if you concentrate on the genesis-nav-menu and promo selectors, trying out different combinations of values for display, clear, and float properties, you may find an answer by trial and error. Start with changing the display in promo to inline-block and see what happens.

Often if I try something and it does not work, it might still give me a clue as to what will.

Also the image is larger than the height, so I cannot just replace the nav bar text with a background image. If I do that the navigation bar gets large, and the images goes to the next line.

Richmond Lauman
Richmond Lauman
28,793 Points

Let's see what you have for CSS code. I will say now though that you should be able to get the effect you want using float and display properties with media queries.

I have created a custom widget to the right of the Primary Navigation Bar in Wordpress; I have a simple CSS Float:

.promo { float: right; display: block; }

The image renders to the right of the Navigation Bar, but the image height is larger, so it is making the Navigation Bar larger than the original size of the navigation bar. I would like it to not affect the Navigation Bar, and float on top with the height of the Navigation Bar the same, and the images over hanging over the top and bottom.

Richmond Lauman
Richmond Lauman
28,793 Points

can I see the css for the nav bar too?

/* Site Navigation ---------------------------------------------------------------------------------------------------- */

.genesis-nav-menu { clear: both; color: #999; font-family: Lato, sans-serif; line-height: 1.5; width: 100%; }

.genesis-nav-menu .menu-item { display: inline-block; text-align: left; }

.genesis-nav-menu a { border: none; color: #999; display: block; padding: 28px 24px; padding: 2.8rem 1rem; position: relative; }

.genesis-nav-menu a:hover, .genesis-nav-menu .current-menu-item > a, .genesis-nav-menu .sub-menu .current-menu-item > a:hover { color: #333; }

.genesis-nav-menu .sub-menu .current-menu-item > a { color: #999; }

.genesis-nav-menu > .menu-item > a { text-transform: uppercase; }

.genesis-nav-menu .sub-menu { left: -9999px; opacity: 0; position: absolute; -webkit-transition: opacity .4s ease-in-out; -moz-transition: opacity .4s ease-in-out; -ms-transition: opacity .4s ease-in-out; -o-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out; width: 200px; z-index: 99; }

.genesis-nav-menu .sub-menu a { background-color: #fff; border: 1px solid #eee; border-top: none; font-size: 14px; font-size: 1.4rem; padding: 16px 20px; padding: 1.6rem 2rem; position: relative; width: 200px; }

.genesis-nav-menu .sub-menu .sub-menu { margin: -54px 0 0 199px; }

.genesis-nav-menu .menu-item:hover { position: static; }

.genesis-nav-menu .menu-item:hover > .sub-menu { left: auto; opacity: 1; }

.genesis-nav-menu > .first > a { padding-left: 0; }

.genesis-nav-menu > .last > a { padding-right: 0; }

.genesis-nav-menu > .right { display: inline-block; float: right; list-style-type: none; padding: 28px 0; padding: 2.8rem 0; text-transform: uppercase; }

.genesis-nav-menu > .right > a { display: inline; padding: 0; }

.genesis-nav-menu > .rss > a { margin-left: 48px; margin-left: 4.8rem; }

.genesis-nav-menu > .search { padding: 14px 0 0; padding: 1.4rem 0 0; }

/* Site Header Navigation --------------------------------------------- */

.site-header .sub-menu { border-top: 1px solid #eee; }

.site-header .sub-menu .sub-menu { margin-top: -55px; }

/* Primary Navigation --------------------------------------------- */

.nav-primary { background-color: #333; }

.nav-primary a:hover, .nav-primary .current-menu-item > a { color: #fff; }

.nav-primary .sub-menu a:hover { color: #333; }

Thank you!

Mike Baxter
Mike Baxter
4,442 Points

Depends on what you want for the nav bar. If you want it to run the full width of the page, and place a promo on top of that nav bar, you'll want to separate the nav bar from the promo image. (Use separate divs.)

From a learning standpoint, I think you might be misunderstanding how the "clear:both" property works. I really struggled with that for a long time as well as floats, but I'm now getting the hang of it.

Bottom line, if you're using some sort of clearfix (which is common when you float elements), you'll need to separate the nav bar from that promo image.

I threw something together on CodePen, hopefully it helps!


For posterity here's the relevant HTML:

<nav class="clearfix">

<div class="promo-wrapper">
    <div class="promo">
        <img src="image.jpg" width="200" height="200">

and CSS

body {
  margin: 0;
nav {
  width: 100%;
.clearfix:after {
  content: "";
  display: table;
.clearfix:after {
  clear: both;
nav ul {
  list-style: none;
nav li {
  float: left;
  margin: 0 10px;
.promo-wrapper {
  position: absolute;
  width: 100%;
  top: 0px;
.promo {
  float: right;