Does anyone know how to properly position a badge on top of an icon without it appearing to the right?
Check out this screenshot:
https://i.sstatic.net/z1Apj.png
This is the code I am using:
<li class="nav-item mr-3">
<a href="#" class="nav-link nav-icon">
<i class="uil uil-bell">
<span class="badge badge-light">2</span>
</i>
</a>
</li>
I want it to look like this instead:
To achieve this effect, you can utilize the CSS property position: absolute.
.iconClass{
position: relative;
}
.iconClass span{
position: absolute;
top: 0px;
right: 0px;
display: block;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<li class="nav-item mr-3" style="width: 40px;">
<a href="#" class="nav-link nav-icon iconClass">
<i class="fas fa-bell"></i>
<span class="badge badge-light">2</span>
</a>
</li>Ensure that the badge is aligned with the icon by following these steps:
position: relative; should be applied to nav-icon
position: absolute; top: -5px; right: -5px;<li class="nav-item mr-3">
<a href="#" class="nav-link nav-icon">
<i class="uil uil-bell"></i>
<span class="badge badge-light">2</span>
</a>
</li>
Within the main navigation of our Wordpress website, built using the Divi Page Builder, there are two submenus. The issue arises when hovering over the main navigation item and then leaving the submenu - at that point, both the background and the text disa ...
My ajax response is functioning properly and displaying the content of the result, but I am always getting the CSS effects which I do not want. I need to eliminate the class="container body-content" from the following div in the ajax call's result. ...
Below is a snippet of HTML code from my AngularJS application <input type="text" class="input-xlarge" id="user_name" ng-model="myModel.text" name="user_name" rel="popover" data-content="Enter your first and last name." data-original-titl ...
Is there a way to change the CSS style of the Bootstrap datetime picker control so that when selecting years, the color changes from blue to red? I attempted to do this with the following code: .selectYear { background-color:red!important; } However ...
I've been searching for a solution to this question without any luck. Here is the tag I'm working with: <input type="text" id="userText" class="userTextBox"> And here is my CSS: .userTextBox { /* Add marg ...
After searching extensively, I finally stumbled upon a multi-item carousel compatible with bootstrap 4 that meets all my requirements: It is completely responsive (displaying only one item on smaller screens) It features animations <div class="co ...
Thank you for the assistance, I believe this issue should be an easy fix. I have added a custom :focus style to my input that removes the default outline and adds a box shadow and border. However, when the input field is focused, the submit button located ...
Hey there, I'm having trouble posting an image but here is the link: I believe this explanation will be clearer, D2, D3 & D4 need to be aligned next to each other and centered on the screen at all times. (960px) & ...
I recently created some buttons for my website using React. Initially, everything was working perfectly with the buttons, but suddenly they stopped functioning. Strangely, I didn't make any alterations to the code and I'm puzzled as to why they a ...
After generating a model in Laravel, I attempted to migrate the table using 'php artisan migrate', but encountered an error message on the terminal: "Call to a member function index() on null" ...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de ...
https://i.stack.imgur.com/JW26M.png After setting the iframe's innerHTML using this line of code: iframedoc.body.innerHTML = tinyMCE.activeEditor.getContent(); The styles for the elements within the iframe are contained in an inline style block. Ho ...
Hello fellow Stackers! I could really use some help with a few IE-specific bugs I've encountered while working on a website for a friend. Check out the Website Here | View the Full CSS File The issue I'm facing is with the Google Webfont Ralewa ...
I have a unique interface requirement where users must be able to click on an element to view its options, which are displayed as checkbox inputs. Essentially, I need a custom 'select' element that allows for multiple checkbox selections. ...
I am looking to create a circular counter similar to the one shown below. I have tried using easy-pie-chart but I am unsure how to style the circles to look like the example provided. Is there a way to achieve this through CSS? Any recommended resources o ...
Concern: I'm struggling with alignment issues on my website. I have country flags displayed using display:inline;. The issue arises when the number next to the flag exceeds single digits (e.g., 10 or more) as it affects the alignment due to the consi ...
Is it possible to use the same SVG element twice on a web page without having to load it again? I am changing the CSS of the SVG using JavaScript, so I believe the SVG must be directly embedded in the HTML rather than included as an object. Both instance ...
Recently, I encountered a challenge while working on my website. I want to set up a link inside a div that changes color when hovered over. However, the desired effect is not quite coming out as expected. Before hovering, I aim to have a border around the ...
Having trouble with fixed positioning on webkit browsers. Works fine in Firefox, but can't seem to solve the issue. You can see the problem here: When clicking on a project, a page is loaded using jQuery's .load() function. On this page, there ...
It's become quite challenging for me to locate images that can occupy the entire width of a page while maintaining just 25% of the page height. Whenever I make adjustments to the image's CSS, it ends up appearing distorted because its width is di ...