CODEWITHSUNDEEP
htmlcsscss-position
Vidal
Vidal

Reputation: 195

Change the place of a fixed Sidebar

This code:

<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    body {
    font-family: "Lato", sans-serif;
    }

    .sidenav {
    width: 130px;
    position: fixed;
    z-index: 1;
    top: 20px;
    left: 10px;
    background: #eee;
    overflow-x: hidden;
    padding: 8px 0;
    }

    .sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 25px;
    color: #2196F3;
    display: block;
    }

    .sidenav a:hover {
    color: #064579;
    }

    .main {
    margin-left: 140px; /* Same width as the sidebar + left position in px */
    font-size: 28px; /* Increased text to enable scrolling */
    padding: 0px 10px;
    }

    @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
    }
    </style>
    </head>
    <body>

    <div class="sidenav">
      <a href="#about">About</a>
      <a href="#services">Services</a>
      <a href="#clients">Clients</a>
      <a href="#contact">Contact</a>
        </div>
    <div class="main">
      <h2>Auto Sidebar</h2>
      <p>This sidebar is as tall as its content (the links), and is always             
      shown.</p>
     <p>Scroll down the page to see the result.</p>
     </div>
     </body>
     </html>

Produce a fixed slidebar in the left: enter image description here

But I want change the position to the right. Like this: enter image description here

so how can I put to the right the fixed slidebar? and which command can I move the the fixed sidebar around the page?

Thank you for the help :)

Upvotes: 2

Views: 712

Answers (4)

user8158111
user8158111

Reputation:

This will work.

var width = screen.width -138 +"px";
var sidenav = document.getElementById("sidenav");
sidenav.style.left = width;
body {
    font-family: "Lato", sans-serif;
    }

    .sidenav {
    width: 130px;
    position: fixed;
    z-index: 1;
    top: 20px;
    background: #eee;
    overflow-x: hidden;
    padding: 8px 0;
    }

    .sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 25px;
    color: #2196F3;
    display: block;
    }

    .sidenav a:hover {
    color: #064579;
    }

    .main {
    margin-left: 140px; /* Same width as the sidebar + left position in px */
    font-size: 28px; /* Increased text to enable scrolling */
    padding: 0px 10px;
    }

    @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
    }
<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    body {

    </style>
    </head>
    <body>

    <div class="sidenav" id="sidenav">
      <a href="#about">About</a>
      <a href="#services">Services</a>
      <a href="#clients">Clients</a>
      <a href="#contact">Contact</a>
        </div>
    <div class="main">
      <h2>Auto Sidebar</h2>
      <p>This sidebar is as tall as its content (the links), and is always             
      shown.</p>
     <p>Scroll down the page to see the result.</p>
     </div>
     </body>
     </html>

Upvotes: 0

Ylama
Ylama

Reputation: 2489

In this case you can just set .sidenav {right: 10px;} but then have to remove margin from .main and to see the content add a width on the .main div which you can adjust as you wish based on content.

Using .main {margin-right: 140px;} could also do, based on the size of the .sidediv {width: 130px;}.

body {
font-family: "Lato", sans-serif;
}

.sidenav {
width: 130px;
position: fixed;
z-index: 1;
top: 20px;
right: 10px;
background: #eee;
overflow-x: hidden;
padding: 8px 0;
}

.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block;
}

.sidenav a:hover {
color: #064579;
}

.main { 
font-size: 28px; /* Increased text to enable scrolling */
padding: 0px 10px;
width: 75%;
}

@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="sidenav">
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#clients">Clients</a>
  <a href="#contact">Contact</a>
    </div>
<div class="main">
  <h2>Auto Sidebar</h2>
  <p>This sidebar is as tall as its content (the links), and is always             
  shown.</p>
 <p>Scroll down the page to see the result.</p>
 </div>
 </body>
 </html>

Upvotes: 3

paciek
paciek

Reputation: 100

try this:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: "Lato", sans-serif;
}

.sidenav {
width: 130px;
position: fixed;
z-index: 1;
top: 20px;
right: 10px;
background: #eee;
overflow-x: hidden;
padding: 8px 0;
}

.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block;
}

.sidenav a:hover {
color: #064579;
}

.main {
margin-right: 140px; /* Same width as the sidebar + left position in px */
font-size: 28px; /* Increased text to enable scrolling */
padding: 0px 10px;
}

@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>

<div class="main">
  <h2>Auto Sidebar</h2>
  <p>This sidebar is as tall as its content (the links), and is always             
  shown.</p>
 <p>Scroll down the page to see the result.</p>
 </div>
  
  
<div class="sidenav">
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#clients">Clients</a>
  <a href="#contact">Contact</a>
    </div>
  
 </body>
 </html>

Upvotes: 2

Johannes
Johannes

Reputation: 67798

Just change the left setting to right for the sidebar and the margin-left to margin-right for main

body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  width: 130px;
  position: fixed;
  z-index: 1;
  top: 20px;
  right: 10px;
  background: #eee;
  overflow-x: hidden;
  padding: 8px 0;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #2196F3;
  display: block;
}

.sidenav a:hover {
  color: #064579;
}

.main {
  margin-right: 140px;
  /* Same width as the sidebar + left position in px */
  font-size: 28px;
  /* Increased text to enable scrolling */
  padding: 0px 10px;
}

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}
<div class="sidenav">
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#clients">Clients</a>
  <a href="#contact">Contact</a>
</div>
<div class="main">
  <h2>Auto Sidebar</h2>
  <p>This sidebar is as tall as its content (the links), and is always shown.
  </p>
  <p>Scroll down the page to see the result.</p>
</div>

Upvotes: 3

Related Questions