Side Menu with Fixed Position Created with Tailwind CSS

Can anyone help me create a social media sidebar that stays fixed on the bottom right side of the screen, regardless of its size?

Currently, the sidebar moves when I scroll down, but I want it to remain in place. How can I achieve this fixed positioning?

Check out the code here

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />

<div class="group relative z-50">
  <div class=" absolute  right-0 inset-y-96  w-10 group-hover:w-12   group-hover:mr-0 h-10 bg-yellow-500 flex items-center justify-center">
    <a href=""> <span class="mx-auto text-2xl  text-white cursor-pointer  fab fa-instagram "></span></a>
  </div>
</div>
<div class="group relative z-50">
  <div class=" absolute right-0 inset-y-96  mt-12 w-10 group-hover:w-12   group-hover:mr-0 h-10 bg-yellow-500 flex items-center justify-center">
    <a href="" target="_blank"> <span class="mx-auto text-2xl  text-white cursor-pointer  fab fa-facebook "></span></a>
  </div>
</div>
htmlcsstailwind-css

Answer №1

The issue arises from using position: relative instead of fixed.

<div class="group fixed z-50 bottom-1/3 right-0">
<div class=" w-10 group-hover:w-12   group-hover:mr-0 h-10 bg-yellow-500 flex items-center justify-center">
<a href=""> <span class="mx-auto text-2xl  text-white cursor-pointer  fab fa-instagram "></span></a>
</div>
</div>
<div class="group fixed z-50 bottom-1/4 right-0">
<div class="w-10 group-hover:w-12   group-hover:mr-0 h-10 bg-yellow-500 flex items-center justify-center">
<a href="" target="_blank"> <span class="mx-auto text-2xl  text-white cursor-pointer  fab fa-facebook "></span></a>
</div>
</div>

Answer №2

Here is my unique proposal. I have created an additional div container with a fixed position and applied the inset properties along with a negative mt value. I trust this solution will meet your needs ;-) Feel free to see it in action through this link

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />

<div class="fixed inset-3 inset-y-80 -mt-6">
  <div class="group relative z-50">
    <div class="absolute right-0 inset-y-96 w-10 group-hover:w-12 group-hover:mr-0 h-10 bg-yellow-500 flex items-center justify-center">
      <a href=""> <span class="mx-auto text-2xl text-white cursor-pointer fab fa-instagram"></span></a>
    </div>
  </div>
  <div class="group relative z-50">
    <div class="absolute right-0 inset-y-96 mt-12 w-10 group-hover:w-12 group-hover:mr-0 h-10 bg-yellow-500 flex items-center justify-center">
      <a href="" target="_blank"> <span class="mx-auto text-2xl text-white cursor-pointer fab fa-facebook"></span></a>
    </div>
  </div>
</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

What is the best way to incorporate a mute/unmute button into this automatically playing audio?

Seeking assistance in adding a mute button for the background sound on my website. Can anyone provide guidance on how to achieve this? Below is the HTML code responsible for playing the sound: <audio id="sound" autoplay="autoplay" ...

javascripthtmlgoogle-chrome-extension

Tips for integrating elements within React Components to create a Container-like structure

I am looking to create a component similar to the following: class MyContainer extends React.Component { render(){ return <div width="1000">{xxx }</div> } } and it should be used in this way: <MyContainer><xxx>&l ...

htmlreactjsjsx

Having trouble with element.scrollTo not functioning properly on mobile devices?

I have been working on creating a vertical scrolling carousel, and so far everything seems to be functioning well. I can scroll horizontally using buttons and swipe gestures successfully on the simulator. However, when I view the website on a real mobile d ...

javascripthtmlreactjs

Can you explain the functionality of dismissing a Bootstrap alert?

In this example, we can see how Bootstrap handles dismissible alerts: <div class="alert alert-warning alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidde ...

javascriptcsstwitter-bootstrap-3

Problems with Displaying Facebook Ads on Mobile Web

Currently, I am incorporating Facebook Audience Network (MobileWeb-beta) for advertisements on my mobile website. However, the 320x50 HTML source code is not displaying the ad across the width of the mobile screen as intended; instead, it appears smaller ( ...

htmlfacebookfacebook-ads-apiiphone-web-appfacebook-audience-network

Panel with Bootstrap Collapse feature causes a slight movement when padding is applied

After applying the collapse behavior to a panel element, I noticed that the animation stops abruptly at the padding of .panel-body, causing it to snap instantly to height. This issue can be observed in the basic example on codepen: http://codepen.io/FiveSi ...

jquerycsstwitter-bootstrap

Broken link in navigation bar

I encountered an issue with the navigation bar on this website. When I click on "Leistungsspektrum" in the navigation bar, it returns a message stating that The requested URL /leistunsspektrum.html was not found on this server. However, the actual file nam ...

htmlcsshyperlinknavigation

Looking to show a div upon clicking a link with the use of Javascript

Looking for a workaround due to restrictions on using alert or any Js dialog box, I need to create some sort of magic trick: 1. Create a div with a link named "info". 2. Develop an invisible div that will serve as my "PopUp" containing random information. ...

javascriptcsshtml

The 'function' is not defined in Edge and Explorer browsers

I am currently working on a web page in SharePoint and have encountered an issue where the onclick referenced function throws an error only in Internet Explorer 11 and Microsoft Edge. However, in Chrome, Firefox, and Opera, everything works perfectly fine. ...

javascripthtmlsharepoint

JS: Initiating a new keypress operation

When I press the Tab key, I want it to do something different instead of its default action. Specifically, I have a text box selected and I would like it to add spaces (essentially making the textarea behave like a text editor). How can I trigger this type ...

javascriptjqueryhtml

An issue occurred while calling the Selenium web driver: the driver.get() function couldn't access the attribute "href" of the linked_url, resulting in a stale element reference

Currently, I am utilizing Python with Selenium to work on extracting links from Google search results. After successfully accomplishing this task, I am now attempting to navigate through these links one by one using a for loop and the driver.get() method: ...

pythonhtmlselenium-webdriverdom

Issues arise when implementing a sticky position using CSS with incomplete functionality

I want to create a website with a menu bar that stays at the top even on long pages. However, when I use position: sticky in CSS, the menu disappears after scrolling a certain distance. Does anyone know how to fix this issue? HTML: <nav> <ul cla ...

csssticky

AngularJS button click not redirecting properly with $location.path

When I click a button in my HTML file named `my.html`, I want to redirect the user to `about.html`. However, when I try using `$location.path("\about")` inside the controller, nothing happens and only my current page is displayed without loading `abou ...

javascripthtmlangularjsnode.js

Can you explain the purpose of the "for" attribute in the <output> tag of HTML?

I'm puzzled by the purpose of the for attribute in the new HTML5 output tag, as the result doesn't seem to change based on its presence. This query was raised back in 2012 during the era of HTML4. However, with the introduction of HTML5 in 2014, ...

html

The process of converting a data:image base64 to a blob is demonstrated in this code snippet

Seeking a way to convert data:image base64 URLs to blob URLs. Below is the original code that generates the base64 URLs: <script> $(window).load(function(){ function readURL() { var $input = $(this); var $newinput = $(this ...

javascriptjqueryhtml

Adjust the height of the container div for the carousel according to the length of the text displayed

My image carousel features description content positioned on the right for wide-screen windows. However, I want the description to shift below the images when the browser window reaches a certain breakpoint. The challenge I am facing is that the height of ...

javascriptjqueryhtml

What is the best way to deactivate certain JavaScript functions on my webpage when accessed through a mobile device?

Is there a way to disable specific JavaScript functions when accessing my website from a mobile device? While I can achieve this using CSS only, certain buttons require JavaScript functionality. Below is the internal JavaScript code: var menuBtn = docume ...

javascripthtmlresponsive

Screen resolution for the background image on the banner

I'm currently working on a website that can be found at this temporary link: The main banner of the site features a background image with fading text, which looks great on standard desktop screens. However, when viewed on wider screens like 1600x1200 ...

htmlcssresolutionscreen-resolution

Harnessing the power of VUE.js: Exploring the versatility of V-bind with Array and

I've encountered an issue with an app I'm currently working on. In my project, I am utilizing Vue.js to create the front-end and attempting to apply two classes to a div within a v-for loop. The first class is bound with a filter that functions ...

javascriptcssclassvue.js

What could be causing the hover effect to malfunction in this code snippet?

I have been working on creating a hover effect for a list of items where an underline emerges from the center. While I have done something similar in the past, there seems to be an issue preventing it from working properly this time. I have included the HT ...

htmlcsshover