CODEWITHSUNDEEP
htmlcss
Pelicer
Pelicer

Reputation: 1584

My Sidenav blocks content from page

I'm using a sidebar navigation with a fixed position. The problem is that it blocks the content behind it on every opened page:

enter image description here

And it is not suposed to be like this. When the screen changes it's size, I want the sidebar and the page content to be side by side, instead one is over the other. How can I make it happen? The HTML and CSS code of the side bar follows:

HTML:

    <div class="sidenav">
    @Html.ActionLink("Home", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
    @Html.ActionLink("Vendedores", "Index", "Vendedores", new { area = "" }, new { @class = "navbar-brand" })
    @Html.ActionLink("Vendas", "Index", "Venda", new { area = "" }, new { @class = "navbar-brand" })

    <footer class="footer">
        <p>&copy; @DateTime.Now.Year - Vendedores</p>
    </footer>

</div>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

<div class="container body-content">
    @RenderBody()
    <hr />
</div>

CSS:

    /*CSS da barra lateral*/
.sidenav {
    height: 100%;
    width: 250px;
    position: fixed;
    z-index: 1;
    float: left;
    top: 0;
    left: 0;
    background-color: #111;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}
/* 2017 - Vendedores*/
.footer {
    color: #818181;
    position: fixed;
    left: 2%;
    bottom: 0px;
    width: 100%;
}

Upvotes: 0

Views: 1070

Answers (2)

Tom DARBOUX
Tom DARBOUX

Reputation: 550

you have several possibilities :

  1. set a margin-left for your body-content which be the width of your nav.
  2. dont't use position:fixed but just float:left.
  3. Use flex-layout like this:

 body
 {
  display:flex;
  flex-direction: row;
  width:100%;
  height:200px
 }
 
 nav
 {
  
    height: 100%;
    width: 250px;
    background-color: #111;
color:white;
 
 }


  section
  {
    flex:1;
    background-color:red;
  }
<body>
<nav>
 navigation bar
</nav>
<section>
</section>
</body>

Upvotes: 1

phurst-so
phurst-so

Reputation: 386

Give your main content a left margin the same width as your fixed side-bar.. IE..

margin-left: 100px;

Upvotes: 1

Related Questions