website fixed sidebar | How To Create a Fixed Sidebar left side and right side

Create a Fixed SidebarLeft 
Add CSS with html

Example:
<style>
.sideleftnav {
    height: 115%;
    width: 160px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #white;
    overflow-x: hidden;
    padding-top: 20px;
}

.sideleftnav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    color: #white;
    display: block;
}

.sideleftnav a:hover {
    color: #white;
}

.main {
    margin-left: -10px; /* Same as the width of the sideleftnav */
    padding: 0px 10px;
}

@media screen and (max-height: 450px) {
    .sideleftnav {padding-top: 15px;}
}


@media screen and (max-width: 1280px) {
    .sideleftnav {display: None;}
}

</style>

<!-- Adssense Sample -->
<div class="sideleftnav">
   <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>   
     <!-- leader board -->
    <ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXX"
     data-ad-slot="XXX"
     data-ad-format="auto"></ins>
  <script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
Create a Fixed Sidebar Right 
Add CSS with html

Example:
<style>
.siderightnav {
    height: 115%;
    width: 160px;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #white;
    overflow-x: hidden;
    padding-top: 20px;
}

.siderightnav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    color: #white;
    display: block;
}

.siderightnav a:hover {
    color: #white;
}

.main {
    margin-right: -10px; /* Same as the width of the siderightnav */
    padding: 0px 10px;
}

@media screen and (max-height: 450px) {
    .siderightnav {padding-top: 15px;}
}


@media screen and (max-width: 1280px) {
    .siderightnav {display: None;}
}

</style>

<!-- Adsense Sample -->

<div class="siderightnav">
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- leader board -->
    <ins class="adsbygoogle"
      style="display:block"
      data-ad-client="ca-pub-XXX"
      data-ad-slot="XXX"
      data-ad-format="auto"></ins>
   <script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
Sample:

Post a Comment

0 Comments