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

modify the color of a particular div element in real-time

I am looking to dynamically change the color of the divs based on values from my database. Here is what I have so far: Database: shape id is_success id1 0 id2 1 id3 0 id4 1 <div class="container" style="background: black; widt ...

javascriptphpjqueryhtmlajax

Click on the button to reveal the hidden content within the div, and then smoothly scroll down to view

I have a footer div that is present at the bottom of every page on our site. I've added a button to expand this div, but I'm looking for a way to automatically scroll the page down so that the user can view the expanded content without manually s ...

javascripthtmlcssscroll

Looking to extract data from various checkbox options and save it as an array variable

For a coding boot camp assignment, I'm working on a modal that includes options for the days of the week. My approach involves using Jquery .each and CSS :checked to retrieve the values assigned to each input. However, every time I attempt to log the ...

javascriptjqueryhtmlcss

Incorporating Selenium Python to display text results in a single-line format for enhanced output presentation

Looking for a way to extract data from the following HTML code: <div class="main"> <div class="firstdigitinside"> <span class="firstdigit"> <span class="firstdigithere>1 ...

pythonhtmlseleniumweb-scraping

Is there a way to separate a string similar to the way bbcode does?

$answer = "This is simply a placeholder text example. WOW! Check out this link [link=http://www.yahoo.com] yahoo yahoo[/link]"; Hey there, I am developing a discussion platform, and my goal is to allow users to use specific tags like [link=*link*]*text*[/ ...

phphtmlforum

Hovering over an SVG icon will trigger an animation

I am trying to achieve an animated effect on an SVG line icon only when it is hovered over. I want the icon to remain static when not being hovered. While I have managed to animate the drawing effect and make it work somewhat on hover, I am facing an issue ...

htmlcssanimationsvg

I have found that the CSS property command for multiple columns functions properly in Opera and IE, but unfortunately does not work in Firefox, Chrome, or Safari

When viewing the html code below, it appears as two columns in Opera and IE10, but only one column in Chrome, Safari, and Firefox. Can anyone explain why this is happening? The styling code [ body{column-count: 2} ] seems to only be effective in Opera and ...

htmlcss

The font size of the textarea dynamically adjusts based on the size of the screen

Some strange behavior is occurring in the Android default browser when I set the width and height of a textarea to 100%. The font size of the textarea seems to increase based on the screen size, and even though I attempted to alert the font-size using jQue ...

javascriptjquerycsstextarea

What is the best way to calculate the total duration (hh:mm) of all TR elements using jQuery?

I currently have 3 input fields. The first input field contains the start time, the second input field contains the end time, and the third input field contains the duration between the start and end times in HH:mm format. My goal is to sum up all the dur ...

javascripthtml

Guidelines for simultaneously modifying two dropdown select options

Is it possible to have one dropdown automatically change its value based on the selection made in another dropdown? For instance, if 'Value 1' is chosen from 'dropdown 1', can we set 'dropdown 2' to automatically display the ...

javascriptjqueryhtmlformsdrop-down-menu

What is the best way to position the left sidebar on top of the other components and shift them to the

Currently, I am working on a project to display NBA data fetched from an API. I am aiming to recreate the design showcased here: Dribbble Design My main challenge lies in overlaying the left sidebar onto the main box and shifting the components sligh ...

javascriptcssreactjs

Align the asp.net content generated towards the left side

I am looking to optimize the layout of my asp.net code by shifting the content on all pages to the left side of the screen for better efficiency. Despite my efforts, I have been unable to find a suitable CSS solution that works universally across all view ...

c#cssasp.netasp.net-mvc

How can we use JavaScript to close a dropdown menu when the user clicks outside of it?

I am facing an issue with my code. I want to close the dropdown menu when clicking outside of it or on the items within the dropdown. How can I achieve this? I attempted to use addEventListener('click', myFunction) on `document` but it did not w ...

javascripthtmlcssevent-listener

Navigate from the upper left corner to the lower right corner while hovering

Can you animate the movement of an element from the top-left to the bottom-right using CSS transitions like this? #example { width: 40px; height: 40px; background: red; position: absolute; top: 0; left: 0; transition: all 300ms ea ...

htmlcss

Animating SVGs in Internet Explorer (IE)

I'm currently working on an animation project using SVG images and JS, but unfortunately, I've run into a roadblock with SVG animations not functioning correctly in Internet Explorer. Do you happen to know of any solutions that could make it work ...

javascriptjqueryhtmlinternet-explorer

Adding a line break in a Buefy tooltip

I am trying to show a tooltip with multiple lines of text, but using \r\n or is not working. <b-tooltip label="Item 1 \r\n Item 2 \r\n Item 3" size="is-small" type="is-light" position="is-top" animated multilined> ...

javascripthtmlvue.jsvuejs2buefy

Struggling with pagination problems in Bootstrap 4 and looking to integrate QR code functionality into your blade template?

I am currently facing an issue with generating a batch of QR codes using the SimpleQR code generator in Laravel blade template on the fly for printing. The problem arises when a page break occurs, as it breaks the QR code. I attempted to use the break-insi ...

cssbootstrap-4printinglaravel-blade

The flex-direction property is not behaving as anticipated in the Chrome browser

Hi everyone, I really need some assistance with my code. The flex-direction property is not working for me no matter what I try. I've tested it on both Chrome and Microsoft Edge, but it displays the same result. I've been stuck on this for the pa ...

htmlcssresponsive-designflexbox

Assign the input text field's value programmatically in the code-behind of a C# Asp.net application

I am attempting to change the value of an HTML input field from C# code behind. These inputs are created through a JavaScript loop, so I have not had much success using run at server or assigning values through <%= %>. Below is my script: var mytab ...

javascriptc#jqueryasp.nethtml

Elements floating in space, stretching across the entire width

In my design, I have a fixed size layout with a centered content container. My goal is to have the menu (home, about, contact, login) span 100% of the screen width. You can view the current setup in this jsfiddle: http://jsfiddle.net/Hxhc5/1/ I am aimin ...

csscss-float