CODEWITHSUNDEEP
htmlcss
charlie
charlie

Reputation: 481

CSS Menu - left align image and right align menu items

I have this css menu:

http://jsfiddle.net/L65dx02m/1/

i want to be able to right align the menu and left align an image (as if it were a menu item but with no hover)

i tried adding a class around the image and using float:left; and a class around the menu items with float:right but this done nothing

Upvotes: 0

Views: 2839

Answers (3)

Jhey
Jhey

Reputation: 1377

Depending on your browser support you may opt to consider a flexbox solution to your problem if it was acceptable.

You can check out a nice reference to flexbox over @ css-tricks.com here.

I've put together the following snippet for reference, available on jsbin.com here.

* {
  box-sizing: border-box;
}
body {
  padding: 0;
  margin: 0;
}
.myHeader {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  background-color: red;
  color: white;
}
.myHeader__nav a {
  padding: 5px;
  cursor: pointer;
}
.myHeader__nav a:hover {
  background-color: white;
  color: red;
}
<!DOCTYPE html>
<head></head>
<body>
  <header class="myHeader">
    <a class="myHeader__title">
      <img src="" alt="mySite">
    </a>
    <nav class="myHeader__nav">
      <a>Homepage</a>
      <a>About us</a>
      <a>Services</a>
      <a>Login</a>
      <a>Support</a>
      <a>Contact us</a>
    </nav>
  </header>
</body>

I would personally be careful with having too many menu items though and look to condense them if possible into dropdowns etc.

Hope that helps you out!

Upvotes: 0

Dario
Dario

Reputation: 280

just change:

<li><a <img src="" width="130px" /></a></li>

to

<li style="float: left; text-align: left;"><a> <img src="" width="130px" /></a></li>

and add 

text-align: right;

to your style under .int_menu {}

Upvotes: 0

Sosa
Sosa

Reputation: 834

Just wrap your <img> and <ul> in a div and then float them. For my example I used the <nav> as the wrapper and then styled the children (floating them, setting the height to 100%, etc)

<nav>
     <img>
     <ul>
</nav>

http://jsfiddle.net/L65dx02m/6/

Upvotes: 2

Related Questions