CODEWITHSUNDEEP
htmlcsstwitter-bootstrapnavbar
CS Dude
CS Dude

Reputation: 451

Navbar % of Page Height

All I wanted was my Navbar to be a percentage of the pages height 5% with a minimum of say 128px this way my logo would always be at least 128px or larger.

The issue is that some reason this is just filling the page and appears to be using the logos size.

Code:

.navbar {
  background-color: #1b1b1b;
}

.navbar>.container-fluid
.navbar>.container-fluid>.navbar-header,
.navbar>.container-fluid>.navbar-header>.navbar-brand{
  height: inherit;
}

.navbar>.container-fluid {
  margin-left:  18%;
  margin-right: 18%;
  padding-left: 0;
  padding-right: 0;
}

.navbar-brand>img {
  height: 100%;
  width: auto;
}

.navbar-default .navbar-nav>li>a{
  color: white;
}
<!DOCTYPE html>
<html>
  <head>
    <title>OG Visuals</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

  </head>
  <body>
    
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <a class="navbar-brand" href="index.php"><img src="http://img.freepik.com/free-icon/telegram-logo_318-102687.jpg?size=338c&ext=jpg" alt="Logo" /></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="about.php">About</a></li>
            <li><a href="contact.php">Contact</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

Upvotes: 0

Views: 1329

Answers (2)

Supraja Ganji
Supraja Ganji

Reputation: 1207

Give height: 5vh; min-height: 128px; to navbar-header, height: 100% to container-fluid and height: inherit to navbar-header and navbar-brand

.navbar {
  background-color: #1b1b1b;
}

.navbar>.container-fluid>.navbar-header, .navbar>.container-fluid>.navbar-header>.navbar-brand{
  height: inherit;
 } 

.navbar>.container-fluid {
  margin-left:  18%;
  margin-right: 18%;
  padding-left: 0;
  padding-right: 0;
  height: 100%;
}

.navbar-brand>img {
  height: 100%;
  width: auto;
}

.navbar.navbar-default {
   height: 5vh;
   min-height: 128px; 
}

.navbar-default .navbar-nav>li>a{
  color: white;
}
<!DOCTYPE html>
<html>
  <head>
    <title>OG Visuals</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

  </head>
  <body>
    
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <a class="navbar-brand" href="index.php"><img src="http://img.freepik.com/free-icon/telegram-logo_318-102687.jpg?size=338c&ext=jpg" alt="Logo" /></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="about.php">About</a></li>
            <li><a href="contact.php">Contact</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

Upvotes: 2

Dotol
Dotol

Reputation: 406

If you inspect the element (div.navbar-brand and img respectively) you'll see that first: the .navbar-brand has height: inherit; this means that it will inherit. So one of many ways to fix this is to give .navbar-brand a height: 128px;

Upvotes: 0

Related Questions