2016-09-01 9 views
0

ブートストラップを使用して2つのナビゲーションバーを作成しようとしていますが、それらは両方とも画面の上にあります。しかし、どうにかして、第2のnavbarのmin-heightまたはheightを変更することはできません。サブナブバーの高さを変更できません

min-heightの値を40pxに変更しようとしましたが、何も影響しませんでした。

body { 
    margin: 0px; 
    width: 100%; 
    height: 100%; 
    background-color: #f2f2f2; 
} 

.logo { 
    width: 101px; 
    height:25px; 
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGUAAAAZCAYAAAAonOB1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA85pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wUmlnaHRzPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvcmlnaHRzLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcFJpZ2h0czpNYXJrZWQ9IkZhbHNlIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InV1aWQ6Q0NDNTU3RTk4QTcwRTMxMTgyMDA5RjhGNUM0NEY2OEYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkE5REE3NTU2RkIzMTFFNjlDMkJCQjQ2REEwQTZFNjciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkE5REE3NTQ2RkIzMTFFNjlDMkJCQjQ2REEwQTZFNjciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoV2luZG93cykiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1ZGVjY2MzNC1hMmY3LTM0NDgtYTJkMC04OGJh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); 
} 

/* Navbar */ 

.navbar { 
    min-height: 52px !important; 
    line-height: 52px !important; 
    background-color: #3d3d3d !important; 
    border-radius: 0px !important; 
    border: none !important; 
    margin-bottom: 0px !important; 
} 

.navbar-brand { 
    padding: 12px 15px !important; 
} 

.navbar-default .navbar-nav>li>a { 
    font-family: "Segoe UI"; 
    font-size: 12px; 
    font-style: normal; 
    font-variant: normal; 
    font-weight: bold; 
    color: #f2f2f2 !important; 
} 

.navbar-default .navbar-nav>li>a:hover { 
    color: #a1a1a1 !important; 
} 

.navbar_icons { 
    color: #a8a8a8 !important; 
    margin-left: 10px; 
    font-size: 14px; 
} 

.navbar_icons:hover { 
    color: #fff !important; 
    cursor: pointer; 
} 

/* Subnavbar */ 

.subnavbar { 
    background-color: #fff !important; 
    min-height: 40px !important; 
} 

/* Canvas */ 

#screen { 
    width: 100%; 
    height: 500px; 
} 

.no_padding { 
    padding: 0px !important; 
} 

サイトのプレビューがここで見ることができます::Link to site

ん次のような

<?php 
    require_once('handling/classes/site_config_class.php'); 
    $site_config = new site_config_class(); 
?> 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title><?php echo $site_config->site_title_home; ?></title> 
    <!-- Stylesheet includes --> 
    <link href="assets/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="assets/css/stylesheet.css" rel="stylesheet"> 
    <!-- Core include --> 
    <script src="handling/core/engine/babylon.2.4.core.js"></script> 
    <!-- Core js include --> 
    <script src="handling/core/js/initScene.js"></script> 
</head> 
<body> 
    <nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="#"> 
        <div class="logo"></div> 
       </a> 
      </div> 

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
        <li class="navbar_active"><a href="#">DASHBOARD</a></li> 
        <li><a href="#">ENTER WORLD</a></li> 
        <li><a href="#">WARDROBE</a></li> 
        <li><a href="#">SHOPPING</a></li> 
        <li><a href="#">DESIGNER</a></li> 
        <li><a href="#">PURCHASE</a></li> 
       </ul> 

       <ul class="nav navbar-nav navbar-right"> 
        <span class="glyphicon glyphicon-comment navbar_icons" aria-hidden="true"></span> 
        <span class="glyphicon glyphicon-bell navbar_icons" aria-hidden="true"></span> 
        <span class="glyphicon glyphicon-shopping-cart navbar_icons" aria-hidden="true"></span> 
        <span class="glyphicon glyphicon-fullscreen navbar_icons" aria-hidden="true"></span> 
        <span class="glyphicon glyphicon-log-out navbar_icons" aria-hidden="true"></span> 
       </ul> 
      </div> 
     </div> 
    </nav> 
    <nav class="navbar navbar-default subnavbar"> 
     <div class="container-fluid"> 
      <ul class="nav navbar-nav"> 
       <li><a href="#">SHOPPING</a></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#">SHOPPING</a></li> 
      </ul> 
     </div> 
    </nav> 
    <div class="col-md-12 no_padding"> 
     <canvas id="screen"></canvas> 
    </div> 

    <!-- Javascript includes --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="assets/js/bootstrap.min.js"></script> 
</body> 
</html> 

私のCSSコード:

私の現在のHTMLコードは、次のようになります。誰も私がどのようにサブナヴァーを設定することができるか知っているheight 40px?

答えて

0

カスタムCSS、このCSSを追加しを与えて試すことができます

.subnavbar .navbar-nav> li > a { 
    padding-bottom: 10px; 
    padding-top: 10px; 
} 
0

あなたはそれが「高さ」だけでなく「最小高さ」

nav.subnavbar { 
    background-color: #fff !important; 
    height:40px; 
    min-height: 40px !important; 
    } 
0

あなたはためのいくつかのスタイルを持っているので、このような状況が起こりました.subnavbar .navbar-nav> li> a この要素の埋め込みを変更する必要があります

関連する問題