Designing fixed sliding icons on the left side with CSS

I'm looking to replicate a sticky sliding icon set on both the left and right using CSS. While the right side icons with text are working perfectly, the ones on the left side are not functioning as expected.

Here's the code snippet:

.sticky-container{
/* CSS properties */
}

.sticky li {
/* List item styles */
}

.sticky-container-first {
/* CSS properties for first container */
}

.sticky-first li {
/* List item styles for first container */
}

The demo page can be found at . I need assistance in getting the sliding icons to work on both sides. Any help would be greatly appreciated. Thank you in advance.

htmlcss

Answer №1

Require modification

.sticky-container-first {
    left: -155px;
}


.sticky-container{
/*background-color: #333;*/
padding: 0px;
margin: 0px;
position: fixed;
right: -119px;
/*top:230px;*/
width: 200px;

}
/* style p when hover li */
.sticky-first li:hover p {
    float: right;
}
.sticky li{
list-style-type: none;
background-color: #333;
color: #efefef;
height: 43px;
padding: 0px;
margin: 0px 0px 1px 0px;
-webkit-transition:all 0.25s ease-in-out;
-moz-transition:all 0.25s ease-in-out;
-o-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;
cursor: pointer;


}

.sticky li:hover{
margin-left: -115px;
/*-webkit-transform: translateX(-115px);
-moz-transform: translateX(-115px);
-o-transform: translateX(-115px);
-ms-transform: translateX(-115px);
transform:translateX(-115px);*/
/*background-color: #8e44ad;*/

}

.sticky li img{
float: left;
margin: 5px 5px;
margin-right: 10px;

}

.sticky li p{
padding: 0px;
margin: 0px;
text-transform: uppercase;
line-height: 43px;

}




.sticky-container-first{
/*background-color: #333;*/
padding: 0px;
margin: 0px;
position: fixed;
left: -155px;
/*top:230px;*/
width: 200px;

}

.sticky-first li{
list-style-type: none;
background-color: #333;
color: #efefef;
height: 43px;
padding: 0px;
margin: 0px 0px 1px 0px;
-webkit-transition:all 0.25s ease-in-out;
-moz-transition:all 0.25s ease-in-out;
-o-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;
cursor: pointer;


}

.sticky-first li:hover{
margin-right: -115px;
/*-webkit-transform: translateX(115px);
-moz-transform: translateX(115px);
-o-transform: translateX(115px);
-ms-transform: translateX(115px);
transform:translateX(115px);*/
/*background-color: #8e44ad;*/
}
.sticky-first li img{
float: right;
margin: 5px 5px;
margin-left: 10px;

}

.sticky-first li p{
padding: 0px;
margin: 0px;
text-transform: uppercase;
line-height: 43px;

}
<div class="sticky-container">
<ul class="sticky">
<li>
<img width="32" height="32" title="" alt="" src="http://new.praavahealth.com/public/images/icon/female.png" />
<p>Facebook</p>
</li>
<li>
<img width="32" height="32" title="" alt="" src="http://new.praavahealth.com/public/images/icon/female.png" />
<p>Twitter</p>
</li>
<li>
<img width="32" height="32" title="" alt="" src="http://new.praavahealth.com/public/images/icon/female.png" />
<p>Pinterest</p>
</li>


</ul>
</div>

<div class="sticky-container-first">
<ul class="sticky-first">
<li>
<img width="32" height="32" title="" alt="" src="http://new.praavahealth.com/public/images/icon/female.png" />
<p>Facebook</p>
</li>
<li>
<img width="32" height="32" title="" alt="" src="http://new.praavahealth.com/public/images/icon/female.png" />
<p>Twitter</p>
</li>
<li>
<img width="32" height="32" title="" alt="" src="http://new.praavahealth.com/public/images/icon/female.png" />
<p>Pinterest</p>
</li>


</ul>
</div>

Answer №2

Include the style text-align: right; in the <p> elements located on the left side.

Answer №3

Don't forget to include the following class 

.sticky-first li:hover p { float: right;}
for when you hover over the li

.sticky-container{
/*background-color: #333;*/
padding: 0px;
margin: 0px;
position: fixed;
right: -119px;
/*top:230px;*/
width: 200px;

}
/* style p when hover li */
.sticky-first li:hover p {
    float: right;
}
.sticky li{
list-style-type: none;
background-color: #333;
color: #efefef;
height: 43px;
padding: 0px;
margin: 0px 0px 1px 0px;
-webkit-transition:all 0.25s ease-in-out;
-moz-transition:all 0.25s ease-in-out;
-o-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;
cursor: pointer;


}

.sticky li:hover{
margin-left: -115px;
/*-webkit-transform: translateX(-115px);
-moz-transform: translateX(-115px);
-o-transform: translateX(-115px);
-ms-transform: translateX(-115px);
transform:translateX(-115px);*/
/*background-color: #8e44ad;*/

}

.sticky li img{
float: left;
margin: 5px 5px;
margin-right: 10px;

}

.sticky li p{
padding: 0px;
margin: 0px;
text-transform: uppercase;
line-height: 43px;

}




.sticky-container-first{
/*background-color: #333;*/
padding: 0px;
margin: 0px;
position: fixed;
left: -119px;
/*top:230px;*/
width: 200px;

}

.sticky-first li{
list-style-type: none;
background-color: #333;
color: #efefef;
height: 43px;
padding: 0px;
margin: 0px 0px 1px 0px;
-webkit-transition:all 0.25s ease-in-out;
-moz-transition:all 0.25s ease-in-out;
-o-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;
cursor: pointer;


}

.sticky-first li:hover{
margin-right: -115px;
/*-webkit-transform: translateX(115px);
-moz-transform: translateX(115px);
-o-transform: translateX(115px);
-ms-transform: translateX(115px);
transform:translateX(115px);*/
/*background-color: #8e44ad;*/
}
.sticky-first li img{
float: right;
margin: 5px 5px;
margin-left: 10px;

}

.sticky-first li p{
padding: 0px;
margin: 0px;
text-transform: uppercase;
line-height: 43px;

}
<div class="sticky-container">
<ul class="sticky">
<li>
<img width="32" height="32" title="" alt="" src="http://new.praavahealth.com/public/images/icon/female.png" />
<p>Facebook</p>
</li>
<li>
<img width="32" height="32" title="" alt="" src="http://new.praavahealth.com/public/images/icon/female.png" />
<p>Twitter</p>
</li>
<li>
<img width="32" height="32" title="" alt="" src="http://new.praavahealth.com/public/images/icon/female.png" />
<p>Pinterest</p>
</li>


</ul>
</div>

<div class="sticky-container-first">
<ul class="sticky-first">
<li>
<img width="32" height="32" title="" alt="" src="http://new.praavahealth.com/public/images/icon/female.png" />
<p>Facebook</p>
</li>
<li>
<img width="32" height="32" title="" alt="" src="http://new.praavahealth.com/public/images/icon/female.png" />
<p>Twitter</p>
</li>
<li>
<img width="32" height="32" title="" alt="" src="http://new.praavahealth.com/public/images/icon/female.png" />
<p>Pinterest</p>
</li>


</ul>
</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

Issue with nivo-lightbox not opening upon clicking image

I have diligently followed the instructions to set up this JavaScript plugin, but unfortunately it doesn't seem to be functioning properly. The plugin I'm using can be found here: All the links to the CSS, theme, and JavaScript files are display ...

javascriptcsslightboxnivo-slider

Selenium can be used to locate elements between two specific spans

I'm on a mission to locate specific text within this HTML code using Selenium <span class="value"> Receiver 1 <br> </span> Is there a way to make it more straightforward, like perhaps using span[class=value]? ...

cssselenium

Tips for implementing JS function in Angular for a Collapsible Sidebar in your component.ts file

I am attempting to collapse a pre-existing Sidebar within an Angular project. The Sidebar is currently set up in the app.component.html file, but I want to transform it into its own component. My goal is to incorporate the following JS function into the s ...

javascripthtmlangulartypescript

Is it possible to have a variable number of dynamic CSS Grid columns with the option of including a header or footer

Implementing a dynamic number of columns with CSS Grid is a breeze. .grid { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); } // These .cells are beautifully aligned <div class="grid"> <div class="cell"></div> ...

htmlcsscss-grid

Using Ajax to make a request on the same page but specifically within a column

I'm currently experimenting with AJAX to display live CSV data on my website. Right now, the AJAX script triggers on button click, but what I really want is for the data to be shown in a grid view without requiring a refresh or clicking a button. Howe ...

ajaxhtmlcsv

The concept of vertical alignment within the CSS Grid system

I am attempting to utilize CSS grids in order to vertically align an unordered list. However, I am encountering the following layout: *A******* *B * *C******* ********* * * ********* ********* * * ********* While the grid template rows a ...

csscss-grid

Struggling to create HTML divs with CSS styling

Currently working on creating a 768x240 window design. An example of what I have so far: <div class="global-tab"> <div class="image" src="link"></div> <div class="class1">{{details.name}}</div> <div class="class2" ...

jqueryhtmlcss

The NVDA screen reader is unable to detect visually hidden text

In the code snippet below, part of a table is shown where some text is meant to be displayed visibly and some should be visually hidden. However, it seems that the screen reader does not detect the visually hidden text when hovering over it with a mouse. T ...

htmlaccessibilitybootstrap-5screen-readersnvda

Tips for executing a jQuery function on multiple sets of elements

Currently, I have a list with all items sharing the same class name. There is a jQuery plugin that identifies the tallest element and sets the height of all list items to match the tallest one. My goal is to run this method for each UL group individually. ...

jqueryhtmlpluginsloops

Ways to compel links to open in Internet Explorer

In one of my chatbot messages, I have included a link to a web app that is only compatible with Internet Explorer. My chatbot runs on Google Chrome, so when the user clicks on the link, it opens in a new Chrome tab instead of in IE, where it should open f ...

htmlinternet-explorer

Left align the CSS menu text next to the menu image

Currently, I have a basic CSS menu that includes background images aligned to the left. My goal is to have the text float to the left of each image as well. <div class='mmenu'><ul><li><a id="li6" class="menu-news" href= "vie ...

htmlcssmenucss-floatmenubar

Concealing specific sections of HTML content in a webview on the fly

I've been experimenting with a proof of concept feature to implement the ability to conceal certain parts of a web page loaded in a webview, but I seem to be encountering some issues... Within a UIWebview extension, I have something similar to this c ...

javascriptioscssswift

Tips for Integrating a Facebook Shop Page into Your Website

Can a Facebook shop page be integrated into a website? Any guidance on how to accomplish this task would be greatly valued. ...

javascripthtmlfacebookpluginsembed

What is the method to reduce the gap between the label and field in Vuetify input controls?

Consider a custom Vuetify text field as an example (Playground) <template> <v-app> <v-container> <v-text-field label="label goes here" variant="plain" density="compact" ...

htmlcssvuetify.js

Enhance the appearance of div elements in GWT/HTML with custom styling

I am relatively new to GWT and have been exploring various options, but I have not yet found a solution to my issue. The challenge at hand involves developing a function schedule system in GWT, where I am working on designing the frontend. We currently ha ...

javajqueryhtmlcssgwt

Enhanced Bootstrap 4 Navigation Bar Lofty on Tablet Display with Divided Functionality

Currently, I am utilizing Bootstrap 4 for my personal website; however, I have encountered an issue on my tablet where the top menu is divided into two lines: The top row displays the "font awesome" icon Directly below each icon are the section names co ...

javascriptcssbootstrap-4font-awesomenav

Javascript Variable Remains Static Despite Changing Html Content

Currently, I am facing an issue with a code where I am trying to create a variable that updates whenever the price of the product changes. Below is the code snippet: <h3 class="single-price"><span class="after currency-value"&g ...

javascripthtml

WordPress footer widgets appearing misaligned

I have made a child theme for Twenty Thirteen and am in the process of making some updates to it. My development site is essentially a replica of the live site. The only modification I made in the footer section was to change the widget title styles, but I ...

htmlcsswordpress

How can you locate the position of a selector within a parent or set using jQuery

Could someone please help me determine the position of the current selector within its parent using jQuery? I need this information in order to effectively use the .insertAfter() and .insertBefore() methods to rearrange elements within their nested structu ...

javascriptjqueryhtml

Toggle classes on button click

<div class='fixed_button homes hidden'> <a class='btn btn-primary homes'>Continue &rarr;</a> </div> Using jQuery Library $(".homes").on('click', function(){ $("choose_style").addClass(&apo ...

javascriptjqueryhtml