Html Question posted in
Some basic documentation can be found here.

Html – Navbar overlapping with Slidebar

I have a test website with a navbar and slidebar. I’m trying to get the sidebar to stack over the navbar or resize the navbar.

The footer is fine, I think, because it’s position is fixed. I would like the navbar to nest under the slidebar or resize.

I am using is bootstrap 3 and JS.
Here is the code

function openNav() {
  document.getElementById("Sidebar").style.width = "300px";
  document.getElementById("main").style.marginLeft = "0px";
}

function closeNav() {
  document.getElementById("Sidebar").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}
html {
  font-size: 100%;
}

body {
  font-size: 15px;
  font-size: 0.9375rem;
  font-family: "Open sans", Helvetica, Arial, sans-serif;
  color: #666666;
  padding: 0;
  background-color: #cccccc;
}

.topspace {
  margin-top: 40px;
}

.navbar {
  border-width: 1px 0;
  -webkit-border-radius: 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0;
  -moz-background-clip: padding;
  border-radius: 0;
  background-clip: padding-box;
  width: 100%;
  margin-top: 20%;
}

.navbar.stick {
  position: fixed;
  top: 0;
  left: 0;
  opacity: .85;
}

.navbar-collapse {
  -webkit-border-radius: 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0;
  -moz-background-clip: padding;
  border-radius: 0;
  background-clip: padding-box;
  font-family: "Open sans", Helvetica, Arial, sans-serif;
  font-weight: 300;
  text-transform: uppercase;
}

.navbar-collapse .navbar-nav {
  float: none;
  margin: 0 auto;
  text-align: center;
}

.navbar-collapse .navbar-nav>li {
  float: none;
  display: inline-block;
}

.navbar-collapse .navbar-nav>li>a {
  padding: 20px 30px;
}

.dropdown ul.dropdown-menu {
  top: 85%;
  text-align: left;
}

.dropdown ul.dropdown-menu>li>a {
  padding: 5px 30px;
}

.navbar-default {
  background-color: #ffffff;
  border-color: #cccccc;
}

.navbar-default .navbar-nav>li>a {
  color: #454545;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
  color: #000000;
  background-color: #ffffff;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
  color: #000000;
  background-color: #ffffff;
}

.navbar-default .dropdown ul.dropdown-menu>li>a {
  color: #454545;
}

.navbar-default .dropdown ul.dropdown-menu>li>a:hover {
  background-color: #eeeeee;
  color: #000000;
}

.navbar-default .navbar-toggle {
  border-color: #666666;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #ffffff;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #333333;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #cccccc;
}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
  background-color: #ffffff;
  color: #000000;
}

.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
  color: #f1f1f1;
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidebar {
    padding-top: 15px;
  }
  .sidebar a {
    font-size: 18px;
  }
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.no-icons.min.css" rel="stylesheet">

<body class="home">

  <header id="header">
    <nav class="navbar navbar-default navbar-sticky">
      <div class="container-fluid">

        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
          <a href="test.php" type="button" class="btn btn-default btn-xs">
            <span href="google.com" class="lang-lg" lang="en"></span>
          </a>
        </div>

        <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">

          <ul class="nav navbar-nav">
            <li><a href="index.html">Home</a></li>
            <li><a onclick="openNav()">Open</a></li>
          </ul>

        </div>
      </div>
    </nav>
  </header>

  <aside>
    <div id="Sidebar" class="sidebar">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
      <a href="#">Info</a>
      <a href="#">Info</a>
    </div>
  </aside>
</body>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    For my issue, This can be solved by adding z-index: 0; to .navbar.

    .navbar {
    ......
    ......
    z-index: 0;
}

    Perhaps it will be helpful to someone.


  2. 0

    In order for z-index to have any affect you need to make sure that the position is not static. Any element that is positioned statically has the characteristics below.

    The element is positioned according to the Normal Flow of the
    document. The top, right, bottom, left, and z-index properties have no
    effect. This is the default value.

    Since setting the position: relative is like position: static except that it allows you to change an element’s position that would be the appropriate option here.

    In the code snippet above if you find the element with the id of header and apply some CSS that looks like this you will end up with the header going behind the aside navigation menu.

    #header {
  position: relative;
  z-index: 1;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search