fa icons moving the elements aside

I'm attempting to design a navigation menu with tabs, but I'm facing an issue where the tabs containing "fa icons" are consuming too much space, causing other elements to be shifted to the right or below (if there were more lines).

How can I prevent this displacement?

You can see how it currently looks in the following image: https://i.sstatic.net/M16nR.png

http://jsfiddle.net/63peh71b/1/

.slider {
    position: fixed;
    top: 168px;
    background-color: white;
    left: 48px;
    right: 48px;
    z-index: 3;
    padding-top: 6px;
}

.nav-tabs {
    border-bottom: 1px solid #c4c4c4;
}

.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

ol, ul {
    margin-top: 0;
    margin-bottom: 10px;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<ul class="nav nav-tabs slider">
<li id="id1" class=""><a href="javascript:;"><i class="fa fa-warning" style="color: rgb(255, 0, 0);"></i> Tab1</a></li>
<li id="id2"><a href="javascript:;"><i class="fa fa-warning" style="color: rgb(255, 0, 0);"></i> Tab2</a></li>
<li id="id3"><a href="javascript:;"><i class="fa fa-warning" style="color: rgb(255, 0, 0);"></i> Tab 3</a></li>
<li id="id4"><a href="javascript:;"><i class="fa fa-warning" style="color: rgb(255, 0, 0);"></i> Tab 4</a></li>
<li id="id5"><a href="javascript:;"><i class="fa fa-warning" style="color: rgb(255, 0, 0);"></i> Tab 5</a></li>
<li id="id6"><a href="javascript:;">Tab 6</a></li>
<li id="id7"><a href="javascript:;">Tab 7</a></li>
<li id="id8"><a href="javascript:;">Tab 8</a></li>
<li id="id9"><a href="javascript:;">adsadsadsad Tab 9</a></li>
<li id="id10" class="active"><a href="javascript:;">Tab 10</a></li>
<li id="id11"><a href="javascript:;">Tab 11</a></li>
<li id="id12"><a href="javascript:;">Tab 12</a></li>
<li id="id13"><a href="javascript:;">Tab 13</a></li>
<li id="id14"><a href="javascript:;">Tab14</a></li>
</ul>

javascripthtmlcssfont-awesomebootstrap-4

Answer №1

Take a look at this suggestion:

header{
position:relative;
}
#yourNavIconsTab {
li {
    list-style: none;
    display: inline-block;
    padding:3px;
    float:right;
    color:@brand-primary;
    position:absolute;
    right:0px;
    top:0px;
  } 
}

You may have to tweak the top and right values accordingly.

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

Facing issues with converting SVG to PDF in Rails 5.0

Below you will find two images: the first one is displayed in a browser view, while the second one shows a PDF view. The issue lies with the SVG to PDF conversion. I have dynamically set the stroke-dashoffset value, which works correctly in the browser bu ...

jquerycssruby-on-railspdfsvg

Retrieve a boolean value through an Ajax call from a C# function using T4MVC

I have a search bar on my website with the following code: <form onsubmit="return IsValidCustomer()"> <input class=" sb-search-input" placeholder="Search for a customer..." type="text" value="" name="search" id="search"> <input cl ...

javascriptc#jqueryajaxforms

Unable to upload any further verification documents to Stripe Connect bank account in order to activate payouts

Query - Which specific parameters should I use to generate the correct token for updating my Stripe bank account in order to activate payouts? I've attempted to activate payouts for my Stripe bank account by using a test routing and account number (t ...

javascripttypescriptstripe-payments

Is it possible to switch from a dropdown menu to radio buttons?

I am looking to change the dropdown menu in my search section into radio buttons. Currently, when I select something from the dropdown menu, the search fields are altered. Here is the code for the dropdown menu: <select id="qs_category" name="qs_catego ...

javascripthtmlbuttondrop-down-menusmarty

Utilizing $.Deferred() in a loop of nested ajax requests

I have spent countless hours searching for solutions to my problem, but I am still hopeful that someone out there has a solution. The issue at hand is being able to receive a notification once function a() has finished its execution. The challenge lies in ...

javascriptjqueryajaxdeferred

Unusual behavior experienced with raycasting in Three JS when objects are are repositioned

Software Versions THREE.ObjectLoader2: 2.4.1 THREE.LoaderSupport.MeshBuilder: 1.2.1 THREE.LoaderSupport.WorkerSupport: 2.2.0 THREE.WebGLRenderer: 93 THREE.REVISION: 93 Anomalies Discovered During a raycast operation on objects within my scene, I encount ...

javascriptthree.js

Trigger event listener of AngularJS directive on click and send information to it

During my exploration of AngularJS directives, I encountered a task that required me to activate the directive's listener upon clicking a button and passing data from the controller to it. Sample Directive app.directive('graphVisualization&apos ...

javascriptangularjsangular-directive

Is it advisable to initiate an AJAX call and allow the browser to cancel the request if needed?

When an AJAX request is made, it typically appears in the network tab in Chrome. However, if a client-based redirect occurs at the same time, the AJAX request may be cancelled. But does this mean that the request still reaches the server and executes as ...

javascriptajaxjquerybrowser

What is the best way to include the API body in a GET request?

I'm facing an issue with passing parameters to the body instead of the query in my code. Here's what I have attempted: const fetchData = async () => { let response = await apiCall("URL" + { "companyArr": ["SBI Life Insurance C ...

javascriptreactjsapiget

The dropdown menu is obscured by the toolbar

When using ionic4/angular, I want a dropdown menu to display upon clicking on the ion-avatar. However, the dropdown menu is hiding in the toolbar. I have tried setting z-index but it did not work. Any suggestions would be appreciated. You can find the sta ...

htmlcssionic-frameworkbootstrap-4ionic4

iterating over a list of files using JavaScript

I am currently working on setting up individual ajax requests for each file being uploaded. I have a functioning ajax call that creates a record, returns some html, and provides the tempID of the record which is then used in another ajax call that triggers ...

javascriptjqueryajaxform-data

How come my footer is appearing at the top of my webpage?

I have encountered a problem where the footer is displaying on top of my page, despite not using any floats, wrappers, or grids in my code. The code snippet can be found below this text. Could someone assist me in identifying why this issue is occurring ...

htmlcssfooter

Utilize the HTTP.get function to serve files in the img src attribute

I am facing an issue where my file can only be accessed if I include an x-authentication token in the header of the "GET" http request. Unfortunately, using a cookie is not an option in this case. This means I cannot simply call for the file by its URL in ...

javascriptnode.jsmeteorgridfsgridfs-stream

Looking to eliminate the bullet point next to the labels on a highcharts graph?

I have implemented a Highcharts solid gauge in my project, and you can view a sample image https://i.stack.imgur.com/QQQFn.png However, I am facing an issue where unwanted grey bullets are appearing in the test environment but not locally. I have checked ...

javascriptvue.jshighcharts

How do you efficiently include several elements within a single column in Boostrap 5?

I've been working with Bootstrap 5 to display a grid of images similar to this link, but the images are not displaying as intended due to some CSS code. #projects img { width: 100%; height: 100%; } <section id="projects"> ...

htmlcssbootstrap-5

What is the best way to handle multiple responses in Ajax within a single function?

Here is a simple code snippet: $.ajax({ url:'action.php', method: 'POST', data:{getcart:1}, success:function(response){ $('#getcart').html(response);//want to ...

javascriptphpjquerymysqlajax

Making a Jquery Ajax Request in Real Time

Is there a way to make sure that the "Test Data" text is only displayed in the console after the book details are fully loaded into vm.books? I am trying to make a synchronous ajax call for this purpose. The code below is not producing the expected result ...

javascriptjqueryajax

React Hooks: Issue with UseRef not detecting events from Material UI Select component

I'm currently utilizing React Hooks in my project. I am attempting to trigger an onclick event using the useRef hook. const component1: React.FC<Props> = props { const node =useRef<HTMLDivElement>(null); const ClickListe ...

javascriptreactjsmaterial-uireact-hooks

How can we implement :focus-within styling on Material-UI Select when the input is clicked?

I am currently implementing a Select component inside a div element: <div className="custom-filter custom-filter-data"> <DateRangeIcon className="search-icon"/> <FormControl variant='standard& ...

javascriptreactjsmaterial-ui

Adjusting the properties of a <span> tag when hovering over a different element

Query: I am trying to dynamically change the color of the span element with classes glyphicon and glyphicon-play when the user hovers over the entire element. How can I achieve this? Recommendation: .whole:hover > span.glyphicon.glyphicon-play { c ...

csshover