Elevate your website with Bootstrap 4's compact floating icon menu

I've been searching online, but I can't seem to find exactly what I need. My goal is to create a compact Sidebar menu that stays on the left side and is centered.

The only solution I came across was this:

`https://codepen.io/kemsly/pen/mJxwJg`

However, it relies heavily on JavaScript which I would prefer to avoid.

If you have any helpful links or resources that could guide me in the right direction, please feel free to share them here. Your assistance would be greatly appreciated.

Warm regards, Faziki.

cssbootstrap-4

Answer №1

For left-side alignment:

  • To stick to the left side, use position:fixed
  • To center vertically by taking up 50% of the viewport height and subtracting half of the sidebar div's height

Below is a working code snippet:

.floatingLeft {
  position: fixed;
  top: calc(50vh - 67px);
  background: lightblue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class='floatingLeft'>
  <div class='icon blue'>
    <h4 class='photoshop'>Photoshop</h4>
  </div>
  <div class='icon purple'>
    <h4 class='aftereffects'>AfterEffects</h4>
  </div>
  <div class='icon green'>
    <h4 class='dreamweaver'>DreamWeaver</h4>
  </div>
  <div class='icon red'>
    <h4 class='flash'>Flash</h4>
  </div>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet. Eu volutpat odio facilisis mauris sit amet. Porta nibh venenatis cras sed felis eget velit aliquet.
  Id consectetur purus ut faucibus pulvinar. Augue interdum velit euismod in pellentesque massa placerat. Faucibus turpis in eu mi bibendum. Sit amet luctus venenatis lectus. Odio aenean sed adipiscing diam donec adipiscing tristique. Donec massa sapien
  faucibus et molestie ac. Lacus luctus accumsan tortor posuere ac ut consequat semper. Molestie at elementum eu facilisis sed odio.</p>

...continued text...</exanswer1>
<exanswer1><div class="answer accepted" i="59402279" l="4.0" c="1576709044" v="1" a="QWtiZXIgSXBiYWw=" ai="8757883">
<p>To achieve </p>

<ul>
<li>left-sided positioning: utilize <strong>position:fixed</strong></li>
<li>vertical centering: claim <strong>50% of the view height</strong>, then deduct <strong>half the height of your sidebar div</strong></li>
</ul>

<p>Here's a <strong>functioning code excerpt</strong>:</p>

<p><div>
<div>
<pre class="snippet-code-css lang-css"><code>.floatingLeft {
  position: fixed;
  top: calc(50vh - 67px);
  background: lightblue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class='floatingLeft'>
  <div class='icon blue'>
    <h4 class='photoshop'>Photoshop</h4>
  </div>
  <div class='icon purple'>
    <h4 class='aftereffects'>AfterEffects</h4>
  </div>
  <div class='icon green'>
    <h4 class='dreamweaver'>DreamWeaver</h4>
  </div>
  <div class='icon red'>
    <h4 class='flash'>Flash</h4>
  </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 method for extracting and storing search suggestions data with selenium?

Initially, I had posted this inquiry before, and my apologies for reposting. However, I am still struggling to comprehend why the code works for the individual who responded but not for me. How can one retrieve values from search suggestions after enterin ...

pythonhtmlcssselenium

Ensure the padding and margin are both set to 0 when using inline styles

As someone who is not a designer, I attempted to send an email from PHP. In order to do so, I took a template and converted all styles to inline. However, I am unsure of where to include the universal margin and padding style in the template. *{margin:0px ...

phphtmlcsstemplates

Is there a way to adjust the width of my web layout without sacrificing its responsiveness?

Struggling with my website layout design as I encountered an issue. The overall width of the layout is too excessive, and I want to introduce some margins on the sides for a better visual appeal. Although the responsive design works well originally, adding ...

htmlcssresponsive-designbootstrap-5

Animated the height of a rectangle during initial loading and when the mouse hovers over or leaves

Being new to Vue.js, I am looking to create a simple animation on component load for the first time. You can find my initial code here: <template> <div id="app"> <div class="rect" /> </div> </template ...

javascriptcssvue.jscss-transitions

How can I center two div buttons within a bootstrap column?

My issue is as follows: I currently have two circles stacked on top of each other, but I would like to position them side by side. Below is the HTML for the existing layout: <div class="col-lg-6"> <div class="page-scroll" style="text-align:c ...

htmlcsstwitter-bootstrap

Can we limit the text in a specific cell to one line on a desktop for a responsive table?

I am facing a challenge with making the second cell in my table have a width of 100% while ensuring that the text stays on one line. While the mobile version is functioning correctly, I am struggling to find a solution for the desktop version as the last ...

cssresponsive-designhtml-table

Using the .slider class on concealed div elements

Explaining this may be a bit tricky, but here we go... I have multiple hidden divs that switch with each other when a link is clicked using $(document).ready(function(){ $('a').click(function () { var divname= this.name; $("#"+divname ...

jquerycss

What is the best way to create a div that extends beyond the borders of the screen, but still allows only

I am currently working on a React project for a website. I am creating a category bar that should slide only the component in the mobile version, without moving the entire page. Check out the desired design here However, the current appearance is differe ...

javascripthtmlcssreactjsbootstrap-4

The animation in my SVG comes to a halt at a certain point

I am having an issue with my SVG element (shown below) where it stops animating after a certain period of time. I want the animation to continue indefinitely like in this jsfiddle. .path { stroke-dasharray: 20; animation: dash 10s linear; } @ ...

htmlcsssvg

Use custom styles or CSS for the file input element: <input type="file">

Can CSS be used to achieve consistent styling for <input type="file"> in all browsers? ...

htmlcssfile-io

Encountering a problem creating a hover overlay effect on a transparent PNG image within a parent div that has a background color

I'm struggling with creating an overlay hover effect on an image that has transparency. The issue I'm facing is that the black background of the parent div element is filling in the transparent parts of the PNG image, making it look like those ar ...

htmlcsspngoverlaytransparency

Guide to center align fields in Ionic and Angular

I am working on creating a login screen that resembles the image provided. I have managed to set the background image, input fields, and buttons successfully. However, I am encountering a few issues: The width of my input field is taking up the entire spa ...

javascriptangularjscssionic-framework

Margins and borders with a negative impact

I have a collection of images that I am trying to stack using negative margins. However, because stacking them without defined boundaries can lead to visual confusion, I thought about adding borders around each image. Surprisingly, while the images are sta ...

csscross-browsermargin

design and construct a three-dimensional shelving unit

After much searching and failed attempts, I am determined to create a stationary cube-shaped bookcase using CSS. Can anyone offer some guidance on how I can achieve this? I have included an image of the design I want to replicate. Thank you .scene { ...

htmlcss

Is there a way for me to retrieve the icons through a content query?

Currently, I am working on customizing a background slider. However, in the CSS file: span.cbp-binext:before { content: "\e000";} The issue I am facing is that I am only getting squares as icons. Is there a way for me to replace these squares with a ...

javascriptcsshtml

Animating ng-switch transitions within a div element

Utilizing bootstrap 3 panel along with ng-switch for a sliding animation: Check out the Plunker here I am facing an issue where the animation extends past the borders of the panel instead of staying within it. How can I fix this in my Plunker? The desire ...

cssangularjscss-transitionstwitter-bootstrap-3

Steps for configuring a switch to display a color at random

Looking for a way to modify colors of a basic switch <body> <label class="toggle"> <input type="checkbox"> <span class="slider"></span> </label> </body> .toggle { --width: 80px; ...

javascripthtmlcss

When incorporating `Ionic/core` into my project, it unexpectedly alters my scss styling

Exploring StencilJs: In my project using StencilJs, I aim to create a wheel time picker with 3 columns for hours in 12-hour format and minutes which can vary based on the provided array such as [0,15,30,45] or [00,30]. Additionally, there will be options ...

csssassweb-componentstenciljs

`Troubleshooting: Inability to chain selectors for custom styling in Next JS module`

When I chain selectors in a CSS file, the styles don't seem to apply as expected. I'm importing the styles into the component and it only applies for the main class. For example: import styles from './Home.module.css' const Home = () = ...

cssnext.js

Utilizing distinct JavaScript, JQuery, or CSS for individual Controllers within the Codeigniter framework

Currently, I am involved in a Codeigniter v3 project where we are developing a comprehensive application for a large organization. To optimize the loading speed of each page, I am looking to integrate custom JQuery and CSS files/code specific to each Con ...

javascriptphpjquerycsscodeigniter