Adaptive stationary slideable navigation bar

By utilizing Bootstrap, I have successfully implemented a sidebar feature. Initially, only the Font Awesome icon is visible, but upon hovering, it smoothly slides to the left revealing more content.

Challenge: Unfortunately, the sidebar lacks responsiveness on various screen sizes (perhaps due to an incorrect implementation).

The desired outcome is for only the Font Awesome icon to be displayed prior to any hover action, regardless of the screen size.

Expected display across all screen sizes:

https://i.sstatic.net/rSGID.gif

.sidebar-fixed-right {
    top: 20rem;
    right: -20.2%;
    position: fixed;
    transition-property: right;
    transition-duration: 0.4s;
    transition-timing-function: ease-in-out;
    opacity: 0.8;
}

.sidebar-fixed-right:hover {
    right: -10%;
    text-decoration: none;
    opacity: 1.0;
}
.sidebar-text {
    padding-left: 1.2rem;
    text-decoration:none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-3 pull-right sidebar-fixed-right">
    <div class="widget" style="width:20rem">
        <div class="widget-content widget-content-full">
            <table class="table table-borderless table-striped table-vcenter">
                <tbody>
                    <tr>
                        <td>
                            <a class="nodecoration" href="#">
                                <i class="fa fa-stack-overflow" style="vertical-align: middle;color: #EF5350;">
                                </i>
                                <span class="sidebar-text">Hello There</span>
                            </a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

htmlcsstwitter-bootstrap

Answer №1

Check out the updated version of your code:

html,body{
  overflow-x:hidden;
  height:100%;

}

.sidebar-fixed-right {
    top:100px;
    right:-100px;
    position: fixed;
    transition-property: right;
    transition-duration: 0.4s;
    transition-timing-function: ease-in-out;
    opacity: 0.8;
}

.sidebar-fixed-right:hover {
    right:0;
    text-decoration: none;
    opacity: 1.0;
}
.sidebar-text {
    padding-left: 1.2rem;
    text-decoration:none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-3 pull-right sidebar-fixed-right">
    <div class="widget">
        <div class="widget-content widget-content-full">
            <table class="table table-borderless table-striped table-vcenter">
                <tbody>
                    <tr>
                        <td>
                            <a class="nodecoration" href="#">
                                <i class="fa fa-stack-overflow" style="vertical-align: middle;color: #EF5350;">
                                </i>
                                <span class="sidebar-text">Hello There</span>
                            </a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Here is a simplified version with dynamic width.

To achieve this, use transform:translate(100%, 0); to hide the full element and then set right:35px; or any other value for the size of the sliding slide-bar you want to show.

.sidenav {
  background: #ddd;
  display: inline-block;
  padding: 10px;
  position: fixed;
  right:35px;
  top: 70px;
  transition-property: all;
  transition-duration: 0.4s;
  transition-timing-function: ease-in-out;
  cursor: pointer;
  transform:translate(100%, 0);
}

.sidenav:hover {
  right: 0;
  transform:translate(0);
}

.fa {
  vertical-align: middle;
  color: #EF5350;
  padding-right: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="sidenav">
  <i class="fa fa-stack-overflow"></i>
  <span class="sidebar-text">Hello There</span>
</div>

Answer №2

Avoid using percentage % values, and opt for px instead.

body {
  overflow: hidden;
}

.sidebar-fixed-right {
  top: 20rem;
  right: -180px;
  position: fixed;
  transition-property: right;
  transition-duration: 0.4s;
  transition-timing-function: ease-in-out;
  opacity: 0.8;
}

.sidebar-fixed-right:hover {
  right: 0;
  text-decoration: none;
  opacity: 1.0;
}

.sidebar-text {
  padding-left: 1.2rem;
  text-decoration: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-3 pull-right sidebar-fixed-right">
  <div class="widget" style="width:20rem">
    <div class="widget-content widget-content-full">
      <table class="table table-borderless table-striped table-vcenter">
        <tbody>
          <tr>
            <td>
              <a class="nodecoration" href="#">
                <i class="fa fa-stack-overflow" style="vertical-align: middle;color: #EF5350;">
                                </i>
                <span class="sidebar-text">Greetings!</span>
              </a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Answer №3

The issue of responsiveness arises from the utilization of percentages.

Simply adjust it to the right by a set distance.

.sidebar-fixed-right {
    right: -210px;
}

.sidebar-fixed-right:hover {
    right: -70px;
}

These adjustments seemed effective. Also, be mindful of the surrounding container.

html, body {
   width: 100%;
   overflow: hidden;
}

Answer №4

That's intriguing! I might give something similar a shot.

Instead of using Percentages, consider using Pixels as suggested by @Cătălin Costan.

CSS

body {
  position: relative;
}
i.fa-stack-overflow{
  color:#EF5350;
}

.sidebar-fixed-right{
  position: fixed;
  top:50%;
  transform:translateY(-50%);
  right:-80px;
  transition:all ease 0.5s;
}
.sidebar-fixed-right:hover{
  right:0px;
}

.widget{
  background-color: #efefef;
  padding:5px;
  position: relative;
}

HTML

<div class="container">
<div class="sidebar-fixed-right">
  <div class="widget">
    <div class="widget-content widget-content-full">
      <a class="nodecoration" href="#">
        <i class="fa fa-stack-overflow"></i>
        <span class="sidebar-text">Hello There</span>
      </a>
    </div>
  </div>
</div>
</div>

Link for reference

I trust this information proves useful.

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

Implementing a color change for icons in React upon onClick event

export default function Post({post}) { const [like,setLike] = useState(post.like) const [islike,setIslike] = useState(false) const handler=()=>{ setLike(islike? like-1:like+1 ) setIslike(!islike) } return ( <> <div classNam ...

javascriptcssreactjsmaterial-ui

What is the best way to adjust the width of a navbar using JavaScript?

I am experimenting with a responsive design and facing an issue - the width of my #menu in CSS is initially set to 0, but I need to change this value based on user input using JavaScript. Now, I want to dynamically adjust the width of the menu for differe ...

javascripthtmlcss

Aligning text vertically to the top with material UI and the TextField component

Seeking guidance on adjusting vertical alignment of text in <TextField /> const styles = theme => ({ height: { height: '20rem', }, }); class Foo extends React.component { ... <TextField InputProps={{ classes: ...

javascriptcssreactjsmaterial-ui

Embed shapes inside the margins of an HTML container

I'm aiming to create something unique by placing the circle and triangle on the borders of an HTML block. https://i.sstatic.net/MVYuc.png Below is the CSS code for my block: .block { color: red; } .cercle { border-radius: 50%; } .triang ...

htmlcss

CSS does not appear to be showing on the banner

I am struggling to get my banner to display correctly using the CSS code below. #banner { background-image: url(../Images/banner.png); background-repeat: no-repeat; background-size: cover; border: 5px solid #dedede; height: 200px; } ...

cssbanner

Is a server necessary for utilizing HTML5's WebSockets?

Do I need to write server code when implementing WebSockets? Specifically, does the JavaScript in my client application have to connect to a dedicated server, or can my current Apache server handle this functionality? ...

htmlwebsocket

Incorporating CSS styling to specific elements

I am facing an issue with a CSS rule that looks like this: div#tabstrip.tabstrip-vertical.k-widget.k-header.k-tabstrip div#tabstrip-4.k-content.k-state-active{ background-image: url("http://wwww.example.com/logo2.png") !important; background-posit ...

htmlcss

Guide to vertically aligning text in an overlay using CSS within Angular 2

I currently have an overlay on my page that displays a spinner (an Angular material component) and accompanying text. This overlay covers the entire page and prevents clicking on elements below it. The spinner is positioned in the center of the page, and ...

cssangularoverlay

Encountering challenges with web scraping certain data that is not being captured after a line break tag using Python's

I've been attempting to scrape a public web directory in order to retrieve contact information for companies. While my code is functioning properly, it seems to be having trouble extracting information that comes after the br tag. For example, it fai ...

pythonhtmlpandasweb-scrapingbeautifulsoup

Tips for identifying if the cursor is hovering over the :before or :after section of an element

One of the challenges I am facing involves CSS and defining drop areas for users to interact with, allowing them to either drop a section before or after existing sections. .section:before, .section:after { content: "[insert here]"; height: 64px; ...

javascriptjquerycsspseudo-element

I'm having trouble with the live sass compiler plugin in vs code - it's not syncing up with my css file properly

click here for image description I am facing an issue where my CSS file is not translating the codes in my SCSS file properly and adding unwanted comment lines. If anyone has insights on why this might be happening, I would greatly appreciate it. ...

javascripthtmlcssvisual-studio-codesass

What is the method for opening the image gallery in a Progressive Web App (PWA)?

I am struggling to figure out how to access the image gallery from a Progressive Web App (PWA). The PWA allows me to take pictures and upload them on a desktop, but when it comes to a mobile device, I can only access the camera to take photos. I have tried ...

htmltypescriptionic-frameworkprogressive-web-appsangular-pwa

Navigating the waters of adding a CSS property to a jQuery variable pseudo selector

Is there a way to adjust the top position for $myClass both before and after? I attempted to do so with the following code: var $myClass = $(".myclass"); $myClass.filter(":before,:after").css("top",-23); ...

javascriptjqueryhtmlcss

Formatting that differs based on whether the content appears on the left

I'm in search of a solution to align specific items to the left on left-hand pages and to the right on right-hand pages. I have come across @page :left/:right, but it seems to only affect the page layout and margins, not the actual content on the page ...

css

Incorporating AJAX functionality into anchor interactions while preserving href links for search engine optimization benefits

Is it possible to create a link/button that triggers an AJAX/jQuery function to load new content, while still providing a link to the same content on a separate page? I am particularly concerned about SEO and how search engine crawlers will index my sitem ...

jqueryhtmlajaxseohref

A error was encountered stating that the formValidation function is not defined when the HTML form element is submitted

Having trouble calling a function and receiving an error message. How can I resolve this issue? The error message reads: index.html?email=&gebruikersnaam=&wachtwoord=&submit=Submit:1 Uncaught ReferenceError: formValidation is not defined at HT ...

javascripthtmlfunction

The title tag appears to be malfunctioning as it is being shown as regular paragraph text on the live

After a year of programming websites, I encountered a strange issue for the first time. The text from my title tag is appearing live on my website, allowing me to click on it and highlight it. Here is the markup I used: <!doctype html> <html> ...

html

What is the purpose of using square brackets in a CSS style declaration?

I've recently taken over the management of a website and I came across some unfamiliar CSS syntax. Has anyone encountered this type of syntax before? Can someone explain what the square brackets inside a style represent? Thank you, Rob .trigger-tx ...

css

I'm wondering why my typography components display correctly on my local host, but not on my aws server. Any insights on

I've encountered an issue with the typography component I'm using for my headings. When I publish the website, the headings do not render properly and the styles are not applied correctly. Strangely, everything looks fine during npm run dev, but ...

cssreactjsmaterial-uitypography

The jQuery UI dialog stubbornly refuses to close when tapped, yet opens without hesitation

I'm struggling to understand why my dialog boxes are not closing when I tap outside of them. I've tried using different selectors such as document, window, .ikon_picmap, but nothing seems to be working. What am I missing here? Check out the code ...

jquerycssjquery-uipositionjquery-ui-dialog