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

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.

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.

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!

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!

http://codepen.io/anon/pen/qkxuA

For posterity here's the relevant HTML:

<nav class="clearfix">
    <ul>
        <li>About</li>
        <li>Home</li>
        <li>Contact</li>
    </ul>
</nav>

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

and CSS

body {
  margin: 0;
}
nav {
  width: 100%;
}
.clearfix:before,
.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;
}