Looking for assistance with the navbar notification icon?

My navbar notification button is causing a problem by resizing the navbar.

example

Below is the code snippet:

.badge-notify{
           background:red;
           position:relative;
           top: -20px;
           left: -35px;
        }
      <ul class="nav navbar-nav navbar-right">

        <li><a href="#">

        
          <button class="btn btn-lg btn-link">
            <span class="glyphicon glyphicon-envelope"></span>
          </button>
          <span class="badge badge-notify">3</span>
        

        </a></li>

It's unclear whether the issue is related to CSS, but the button seems to be creating a blank space on the navbar.

Possibly the problem lies in:

htmlcssbuttonnotificationsnavbar

Answer №1

First of all, it is not considered valid HTML to have buttons inside links, so you should choose either a link or a button, not both.

Make sure to place the second span within the button (or link) and position it absolutely.

.btn-link {
  position: relative;
}

.badge-notify {
  background: red;
  position: absolute !important;
  top: -15px; /* adjust as required*/
  right: 5px; /* adjust as required*/
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav navbar-nav navbar-center">
  <li>
    <button class="btn btn-lg btn-link">
      <span class="glyphicon glyphicon-envelope"></span>
      <span class="badge badge-notify">3</span>
    </button>
  </li>
</ul>

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 retrieving JSON data from an AJAX call and displaying it pre-filled in an input field

Here is the code snippet I used to receive a response in JSON format, but when I try to display the response using alert(response.Subject);, it shows as "undefined". HTML: <input type="text" id="subject" value='Subject'> Javascript: $.a ...

javascriptjqueryhtmlajaxjson

Unable to trigger JavaScript function from ASP.NET MVC HTML view

I am encountering an issue with my ASP.NET MVC project where I am attempting to call a JavaScript function to record a user's selection from a listbox. Despite duplicating the JavaScript function in multiple places, it is still not being found. What c ...

javascripthtmlasp.net-mvc

I am having trouble getting my JavaScript to load

I've hit a roadblock trying to understand why my JavaScript code isn't executing properly. Could someone kindly point out what I may have overlooked? :( JSFiddle Link HTML Snippet <div class="po-markup"> <br> <a href="# ...

javascriptjqueryhtml

ng-click event not firing after $compile in AngularJS

I'm struggling to get my dynamic HTML elements generated from an AngularJS controller to trigger a function using ng-click. Even after using $compile, the function is not being called. Check out my JS code: var accountApp = angular.module('acco ...

htmlangularjsangularjs-ng-click

Combine div elements with identical class

Is there a way to utilize jQuery in order to enclose groups of elements with the same class within a div? I have been searching for a solution, but haven't found one yet. Here's an example of the HTML: <div class="view-content"> < ...

javascriptjqueryhtmlclasswrapall

When the browser window is minimized, the top section of the website becomes concealed

For the past few weeks, I have been working on creating a new website. The progress is looking good overall, but there is one issue that I have encountered. When viewing my website in a browser window smaller than the actual webpage size, the top menubar ...

htmlcsshidemargincenter

The utilization of the Open Sans font family results in certain alterations to the user

Currently, I am working on developing a button widget using react. I have utilized the 'Open Sans' font family for the HTML body in order to maintain consistent UI styling. However, some of the styling elements break down when the 'Open Sans ...

htmlcssreactjs

Switch out external CSS stylesheets automatically using toggle scripting

Hello there! I've been trying to figure out a way for this script to switch back to the original CSS external stylesheet. Here is the code that I currently have: $(document).ready(function() { $("#css-master2").click(function() { $("link[title=chang ...

javascriptjqueryhtml

When creating a PDF from HTML using iText, the CSS styling is not applied

Even though I am able to generate a PDF from an HTML string, the issue is that it doesn't apply the CSS styles. How can I create a PDF with CSS styling? Please assist! I have already attempted using CSSResolver. Below is my code snippet: {String res ...

javahtmlcsspdfitext

When hovered over, the submenu quickly adjusts its size within 0.1 seconds

Whenever you hover over the Galerija, a submenu pops up. However, there seems to be an issue where the right side of the submenu twitches or resizes for about 0.1 seconds initially. If anyone has any insight on this problem, I would greatly appreciate it. ...

htmlcsswordpress-theming

Clicking on the image does not result in a larger image being displayed

Currently working on an assignment that requires a modal pop-out to display larger versions of photos when clicked, with the option to go back using the X button. Unfortunately, I'm facing issues with the X button not functioning properly and images n ...

javascriptjqueryhtmlcssmodal-dialog

Ways to remove all HTML elements from a string

Check out the code that I currently have: I am looking for a way to prevent users from entering any HTML tags in the "Add Responsibilities" field. For example, if a user enters the following: <div>Test</div> It should only display the text l ...

javascriptjqueryhtml

Display a div when hovering over a span with custom styling

Don't let the title fool you. http://jsfiddle.net/whb8A/ I'm struggling to style the text inside a span tag within a div. The h3 element shouldn't be nested in the span, but removing it makes it difficult to style with CSS. When hovering ...

csshtml

Experiencing difficulties with toggling the visibility of div elements when an onchange event occurs

I am experiencing some difficulties triggering an on-change event in the department drop-down field and I'm not certain if I've written it correctly. The error message indicates: Uncaught TypeError: Cannot read property 'style' of null. ...

phphtmlcodeigniter

Mysterious additional spacing

I am facing an issue with aligning my div elements with a 20px margin. Despite setting the margin to 20px, I notice that there are additional 4 pixels rendered when I view it on the browser. Below is the code snippet: .block{ width:50px; height:50 ...

htmlcss

Switch up your code and toggle a class on or off for all elements that share a specific class

I've been attempting to create a functionality where, upon clicking a switch, a specific class gets added to every element that is assigned the class "ChangeColors". Unfortunately, I have encountered some difficulties in achieving this task. The error ...

javascriptcss

Adapting software for use with Panasonic Viera

We are in the process of transferring our current HTML/JavaScript/CSS application to the Panasonic platform. Our current setup involves using JavaScript for generating HTML and CSS for styling the application. The programming language used in the Panasoni ...

javascripthtmltelevision

What is the best way to align a value within CardActions in Material UI?

I'm currently facing an issue with my website design. Here's a snapshot of how it looks: https://i.sstatic.net/UuBJJ.png Additionally, here is the code snippet related to the problem: <CardActions> <Typography style={{ fon ...

cssmaterial-ui

An unusual CSS phenomenon with z-index

I've encountered a peculiar issue with my z-indexing. I have an image positioned relatively with a z-index of 1, and it should be above my navigation that is positioned absolutely with a z-index of -1. The problem is that upon page load, the image ap ...

htmlcss

Methods to disregard class prefix in css document

When I inspect elements in the Chrome console, I notice styles applied to certain divs/buttons like this: /* Sample Chrome browser styles */ .ItemClass1-0-3-171.ItemClass2-0-3-173: { background-color: "red" } I'm wondering how I can def ...

csssass