CODEWITHSUNDEEP
htmlcss
Matthew Ahn
Matthew Ahn

Reputation: 13

How to float Sidebar from Left to Right

I need a bit of help in how to float my Sidebar from left to right. the float:right; style doesn't seem to be effective, any advice?

.sidenav {
  float: right;
  top: 50%;
  transform: translatey(-50%);
  position: fixed;
  z-index: 10000;
  width: 9.375em;
  align-items: center;
  background-color: #fff;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 6px 10px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 6px 10px;
  box-shadow: rgba(0, 0, 0, 0.1) 0 6px 10px;
  padding: 1.5em;
  overflow-x: hidden;
}
<div class="sidenav">
  <a href="#section-1">Cosmo</a>
  <a href="#section-2">Overview</a>
  <a href="#section-3">Challenge</a>
  <a href="#section-4">How Might We</a>
  <a href="#section-5">Solution</a>
  <a href="#section-6">Project Objective</a>
  <a href="#section-7">Research</a>
  <a href="#section-8">Target Users</a>
  <a href="#section-9">Machine Learning</a>
  <a href="#section-10">Project Design</a>
  <a href="#section-11">User Testing</a>
  <a href="#section-12">Prototype</a>
  <a href="#section-13">Reflections</a>
  <a href="#section-14">Future Improvements</a>
</div>

Thank you.

Upvotes: 1

Views: 105

Answers (3)

Ali Hamza Yaseen
Ali Hamza Yaseen

Reputation: 140

.sidenav {
    top: 50%;
    right: 0;
    transform: translate(-50% , -50%);
    position: fixed;
    z-index: 10000;
    width: 9.375em;
    align-items: center;
    background-color: #fff;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    -webkit-box-shadow: rgb(0 0 0 / 10%) 0 6px 10px;
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 6px 10px;
    box-shadow: rgb(0 0 0 / 10%) 0 6px 10px;
    padding: 1.5em;
    overflow-x: hidden;
}

Upvotes: 0

Sahar Ebrahimi
Sahar Ebrahimi

Reputation: 115

you should use right and left when you use position:fixed , set them to each value you want in px or others.

Upvotes: 0

tacoshy
tacoshy

Reputation: 13008

position: fixed moves an element out of the flow. As such float will not work as it has no place to float at in the first place. The element is no longer part of the normal flow and will be aligned by the fixed position. Add right: 0; to move the element to the right

.sidenav {
  top: 50%;
  transform: translatey(-50%);
  position: fixed;
  right: 0;
  z-index: 10000;
  width: 9.375em;
  align-items: center;
  background-color: #fff;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 6px 10px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 6px 10px;
  box-shadow: rgba(0, 0, 0, 0.1) 0 6px 10px;
  padding: 1.5em;
  overflow-x: hidden;
}
<div class="sidenav">
  <a href="#section-1">Cosmo</a>
  <a href="#section-2">Overview</a>
  <a href="#section-3">Challenge</a>
  <a href="#section-4">How Might We</a>
  <a href="#section-5">Solution</a>
  <a href="#section-6">Project Objective</a>
  <a href="#section-7">Research</a>
  <a href="#section-8">Target Users</a>
  <a href="#section-9">Machine Learning</a>
  <a href="#section-10">Project Design</a>
  <a href="#section-11">User Testing</a>
  <a href="#section-12">Prototype</a>
  <a href="#section-13">Reflections</a>
  <a href="#section-14">Future Improvements</a>
</div>

Upvotes: 1

Related Questions