What is the best way to position this sidebar on the right instead of the left?

I am having trouble implementing a responsive sidebar with a toggle icon. I found one on Codepen, but it is currently aligned to the left. How can I align it to the right?

I have been searching through the code and have tried using text-align and justify-self properties, but I cannot figure out where in the code it controls the alignment to make it display on the right side.

/* Primary Styles */
*, *::before, *::after {
   box-sizing: border-box;
}
...(the rest of the CSS code)...

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="s-layout">
<!-- Sidebar -->
<div class="s-layout__sidebar">
  <a class="s-sidebar__trigger" href="#0">
     <i class="fa fa-bars"></i>
  </a>
...(the rest of the HTML code)...

htmlcss

Answer №1

Take a look at this: the sidebar is positioned on the right and it adjusts responsively as well. 

  /* Primary Styles */
    *, *::before, *::after {
       box-sizing: border-box;
    }

    body {
       font-family: sans-serif;
       font-size: 1em;
       color: #333;
    }
    h1 {
      font-size: 1.4em;
    }
    em {
       font-style: normal;
    }
    a {
       text-decoration: none;
       color: inherit;
    } 
    /* Layout */
    .s-layout {
       display: flex;
       width: 100%;
       min-height: 100vh;
    }
    .s-layout__content {
       display: flex;
       justify-content: center;
       align-items: center;
       flex: 1;
    }
    /* Sidebar */
    .s-sidebar__trigger {
       z-index: 2;
       position: fixed;
       top: 0;
       right: 0;
       width: 4em;
       height: 4em;
       background: #192b3c;
    }
    .s-sidebar__trigger > i {
       display: inline-block;
       margin: 1.5em 0 0 1.5em;
       color: #f07ab0;
    }
    .s-sidebar__nav {
       position: fixed;
       top: 0;
       right: -176px;
       overflow: hidden;
       transition: all .3s ease-in;
       width: 15em;
       height: 100%;
       background: #243e56;
       color: rgba(255, 255, 255, 0.7);
    }
    .s-sidebar__nav:hover,
    .s-sidebar__nav:focus,
    .s-sidebar__trigger:focus + .s-sidebar__nav,
    .s-sidebar__trigger:hover + .s-sidebar__nav {
       right: 0;
    }
    .s-sidebar__nav ul {
       position: absolute;
       top: 4em;
       left: 0;
       margin: 0;
       padding: 0;
       width: 15em;
    }

    .s-sidebar__nav ul li {
       width: 100%;
    }

    .s-sidebar__nav-link {
       position: relative;
       display: inline-block;
       width: 100%;
       height: 4em;
    }

    .s-sidebar__nav-link em {
       position: absolute;
       top: 50%;
       left: 4em;
       transform: translateY(-50%);
    }

    .s-sidebar__nav-link:hover {
       background: #4d6276;
    }

    .s-sidebar__nav-link > i {
       position: absolute;
       top: 0;
       left: 0;
       display: inline-block;
       width: 4em;
       height: 4em;
    }

    .s-sidebar__nav-link > i::before {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
    }

    /* Mobile First */
    @media (min-width: 42em) {
       .s-layout__content {
          margin-left: 4em;
       }
       
       /* Sidebar */
       .s-sidebar__trigger {
          width: 4em;
       }
       
       .s-sidebar__nav {
          width: 4em;
          right: 0;
       }
       
       .s-sidebar__nav:hover,
       .s-sidebar__nav:focus,
       .s-sidebar__trigger:hover + .s-sidebar__nav,
       .s-sidebar__trigger:focus + .s-sidebar__nav {
          width: 15em;
       }
    }

    @media (min-width: 68em) {
       .s-layout__content {
          margin-left: 15em;
       }
       
       /* Sidebar */
       .s-sidebar__trigger {
          display: none
       }
       
       .s-sidebar__nav {
          width: 15em;
       }
       
       .s-sidebar__nav ul {
          top: 1.3em;
       }
    }
 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
    <div class="s-layout">
    <!-- Sidebar -->
    <div class="s-layout__sidebar">
      <a class="s-sidebar__trigger" href="#0">
         <i class="fa fa-bars"></i>
      </a>

      <nav class="s-sidebar__nav">
         <ul>
            <li>
               <a class="s-sidebar__nav-link" href="#0">
                  <i class="fa fa-home"></i><em>Home</em>
               </a>
            </li>
            <li>
               <a class="s-sidebar__nav-link" href="#0">
                 <i class="fa fa-user"></i><em>My Profile</em>
               </a>
            </li>
            <li>
               <a class="s-sidebar__nav-link" href="#0">
                  <i class="fa fa-camera"></i><em>Camera</em>
               </a>
            </li>
         </ul>
      </nav>
    </div>

    <!-- Content -->
    <main class="s-layout__content">
      <h1>Full View, Please!</h1>
    </main>
    </div>

Answer №2

/* Custom Styles */
*, *::before, *::after {
   box-sizing: border-box;
}

body {
   font-family: sans-serif;
   font-size: 1em;
   color: #333;
}

h1 {
  font-size: 1.4em;
}

em {
   font-style: normal;
}

a {
   text-decoration: none;
   color: inherit;
} 

/* Page Layout */
.s-layout {
   display: flex;
   width: 100%;
   min-height: 100vh;
}

.s-layout__content {
   display: flex;
   justify-content: center;
   align-items: center;
   flex: 1;
}

/* Sidebar Styling */
.s-sidebar__trigger {
   z-index: 2;
   position: fixed;
   top: 0;
   right: 0;
   width: 100%;
   height: 64px;
   background: #192b3c;
}

.s-sidebar__trigger > i {
   display: inline-block;
   margin: 1.5em 0 0 1.5em;
   color: #f07ab0;
}

.s-sidebar__nav {
   position: fixed;
   top: 0;
   right: -15em;
   overflow: hidden;
   transition: all .3s ease-in;
   width: 15em;
   height: 100%;
   background: #243e56;
   color: rgba(255, 255, 255, 0.7);
}

.s-sidebar__nav:hover,
.s-sidebar__nav:focus,
.s-sidebar__trigger:focus + .s-sidebar__nav,
.s-sidebar__trigger:hover + .s-sidebar__nav {
   right: 0;
}

.s-sidebar__nav ul {
   position: absolute;
   top: 4em;
   right: 0;
   margin: 0;
   padding: 0;
   width: 15em;
}

.s-sidebar__nav ul li {
   width: 100%;
}

.s-sidebar__nav-link {
   position: relative;
   display: inline-block;
   width: 100%;
   height: 4em;
}

.s-sidebar__nav-link em {
   position: absolute;
   top: 50%;
   right: 4em;
   transform: translateY(-50%);
}

.s-sidebar__nav-link:hover {
   background: #4d6276;
}

.s-sidebar__nav-link > i {
   position: absolute;
   top: 0;
   right: 0;
   display: inline-block;
   width: 4em;
   height: 4em;
}

.s-sidebar__nav-link > i::before {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}


   .s-layout__content {
      margin-right: 4em;
   }
   
   /* Custom Sidebar */
   .s-sidebar__trigger {
   width: 4em;
   }
   
   .s-sidebar__nav {
      width: 4em;
      right: 0;
   }
   
   .s-sidebar__nav:hover,
   .s-sidebar__nav:focus,
   .s-sidebar__trigger:hover + .s-sidebar__nav,
   .s-sidebar__trigger:focus + .s-sidebar__nav {
      width: 15em;
   }

.filler {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #192b3c;
  height: 64px;
  width: 100%;
 }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="s-layout">
<!-- Sidebar -->
<div class="s-layout__sidebar">
  <a class="s-sidebar__trigger" href="#0">
     <i class="fa fa-bars"></i>
  </a>

  <nav class="s-sidebar__nav">
     <ul>
        <li>
           <a class="s-sidebar__nav-link" href="#0">
              <i class="fa fa-home"></i><em>Home</em>
           </a>
        </li>
        <li>
           <a class="s-sidebar__nav-link" href="#0">
             <i class="fa fa-user"></i><em>My Profile</em>
           </a>
        </li>
        <li>
           <a class="s-sidebar__nav-link" href="#0">
              <i class="fa fa-camera"></i><em>Camera</em>
           </a>
        </li>
     </ul>
  </nav>
</div>

<!-- Main Content -->
<main class="s-layout__content">
  <div class="filler"></div>
  <h1>Enjoy the Full View!</h1>
</main>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize Python and BeautifulSoup for parsing HTML with multiple tags and classes

I am currently attempting to navigate through a complex HTML structure. Here is the snippet of the HTML code: <div class="example one"> <ol class="example two"> <li class="example three"> My object ...

pythonhtmlbeautifulsoup

Issue with bootstrap accordion not collapsing other open tabs automatically

I'm struggling to incorporate a Bootstrap accordion collapse feature into my project, specifically with the auto-collapsing functionality. In the scenario where there are 3 divs labeled A, B, and C, if A is open and I click on B, A should automaticall ...

csstwitter-bootstrap

The bubble dialogue box in my picture

Looking to create a panel with images that, when clicked on, display an info window similar to Google Map's pin maker. When you click on an image, a balloon should appear containing additional information. Check out this example <a id="infowindow ...

jquerycsszurb-foundation

Accessing video durations in Angular 2

Can anyone help me with retrieving the video duration from a list of videos displayed in a table? I attempted to access it using @ViewChildren and succeeded until encountering one obstacle. Although I was able to obtain the query list, when attempting to a ...

htmlangulartypescript

Substitute the information in the table with new data

I am working with an HTML table that has 5 columns, one of which contains dates. I need to convert the date format only if the data is not empty. To achieve this, I am utilizing moment.js for date formatting. While the date format conversion works perfect ...

javascripthtmljquerycss

Alter the URL for Jquery AJAX post by utilizing radio buttons

I have a product search box that allows users to search by Cartridge Name or Printer Name. These are different SQL queries, so I have created separate PHP files for each query. However, I am facing challenges in using jQuery to check the value of the radio ...

htmljqueryajaxradio-button

Incorporate a fontawesome icon into a dynamically created button using ajax

Is it possible to insert fontawesome icons into a button created using this code snippet? $.each(response, function (i, item) { trHTML += '<tr><td>' + item.name + '</td><td>' + "<input type='button&apo ...

javascriptjqueryhtmlajaxbutton

Is it possible to replace text on click using CSS instead of jQuery?

My new project involves creating a flashcard system. The idea is that when a question is clicked, it reveals the answer and hides the question. To achieve this, I am currently using the following code: jsFiddle <p id="shown">What is stackoverflow?&l ...

jqueryhtmlcssclickshow-hide

Is there a way for me to view the contents within the box?

Hey there! I have a question about how to access the content inside this mysterious box "" within the style sheet. For instance, I am curious to find out the link of the image: .facebookicon::before { content: ""; } ...

csscss-content

Get the page downloaded before displaying or animating the content

Is there a method to make a browser pause and wait for all the content of a page to finish downloading before displaying anything? My webpage has several CSS3 animations, but when it is first loaded, the animations appear choppy and distorted because the ...

javascriptjqueryhtmlanimationbrowser

Step-by-step guide for serving static JavaScript files using NextJS

I am currently exploring the process of hosting static js and css files using NextJS. My journey began with creating a react app through create-react-app, where I developed an App component before executing the npm run build command. This resulted in the ...

javascripthtmlcssreactjsnext.js

What is the best way to keep an image fixed at the bottom, but only when it's out of view in the section

There are two buttons (images with anchors) on the page: "Download from Google Play" and "Download from App Store". The request is to have them stick to the bottom, but once the footer is reached they should return to their original position. Here are two ...

javascriptjqueryhtmlcssfrontend

The children's className attribute can impact the parent element

As I work on creating a card object, I envision it with the className .card that is styled in CSS as follows: .card img{position:absolute; width:150px; height:160px} I want only the images inside my div to overlap each other while not affecting the divs ...

javascripthtmlcss

Javascript code that enables me to specify the type of weather

My intention with this code was to create unique characteristics for different weather types and randomly select one by generating a random number. I defined 11 different weather types as objects of the Weather class. I then implemented a getWeather funct ...

javascripthtml

Getting the value of a variable within the scope of AngularJS can be achieved by utilizing

I have an ng-repeat directive in my code that displays slides. Here is a snippet of the data: slides = [{ src: "/sikiosk/slidedata/Global/NA/USNS/Cafeteria/5000_24.jpg", interval: 5000 }, { src: "/sikiosk/slidedata/Global/NA/USNS/Cafeteria/5000_login-regi ...

javascripthtmlangularjsangularjs-ng-repeat

What is the best way to format PHP emailed content from a web form?

Currently, I am working on a web contact page and facing an issue where the emails being sent arrive as plain text. I would like to enhance them by adding a background, incorporating the organization's logo, and styling the text to align with the webs ...

phphtmlcssemailcontact-form

Encountering issue: LineChart is not recognized as a constructor, resulting in failure to display chart on webpage

I am struggling with displaying a chart in my HTML file that should show the details of a specific process from the past few minutes. Whenever I try to initialize the chart using google.charts.load('current', {'packages':['line&apo ...

htmlangularjsnode.jsgoogle-visualization

Ways to incorporate ng-app into an HTML element when HTML access is limited

In my current project, I am using Angular.js within a template system. The challenge I am facing is that I need to add ng-app to the html element, but I do not have direct access to do this on the page itself. Initially, my page structure looks like this: ...

javascriptjqueryhtmlangularjs

What is the best way to trigger a new css animation on an element that is already in the midst of

Let's talk about an element that already has an animation set to trigger at a specific time: .element { width: 100%; height: 87.5%; background: #DDD; position: absolute; top: 12.5%; left: 0%; -webkit-animation: load 0.5s ease-out 5s bac ...

javascriptcsscss-animations

What's causing these divs to be misaligned in various directions?

I am currently working with a front-end framework based on flexbox called Material-UI, and I have noticed that the layout of certain components, particularly the quantity control elements, appears to be different even though they all share the same styling ...

javascriptcssreactjsflexboxmaterial-ui