Troubulating problem of unread notification badge on bell icon due to Bootstrap's responsiveness

On a standard-sized screen, I have a blue circle/badge that appears when there are unread notifications. It looks perfect when the screen is fully maximized.

https://i.sstatic.net/iJBtu.png

This is the HTML code:

<li class="nav-item">
    <a class="nav-link position-relative" href="#">
        <i class="fas fa-bell notification"></i>
    @if (loggedInUserHasUnreadNotifications())
        <div class="unread-notifications-circle-nav"></div>
    @endif
    </a>
</li>

Here is the corresponding CSS:

.unread-notifications-circle-nav {
  position: absolute;
  top: 10px;
  left: 16px;
  width: 10px;
  height: 10px;
  background: #007bff;
  border-radius: 50%;
}

Despite my efforts, the image loses its position when the screen size is reduced. I've tried everything I can think of to keep the circle in place, but nothing seems to work. How can I ensure that the blue circle always stays where it should be?

https://i.sstatic.net/sNnCT.png

csslayoutbootstrap-4responsive-designresponsiveness

Answer №1

To change the position, consider implementing a media query.

  1. Identify the breakpoint where the navigation layout switches (typically around 768px).

  2. Adopt a mobile-first approach by using a media query with min-width instead of max-width.

  3. You can adjust the position from left to right by setting left: auto;

    /* Mobile first */  
.unread-notifications-circle-nav {
    position: absolute;
    top: 10px;
    left: auto;
    width: 10px;
    height: 10px;
    background: #007bff;
    border-radius: 50%;
}

/* MD breakpoint and up */  
@media only screen and (min-width: 768px){
    .unread-notifications-circle-nav {
        left: 16px;
    }
}

Consistently using min-width in media queries helps maintain code cleanliness over time. You could use max-width, but it may introduce issues like a 1px gap.

This code snippet should work, although it has not been tested.

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

Navigating the Command Prompt following the compilation of ng serve

Upon setting up a new Angular 5 project, installing the necessary tools including Angular CLI and Node.js, I successfully ran ng serve via command prompt. However, when attempting to install Bootstrap through the command prompt, it seemed unresponsive. Wha ...

node.jsangularcommand-promptbootstrap-4

The intricate layout of Android using linear and relative positioning

I am faced with the challenge of creating a layout as depicted in the diagram, but I'm struggling to find the optimal combination to achieve the desired design. My goal is to create a responsive design that works well on both 7" and 10" tablets. Base ...

androidperformanceandroid-layoutlayoutandroid-linearlayout

Achieve a full page layout with content and attach the footer to the bottom using flexbox in Tailwindcss and Nextjs

How can I use flex-grow to make the body section fill the screen and keep the nav fixed at the bottom? I'm having trouble figuring out which elements to apply these properties to. Can anyone provide guidance on which element should have these styles? ...

javascriptcssreactjsnext.jstailwind-css

Tips for creating a fixed top navbar

I recently created a one-page website and wanted to make my navbar fixed. Currently, it looks like the image linked below: In order to achieve this, I floated the logo to the left, the navbar to the right, and set the position to absolute so that the righ ...

javascriptjqueryhtmlcss

HTML table row content should be aligned to the left side

I am attempting to align the data in the 'Address' column without any margin. I want it to start from the left since it's overflowing. You can find the HTML, CSS, and JS code here Even though I tried using <td align="left">..</td& ...

javascriptjqueryhtmlcss

Modifying a leave transition in Vue.js dynamically following the completion of an enter transition

I am dealing with a dynamic transition for a slider element that moves left or right. Vue only allows me to have one transition, so I am using a dynamic transition property like this: <transition v-bind:name="'slider-' + slideDirection"> ...

javascriptcssvue.js

The float:left property within a div is not behaving as anticipated

I am having trouble positioning my second div. In order to have 70% of my website for posts and 30% for a small text display, I created a new div. I believe the correct way to position it is by using "float: left" so that the div goes under the banner whe ...

htmlcssresponsive-design

A table featuring an HTML select element that allows users to choose from preset options or manually enter

My goal is to incorporate a select box where users can either choose from a set list of options or input their own custom value. The select element is nested within a table. Unfortunately, using datalist is not a viable solution for me in this case. I have ...

javascriptjquerycsshtml-table

Employing bootstrap to include oversized images within a compact, fixed div

I am facing an issue with image responsiveness in the middle row of my layout. Despite using Bootstrap 4 and applying classes like img-fluid, the images in my #fullColumn area do not resize properly. The images are dragged into this area by users and are ...

htmlcssbootstrap-4

"What is the best way to display a menu outside of an iframe and have it visible over two iframes

I am facing an issue with two iFrames, if1 and if2. The if1 contains a menu that has a height of 100%, while if1 itself has a height of only 10%. On the other hand, if2 has a height of 90%. These two iFrames are positioned horizontally. When the menu in if ...

javascripthtmlcssiframe

Instructions for retrieving data from a weather API using JavaScript

Hello amazing Stackoverflow community! I need your help to figure out how to extract data from a weather REST API using JavaScript. I'm struggling to fetch the weather condition and date/time information from this API. { info: { _postman_i ...

javascripthtmlcssnode.js

Search button in Bootstrap navbar misplaced

Following Dennis Ivy's tutorial on an ecommerce site, I attempted to implement the navbar from here (the first example). However, after copying and pasting the code and ensuring proper indentation, the search field and button appear misplaced. A snipp ...

htmlcssbootstrap-4navbar

Jquery's mouseclick event selects an excessive number of elements

Is there a way to retrieve the ID of an element when it is clicked, only if it has one? I currently have this code set up to alert me with the element's ID: $("[id]").click(function(event) { event.preventDefault(); var id_name = $(this).attr ...

javascriptjqueryhtmlcssclick

Popover disappears when scrolling the page, but its position remains constant in Angular 4+

After clicking on an icon, a popover appears. I've noticed that the popover has a delay set, but when I scroll, the popover also moves along with it. Is there a way to keep the popover in place and not have it affected by scrolling? <md-badge cla ...

htmlcssangularpopover

Eliminate the excessive space surrounding the alert div by utilizing Bootstrap 4's spacing utilities

I am struggling with aligning the text in my Bootstrap 4 alert message with the top of the (i) icon. I have tried adjusting margins and padding without success. Can anyone provide guidance on how to achieve this alignment, as well as centering the card ver ...

alertbootstrap-4

In Firefox version 3.6, sIFR 3 is displaying text in a random arrangement along a single line

For some reason, sIFR 3 is behaving oddly in Firefox. In other browsers like IE, Chrome, and Safari, the Flash element within a 412px wide box remains consistent at that width. However, in Firefox, it initially stretches to the width of the Body element b ...

javascriptcssfirefoxsifrwidth

The process of toggling a div to slide up and down explained

I'm attempting to create a slide toggle effect on a hidden DIV when a user hovers over specific link buttons. JavaScript: $(function () { // DOM ready shorthand var $content = $(".sliderText"); var $contentdiv = $(".sliderCo ...

jqueryhtmlcss

Switch between various div elements

Looking for a way to toggle between different divs? Here's the scenario: You have a sidebar with a set of buttons. Upon entering the page, you only want the div containing the button group to be visible. However, when a specific button (e.g. Info) is ...

javascripthtmljquerycsstoggle

What is the best way to transfer values between various methods within a single service file in Angular?

In my service file, I have two methods called getData and delete. The data is sourced from an API and the getData method works fine. However, I am facing a problem with the delete() method where siteId is not being read correctly. When I click the save bu ...

htmlcssangulartypescriptangular6

When resizing the browser or changing resolution, one div may cover another div

After generating the HTML on my ASP.NET page, everything looks good initially. However, I noticed that when I adjust the screen resolution or reduce the browser size, the image in the logoplace div starts to overlap. It appears to be an issue with absolute ...

csshtml