ただいまバックグラウンドにて画像を加工中です。

bootstrap3headernavbarheight高さを変更

2015年12月2日更新 view: 303 view
http://cdn.liginc.co.jp/wp-content/uploads/2015/06/552eb4aed1593e952e7a12c7b8a0e9e1.jpg

bootstrap3の高さを変更するには?

bootstrap3のheaderの高さを変更するのに苦労。
CSSがゴリゴリになっているので変更するのも難しい。
ということで
ヘッダーの高さを低くし、ログイン後、ログイン前、さらにはスマホ、PC表示でいい感じに見れるようにしました。

css

<style>





.navbar {
min-height: 0px !important;
font-size: 0.9em;
border-bottom: 1px solid #dfe6d9;

}

.navbar .dropdown-menu {
font-size: 0.9em;
margin: 0 !important;
padding: 0 !important;
}

.navbar .dropdown-menu li {
margin: 0 !important;
}

.navbar .dropdown-menu li a {
padding: 10px 15px;
}

.navbar .dropdown-menu li a:hover {
background-color: #ffcddd;
padding: 10px 15px;
}

.nav>li>a{
display: inline-block;
margin: 0 !important;
padding: 15px !important;
border-radius: 0 !important;
-moz-border-radius: 0 !important;
}


.navbar-brand {
height: auto;
padding: 5px 0 0 0;
}

.navbar-toggle {
margin-top: 5px;
margin-bottom: 5px;
}


.user-icon {
border: 2px #fff solid;
width: auto;
max-height: 22px;
border: 1px solid #ededed;
}



</style>

html

$loginを true , false にすることにより、ログイン前、ログイン後のデザインが変更されますよ。

スポンサードリンク
<?php


$login = true;


?>

<header>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="/" class="navbar-brand">
<img src="/img/logo.png" class="img-responsive center-block" />
</a>

<? if ($login): ?>

<!-- スマホ用開閉ボタン スマホの場合のみ表示 -->
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<img src="https://pbs.twimg.com/profile_images/378800000552767745/fb8f309e621d078cfe46250d73d38047_normal.png" class="img-circle user-icon" />
</button>



<? else: ?>
<a href="/users/login/" class="navbar-toggle">
ライター登録
</a>
<? endif; ?>



</div>





<div class="navbar-collapse collapse" id="navbar-main">


<!-- <ul class="nav navbar-nav">-->
<!-- <li><a href="/超おすすめ/show/">おすすめサイト一覧</a></li>-->
<!-- </ul>-->





<? if ($login): ?>



<ul class="nav navbar-nav navbar-right">

<li><a href="/peras/add/"><i class="fa fa-pencil"></i> 記事を書く</a></li>
<!-- PCの場合のみ表示 -->
<li class="dropdown hidden-xs">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
<img src="https://pbs.twimg.com/profile_images/378800000552767745/fb8f309e621d078cfe46250d73d38047_normal.png" class="img-circle user-icon" />
</a>
<ul class="dropdown-menu">
<li><a href="/users/mypage/">マイページへ</a></li>
<li><a href="/users/add/">プロフィール変更</a></li>
<li class="divider"></li>
<li><a href="/users/logout/">ログアウト</a></li>
</ul>
</li>


<!-- スマホの場合のみ表示 -->
<li class="visible-xs"><a href="/users/mypage/">マイページへ</a></li>
<li class="visible-xs"><a href="/users/add/">プロフィール変更</a></li>
<li class="divider visible-xs"></li>
<li class="visible-xs"><a href="/users/logout/">ログアウト</a></li>

</ul>


<? else: ?>
<!-- PCのみ表示される -->
<ul class="nav navbar-nav navbar-right">
<li><a href="/">ライター登録</a></li>
<li><a href="/peras/add/">ログイン</a></li>
</ul>
<? endif; ?>

</div>
</div>
</div>
</header>
スポンサードリンク

関連記事

関連カテゴリ