How to put logo on left and menu on right? - html

Question

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>オレンジ</li>
<li>アップル</li>
<li>グレープ</li>
</ul>
</li>
<li>
<a class="" href='#'>寿司 <i class=""></i></a>
<ul class="sub-dropdown">
<li>マグロ</li>
<li>サーモン</li>
<li>エンガワ</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>iPhone</li>
<li>Xperia</li>
<li>Galaxy</li>
</ul>
</li>
<li>
<a class="" href='#'>野菜 <i class=""></i></a>
<ul class="sub-dropdown">
<li>トマト</li>
<li>レタス</li>
<li>枝豆</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">.

Answer 1

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.

Answer 2

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>
Brand
</div>
<div id="bs-navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Right 1</li>
<li>Right 2</li>
<li>Right 3</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>オレンジ</li>
<li>アップル</li>
<li>グレープ</li>
</ul>
</li>
<li>
<a class="" href='#'>寿司 <i class=""></i></a>
<ul class="sub-dropdown">
<li>マグロ</li>
<li>サーモン</li>
<li>エンガワ</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>iPhone</li>
<li>Xperia</li>
<li>Galaxy</li>
</ul>
</li>
<li>
<a class="" href='#'>野菜 <i class=""></i></a>
<ul class="sub-dropdown">
<li>トマト</li>
<li>レタス</li>
<li>枝豆</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 -->