What is the best way to adjust my column position in order to make the links clickable?

Looking for help with a mobile version website menu bar design. The issue is that the central "+" button is covering the two icons on either side, making them unclickable. Is there a solution to rearrange this layout?

Here is the current design:

https://i.sstatic.net/6cOqz.png

Below is the code I used to create this design (Bootstrap 4 and Fontawesome):

.footer-container-mobile {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: 54px;
  background-color: #8ABE57;
  width: 100%;
  margin: 0 auto;
  padding: 10px 40px;
  box-shadow: 0px -4px 8px rgba(0, 0, 0, 0.1);
}

.footer-container-mobile i {
  color: white;
  font-size: 1.3em;
  margin-top: 5px;
}

.circle-btn-mobile {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #31353C;
  color: white;
  text-align: center;
  align-items: center;
  font-size: 2em;
  filter: drop-shadow(0px 0px 13px rgba(0, 0, 0, 0.47));
  display: flex;
  flex-direction: row;
}

.circle-btn-mobile-container {
  z-index: 50;
  position: fixed;
  bottom: 12px;
  left: 0;
  right: 0;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1c3ceced5d2d5d3c0d1e1958f948f92">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row d-flex footer-container-mobile">
    <a href="#" class="mr-auto"><i class="far fa-bars"></i>Icon</a>
    <a href="#" class="ml-auto"><i class="fas fa-user-plus">Icon</i></a>
  </div>

  <div class="row circle-btn-mobile-container">
    <div class="d-flex justify-content-center mx-auto circle-btn-mobile">
      <i class="far fa-plus">+</i>
    </div>
  </div>

</div>

htmlcssbootstrap-4

Answer №1

Include the width: fit-content; CSS property for the circle-btn-mobile-container container, and add the m-auto class to apply margin: auto;:

<div class="row circle-btn-mobile-container m-auto">


.footer-container-mobile {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: 54px;
  background-color: #8ABE57;
  width: 100%;
  margin: 0 auto;
  padding: 10px 40px;
  box-shadow: 0px -4px 8px rgba(0, 0, 0, 0.1);
}

.footer-container-mobile i {
  color: white;
  font-size: 1.3em;
  margin-top: 5px;
}

.circle-btn-mobile {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #31353C;
  color: white;
  text-align: center;
  align-items: center;
  font-size: 2em;
  filter: drop-shadow(0px 0px 13px rgba(0, 0, 0, 0.47));
  display: flex;
  flex-direction: row;
}

.circle-btn-mobile-container {
  width: fit-content;
  z-index: 50;
  position: fixed;
  bottom: 12px;
  left: 0;
  right: 0;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4b6bbbba0a7a0a6b5a494e0fae1fae7">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row d-flex footer-container-mobile">
    <a href="#" class="mr-auto"><i class="far fa-bars"></i>Icon</a>
    <a href="#" class="ml-auto"><i class="fas fa-user-plus">Icon</i></a>
  </div>

  <div class="row circle-btn-mobile-container m-auto">
    <div class="d-flex justify-content-center mx-auto circle-btn-mobile">
      <i class="far fa-plus">+</i>
    </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

Tips for creating boxes with clearly defined edges on shared sides using three.js

When I draw boxes with common sides, I don't see the common edges, but rather perceive them as a single object even though there are 25 boxes: https://i.sstatic.net/gE8FW.png function box(scene, x, y, z, size) { const points = []; ...

javascripthtmlthree.js

The div does not allow elements to be centered

I am facing an issue where elements are not centering on my div. I have tried numerous solutions (so many that I finally decided to create a Stack Overflow account), but nothing seems to work. Interestingly, the elements center on PC but for some reason, ...

htmlcss

Using Angular JS to dynamically load an HTML template from a directive upon clicking a button

When a link is clicked, I am attempting to load an HTML template. A directive has been created with the templateUrl attribute to load the HTML file. Upon clicking the link, a function is called to append a custom directive "myCustomer" to a pre-existing di ...

javascriptjqueryhtmlangularjsangularjs-directive

I cannot seem to alter the background color of my image through the use of external CSS

body { background-color: #f6f7d4; } h1, h3, hr { color: #68b8ab; } hr { width: 100px; border-style: dotted none none; border-color: gray; border-width: 5px; } img { background-color: black; } Although the external CSS code a ...

htmlcss

Dealing with 'this' while using an addEventListener

I need to trigger the function handleRangeUpdate in a way that it responds to the event calling it and decides whether to run console.log(this.value). The problem arises when I pass e into handleRangeUpdate using addEventListener, causing the value of thi ...

javascripthtmlthisaddeventlistener

What is the most effective approach to seamlessly conceal and reveal a button with the assistance

I have two buttons, one for play and one for pause. <td> <?php if($service['ue_status'] == "RUNNING"){ $hideMe = 'd-none'; } ?> <a href="#" class="btn btn-warning ...

javascriptjqueryhtmlcsslaravel-blade

I'm looking to showcase both an image and text in the navbar-brand section of Bootstrap 4. How can

I have been attempting to place an image next to some text within my navbar-brand, but so far I have not been successful. Is there a way to achieve this without resorting to "hacking" bootstrap? Below is the code I have tried: <header> <nav ...

bootstrap-4

The Carousel is covering up my Mega-Menu and it is not visible on top

I'm facing an issue where my mega menu is hidden behind the carousel, and I need it to show on top. You can see how it looks before adding the carousel and after adding the carousel from Bootstrap. Here are the links to the Mega Menu CSS and Mega menu ...

phphtmlcssbootstrap-5

Mobile site's call button functionality is malfunctioning

For the telephone number on my mobile site, I employed the <a href="tel:+1800229933">Call us free!</a> code. However, it seems to be malfunctioning on several devices. Any insight on this issue would be greatly appreciated. Thank you. ...

javascriptphphtml

A PHP string containing hashtags without spaces will not be parsed into individual hashtags

I have a challenge where I want to extract individual hashtags from a string that contains hashtags. Currently, I am utilizing the following code: preg_match_all('/#([^\s]+)/', $str, $matches); #test #test #test #example The code functio ...

phphtmlstringhashtag

Automatic Textbox Closer

Connected to this AngularJS issue on IE10+ where textarea with placeholder causes "Invalid argument." and also this AngularJS 1.1.5 problem in Internet Explorer with ng-show and objects (Bug), we had to resort to using the textarea element as a self-closin ...

javascripthtmlinternet-explorerangularjstextarea

Angular list with a repeating group of radio buttons

I have a set of 'options', which consists of the following: {Id: 1, Label: "option 1"}, {Id: 2, Label: "option 2"} Additionally, I have a list of 'products' structured as follows: {Id: 1, Name: "Name 1", Recommend: options[0]}, {Id: ...

javascriptangularjshtmlangularjs-ng-repeat

Faux CSS, every other moment appears to be unsuccessful

My HTML code looks like this: <div class="container"> <div class="foo">Foo!</div> <!-- if this is red... --> <div class="bar">Bar!</div> </div> <div class="container"> <div class="foo">Foo! ...

csscss-selectorspseudo-class

Place the center and bottom divs within the parent div

Trying to center and fix a div at the bottom of another div has proven challenging for me. I've attempted using the following code snippet, but without success. Can anyone guide me on how to achieve this? #clockPosition { margin: auto auto 0 auto ...

htmlcss

Modifying the attribute from "content-disposition:attachment" to "content-disposition:inline"

I created an HTML email signature that worked perfectly until I tested it in the Outlook Mail Client 2010, which is currently not displaying images but instead offering them as download attachments. I am utilizing DataUri for images: <img width="56" ...

htmloutlookmimeoutlook-2010multipart

Creating an inner shadow effect for geometric shapes with text inside - a step-by-step guide!

Is it possible to apply an inner shadow to geometric shapes with text inside using CSS? This is the effect I want to achieve: https://i.stack.imgur.com/XcGS2.png I followed the code provided in this thread: Required pentagon shape with right direction ...

htmlcss

Establish a timeout period for ajax requests using jQuery

$.ajax({ url: "test.html", error: function(){ //do something }, success: function(){ //do something } }); At times, the success function performs well, but sometimes it does not. How can I add a timeout to this ajax re ...

javascriptjqueryhtmlcssajax

When a dialog box is displayed, a scrollbar will automatically appear

I've encountered a strange issue while working with Angular dialogs: A vertical scrollbar unexpectedly appears, even though I've set the dialog to have a fixed width. component.ts const dialog = this.dialog.open(DialogComponent, { width: ...

htmlcssangular

Is it possible for me to use an image as a grid item?

I have a grid with 3 elements as shown below: Now, I am looking to replace the blue elements with images (they can be just placeholders). .grid-container { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(30em, auto); justi ...

htmlcssresponsive-designcss-grid

Seeking out all (including potentially relative) URLs on a webpage: Possible strategies to consider

For a coding challenge, I am working on a small python tool to download an entire website locally. In order to view the website offline, I need to convert all URLs to relative URLs. This is necessary to ensure that resource files (such as .js and .css) are ...

htmlregexurlweb-scrapingw3c