CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Shubham Mehta
Shubham Mehta

Reputation: 89

Navbar won't fix to the top

The code for the page is here

<?php
session_start();
require_once 'class.user.php';
$user_home = new USER();
$_SESSION['userSession'] = '';

/*if(!$user_home->is_logged_in())
{
    $user_home->redirect('index.php');
}*/

$stmt = $user_home->runQuery("SELECT * FROM tbl_users WHERE userID=:uid");
$stmt->execute(array(":uid"=>$_SESSION['userSession']));
$row = $stmt->fetch(PDO::FETCH_ASSOC);

?>

<!DOCTYPE html>
<html class="no-js">

    <head>
        <title><?php echo $row['userEmail']; ?></title>
        <!-- Bootstrap -->
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
        <link href="assets/styles.css" rel="stylesheet" media="screen">
        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

    </head>

    <body>
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container-fluid">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                    </a>
                    <a class="brand" href="#">Member Home</a>
                    <div class="nav-collapse collapse">
                        <ul class="nav pull-right">
                            <li class="dropdown">
                                <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> <i class="icon-user"></i> 
                                <?php echo $row['userEmail']; ?> <i class="caret"></i>
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a tabindex="-1" href="logout.php">Logout</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                        <ul class="nav">
                            <li class="active">
                                <a href="#">NavBar Link #1</a>
                            </li>
                            <li class="dropdown">
                                <a href="#" data-toggle="dropdown" class="dropdown-toggle">Let's try some dropdown links<b class="caret"></b>

                                </a>
                                <ul class="dropdown-menu" id="menu1">
                                    <li><a href="#">Link #1</a></li>
                                    <li><a href="#">Link #2</a></li>
                                    <li><a href="#">Link #3</a></li>
                                    <li><a href="#">Link #4</a></li>
                                    <li><a href="#">Link #5</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">One last NavBar link</a>
                            </li>


                        </ul>
                    </div>
                    <!--/.nav-collapse -->
                </div>
            </div>
        </div>      

        <span style="display: inline-block;"><h1>Refer to the alerts below</h1></span><span style="display: inline-block;"><h5>&nbsp;&nbsp;&nbsp;&nbsp;(Issued against the items' Reference Status)</h5></span>
        <h2>Inventory Table</h2> 
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>PartNo</th>
                        <th>MfrPartNo</th>
                        <th>MfrNo</th>
                        <th>PartDescription</th>
                        <th>PrimePart</th>
                        <th>PMA</th>
                        <th>KeyWord</th>
                        <th>PartType</th>
                        <th>PlanningType</th>
                        <th>ReferenceStatus</th>
                    </tr>
                </thead>
                <?php
                    $dbh = new PDO("mysql:host=localhost;dbname=dbtest", 'root', 'root');
                    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
                    $dbh->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
                    $sth = $dbh->prepare("SELECT `No`, `PartNo`, `MfrPartNo`, `MfrNo`, `PartDescription`, `PrimePart`, `PMA`, `KeyWord`, `PartType`, `PlanningType`, `ReferenceStatus` FROM part_no");
                    $sth->execute();
                ?>
                <?php foreach($sth->fetchAll() as $row) : if(($row["ReferenceStatus"]<2)&&($row["ReferenceStatus"]!="Active")){?>
                <tr>
                    <td><?php echo $row["No"]; ?></td>
                    <td><?php echo $row["PartNo"]; ?></td>
                    <td><?php echo $row["MfrPartNo"]; ?></td>
                    <td><?php echo $row["MfrNo"]; ?></td>
                    <td><?php echo $row["PartDescription"]; ?></td>
                    <td><?php echo $row["PrimePart"]; ?></td>
                    <td><?php echo $row["PMA"]; ?></td>
                    <td><?php echo $row["KeyWord"]; ?></td>
                    <td><?php echo $row["PartType"]; ?></td>
                    <td><?php echo $row["PlanningType"]; ?></td>
                    <td><?php echo $row["ReferenceStatus"]; ?></td>
                </tr>
                <?php }endforeach;?>
            </table>
        </div>


        <!--/.fluid-container-->
        <script src="bootstrap/js/jquery-1.9.1.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script src="assets/scripts.js"></script>

    </body>

</html>

Custom styles as assets/styles.css are here

/** Home Page **/
body {
    padding-top: 60px;
    padding-bottom: 40px;
    background-color: #F5F5F5;
}

/** Login Page **/
#login {
    padding-top: 40px;
    padding-bottom: 40px;
}

footer 
{
    text-align: center;

    font-family: monospace;
}
footer a
{
    text-decoration: none;
}
footer a:hover
{
    text-decoration: underline;
}
#love_footer_image
{
    display: inline-block;
    width: 1.1em;
    height: 0.9em;
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/4/42/Love_Heart_SVG.svg);
    background-size: cover;
}
#logo
{
    width: 77vmin;
    height: 23vmin;
    background-image: url(https://upload.wikimedia.org/wikipedia/hi/e/e3/Air_India_Logo.svg);
    background-size: cover;
    margin: 0 auto;
}

#login .form-signin {
    min-width: 77vmin;
    max-width: 300px;
    padding: 19px 29px 29px;
    margin: 0 auto 20px;
    overflow-y: hidden;

    background-color: #FDFCFC;
    border: 0.3em solid #C4082E;
    border-bottom: 0.3em solid #C4082E;
    border-right: 0.3em solid #C4082E;
    border-radius: 1em;

    /*background-color: #FDFCFC;
    border: 1px solid #e5e5e5;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
       -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
            box-shadow: 0 1px 2px rgba(0,0,0,.05);*/
}
#login .form-signin .form-signin-heading,
#login .form-signin .checkbox {
    margin-bottom: 10px;
}
#login .form-signin input[type="text"],
#login .form-signin input[type="password"],
#login .form-signin input[type="email"] {
    font-size: 16px;
    height: auto;
    margin-bottom: 15px;
    padding: 7px 9px;
}

/** 2 level sub menu **/
.dropdown-menu-with-subs .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  margin-top: -1px;
}

.dropdown-menu-with-subs li:hover .sub-menu {
  visibility: visible;
  display: block;
}

.navbar .sub-menu:before {
  border-bottom: 7px solid transparent;
  border-left: none;
  border-right: 7px solid rgba(0, 0, 0, 0.2);
  border-top: 7px solid transparent;
  left: -7px;
  top: 10px;
}
.navbar .sub-menu:after {
  border-top: 6px solid transparent;
  border-left: none;
  border-right: 6px solid #fff;
  border-bottom: 6px solid transparent;
  left: 10px;
  top: 11px;
  left: -6px;
}

/** Global **/
#content {
  margin-left:0px;
}
.hide-sidebar, .show-sidebar {
  cursor: pointer;
}
.padd-bottom {
  margin-bottom: 5px;
}
.breadcrumb {
    margin: 0 0 0px;
    padding: 10px 0px;
    background-color: transparent;
}

.block {
    border: 1px solid #ccc;
    background: white;
    margin: 1em 0em;
    border-top: none;
}

.block-content {
    margin: 1em;
    min-height: .25em;
}

.block-header {
    margin-bottom: 0px;
    border-right: none;
    border-left: none;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}
.block-header div {
    padding-top: 10px;
}


.chart-bottom-heading {
    margin-top: 5px;
    text-align: center;
}

/** Side Bar **/
.bs-docs-sidenav {
  max-width: 228px;
  margin: 30px 0 0;
  padding: 0;
  background-color: #fff;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
     -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
          box-shadow: 0 1px 4px rgba(0,0,0,.065);
}
.bs-docs-sidenav > li > a {
  display: block;
  width: 190px \9;
  margin: 0 0 -1px;
  padding: 8px 14px;
  border: 1px solid #e5e5e5;
}
.bs-docs-sidenav > li:first-child > a {
  -webkit-border-radius: 6px 6px 0 0;
     -moz-border-radius: 6px 6px 0 0;
          border-radius: 6px 6px 0 0;
}
.bs-docs-sidenav > li:last-child > a {
  -webkit-border-radius: 0 0 6px 6px;
     -moz-border-radius: 0 0 6px 6px;
          border-radius: 0 0 6px 6px;
}
.bs-docs-sidenav > .active > a {
  position: relative;
  z-index: 2;
  padding: 9px 15px;
  border: 0;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
  -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
     -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
          box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
}
/* Chevrons */
.bs-docs-sidenav .icon-chevron-right {
  float: right;
  margin-top: 2px;
  margin-right: -6px;
  opacity: .25;
}
.bs-docs-sidenav > li > a:hover {
  background-color: #f5f5f5;
}
.bs-docs-sidenav a:hover .icon-chevron-right {
  opacity: .5;
}
.bs-docs-sidenav .active .icon-chevron-right,
.bs-docs-sidenav .active a:hover .icon-chevron-right {
  opacity: 1;
}
.bs-docs-sidenav.affix {
  top: 40px;
}
.bs-docs-sidenav.affix-bottom {
  position: absolute;
  top: auto;
  bottom: 270px;
}

/* Icons
------------------------- */
.the-icons {
  margin-left: 0;
  list-style: none;
}
.the-icons li {
  float: left;
  width: 25%;
  line-height: 25px;
}
.the-icons i:hover {
  background-color: rgba(255,0,0,.25);
}

The problem is that the navbar when viewed at a mobile resolution, doesn't remain fixed to the top. Here is the screenshot attached and the extra vacant space at the top is marked by the double headed arrow

Screenshot

Could anyone please help me solve this?

Upvotes: 1

Views: 784

Answers (1)

Shubham Mehta
Shubham Mehta

Reputation: 89

I'm answering it myself as I was working on it by my own and found a workaround.

<style>
    @media only screen and (max-width: 980px)
    {
        #gap
        {
            display: none;
        }
    }
</style>

<div style="padding-top: 60px;" id="gap"></div>

Adding this to the general page code makes everything work as intended.

Upvotes: 1

Related Questions