How to put logo on left and menu on right?

I'd like to make a header like this site or this site, I mean I want to put logo on left side and menu on right. But my header doesn't float well on here. I am confused now.

#header-right {
    float: left;
}
#header-right {
    float: right;
}

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<div class="wrapper">

  <!-- Header -->
  <header id="header" class="header">
    <div class="container" id="header-inner">
      <div class="row">

      <div id="header-left" class="clearfix">
        <div id="logo" class="logo">
          <a href="#">
            <img src="http://i.huffpost.com/gen/4252154/images/o-EMBLEM-facebook.jpg" alt="logo" id="logo-img" class="logo-img" height="35" width="150">
          </a>
        </div>  <!-- logo  -->
      </div>  <!-- header-left -->

      <div id="header-right">
        <nav class="navbar navbar-default" id="">

   			<div class="navbar-header">
   			  <a class="navbar-brand" href="#">Apple Juice</a>
   			  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-main">
   				<span class="icon-bar"></span>
   				<span class="icon-bar"></span>
   				<span class="icon-bar"></span>
   			  </button>
   			</div>  <!-- navbar-header -->

   			<!-- Global Navigation -->
   			<div class="gnav collapse navbar-collapse" id="navbar-main">
   			  <ul class="nav navbar-nav">
   				<li class="dropdown active">
   				  <a class="" data-toggle="dropdown" href="index.html">Home <i></i></a>
   				  <!-- Dropdown -->
   				  <ul class="dropdown-menu">
   					<li>
   					  <a class="" href='#'>ジュース <i class=""></i></a>
   					  <ul class="sub-dropdown">
      					<li><a href="#">オレンジ</a></li>
      					<li><a href="#">アップル</a></li>
      					<li><a href="#">グレープ</a></li>
      				  </ul>
      				</li>
      				<li>
      				  <a class="" href='#'>寿司 <i class=""></i></a>
      				  <ul class="sub-dropdown">
      					<li><a href="#">マグロ</a></li>
      					<li><a href="#">サーモン</a></li>
      					<li><a href="#">エンガワ</a></li>
      				  </ul>
      				</li>
      			  </ul>  <!-- dropdown-menu -->
      			</li>  <!-- dropdown active-->

      			<li class="dropdown">
      			  <a class="" data-toggle="dropdown" href="index.html">items <i class="fa fa-angle-down" aria-hidden="true"></i></a>
      			  <ul class="dropdown-menu">
      				<li>
      				  <a class="" href='#'>スマートフォン <i class=""></i></a>
      				  <ul class="sub-dropdown">
      					<li><a href="#">iPhone</a></li>
      					<li><a href="#">Xperia</a></li>
      					<li><a href="#">Galaxy</a></li>
      				  </ul>
      				</li>
      				<li>
      				  <a class="" href='#'>野菜 <i class=""></i></a>
      				  <ul class="sub-dropdown">
      					<li><a href="#">トマト</a></li>
      					<li><a href="#">レタス</a></li>
      					<li><a href="#">枝豆</a></li>
      				  </ul>
      				</li>
      			  </ul>  <!-- dropdown-menu -->
      			</li>  <!-- dropdown -->

      			<li class="dropdown">
      			  <a class="" data-toggle="dropdown" href="index.html">order <i></i></a>     
  				  <ul class="dropdown-menu">
   					<li><a class="" href='#'>自分用</a></li>
     				<li><a class="" href='#'>他人用</a></li>
     			  </ul>  <!-- dropdown-menu -->
      			</li>  <!-- dropdown -->

            	<li class="dropdown">
	              <a class="" data-toggle="dropdown" href="index.html">contact <i></i></a>
    		      <ul class="dropdown-menu">
           		    <li><a class="" href='#'>フォーム</a></li>
	                <li><a class="" href='#'>電話</a></li>
    	          </ul>  <!-- dropdown-menu -->
          		</li>  <!-- dropdown -->

    		  </ul>  <!-- nav navbar-nav -->
    		</div>  <!-- gnav collapse navbar-collapse -->

          </nav>  <!-- navbar navbar-default  -->
        </div>  <!-- header-right -->

        </div>  <!-- clearfix -->
      </div>  <!-- row -->
    </div>  <!-- container -->
  </header>

</div>  <!-- wrapper -->

Ah, I usually use clearfix in <div class="row"> or in <header> not in <div id="header-left">, but I wrote that in <div id="header-left">.

Upvotes: 1

Answers (2)

Gleb Kemarsky

Reputation: 10398

You can use the .navbar-right class:

Align nav links, forms, buttons, or text, using the .navbar-left or .navbar-right utility classes. Both classes will add a CSS float in the specified direction. For example, to align nav links, put them in a separate <ul> with the respective utility class applied.

Please check the result. Is it what you want to achieve?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header"><button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-expanded="false">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="" class="navbar-brand">Brand</a>
    </div>
    <div id="bs-navbar" class="collapse navbar-collapse">
       <ul class="nav navbar-nav navbar-right">
        <li><a href="">Right 1</a></li>
        <li><a href="">Right 2</a></li>
        <li><a href="">Right 3</a></li>
      </ul>
    </div>
  </div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Update

I've used <ul class="nav navbar-nav navbar-right"> instead of <ul class="nav navbar-nav"> in your code:

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<div class="wrapper">

  <!-- Header -->
  <header id="header" class="header">
    <div class="container" id="header-inner">
      <div class="row">

      <div id="header-left" class="clearfix">
        <div id="logo" class="logo">
          <a href="#">
            <img src="http://i.huffpost.com/gen/4252154/images/o-EMBLEM-facebook.jpg" alt="logo" id="logo-img" class="logo-img" height="35" width="150">
          </a>
        </div>  <!-- logo  -->
      </div>  <!-- header-left -->

      <div id="header-right">
        <nav class="navbar navbar-default" id="">

   			<div class="navbar-header">
   			  <a class="navbar-brand" href="#">Apple Juice</a>
   			  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-main">
   				<span class="icon-bar"></span>
   				<span class="icon-bar"></span>
   				<span class="icon-bar"></span>
   			  </button>
   			</div>  <!-- navbar-header -->

   			<!-- Global Navigation -->
   			<div class="gnav collapse navbar-collapse" id="navbar-main">
   			  <ul class="nav navbar-nav navbar-right">
   				<li class="dropdown active">
   				  <a class="" data-toggle="dropdown" href="index.html">Home <i></i></a>
   				  <!-- Dropdown -->
   				  <ul class="dropdown-menu">
   					<li>
   					  <a class="" href='#'>ジュース <i class=""></i></a>
   					  <ul class="sub-dropdown">
      					<li><a href="#">オレンジ</a></li>
      					<li><a href="#">アップル</a></li>
      					<li><a href="#">グレープ</a></li>
      				  </ul>
      				</li>
      				<li>
      				  <a class="" href='#'>寿司 <i class=""></i></a>
      				  <ul class="sub-dropdown">
      					<li><a href="#">マグロ</a></li>
      					<li><a href="#">サーモン</a></li>
      					<li><a href="#">エンガワ</a></li>
      				  </ul>
      				</li>
      			  </ul>  <!-- dropdown-menu -->
      			</li>  <!-- dropdown active-->

      			<li class="dropdown">
      			  <a class="" data-toggle="dropdown" href="index.html">items <i class="fa fa-angle-down" aria-hidden="true"></i></a>
      			  <ul class="dropdown-menu">
      				<li>
      				  <a class="" href='#'>スマートフォン <i class=""></i></a>
      				  <ul class="sub-dropdown">
      					<li><a href="#">iPhone</a></li>
      					<li><a href="#">Xperia</a></li>
      					<li><a href="#">Galaxy</a></li>
      				  </ul>
      				</li>
      				<li>
      				  <a class="" href='#'>野菜 <i class=""></i></a>
      				  <ul class="sub-dropdown">
      					<li><a href="#">トマト</a></li>
      					<li><a href="#">レタス</a></li>
      					<li><a href="#">枝豆</a></li>
      				  </ul>
      				</li>
      			  </ul>  <!-- dropdown-menu -->
      			</li>  <!-- dropdown -->

      			<li class="dropdown">
      			  <a class="" data-toggle="dropdown" href="index.html">order <i></i></a>     
  				  <ul class="dropdown-menu">
   					<li><a class="" href='#'>自分用</a></li>
     				<li><a class="" href='#'>他人用</a></li>
     			  </ul>  <!-- dropdown-menu -->
      			</li>  <!-- dropdown -->

            	<li class="dropdown">
	              <a class="" data-toggle="dropdown" href="index.html">contact <i></i></a>
    		      <ul class="dropdown-menu">
           		    <li><a class="" href='#'>フォーム</a></li>
	                <li><a class="" href='#'>電話</a></li>
    	          </ul>  <!-- dropdown-menu -->
          		</li>  <!-- dropdown -->

    		  </ul>  <!-- nav navbar-nav -->
    		</div>  <!-- gnav collapse navbar-collapse -->

          </nav>  <!-- navbar navbar-default  -->
        </div>  <!-- header-right -->

        </div>  <!-- clearfix -->
      </div>  <!-- row -->
    </div>  <!-- container -->
  </header>

</div>  <!-- wrapper -->

Upvotes: 1

Gautam

Reputation: 825

your css is wrong please replace one of properties as

#header-left {
        float: left;
        display: inline-block;
    }

This will make sure your left block takes only area that it fits into.

Upvotes: 1

How to put logo on left and menu on right?

Answers (2)

Update

Related Questions