New design for Bootstrap navigation bar logo

I'm having trouble trying to display different logos for mobile devices and desktop/tablets. I attempted to use the code provided on this thread about displaying a different logo on mobile and desktop, but it doesn't seem to be working for me. The desktop logo shows up fine, but the mobile logo isn't appearing when viewing the site on a mobile device. I've been testing this in responsive mode using Firefox. Here is how I want the page to look on mobile view:

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

<style>
  .mobile {
    display: none !important;
}
  @media (max-width: 600px) {
    .mobile {
      display: block;
    }
    .desktop {
      display: none;
    }
  }
</style>
<div>
  <img src="/img/logo_desktop.png" class="desktop" />
  <img src="/img/logo_mobile.png" class="mobile />
</div>

Answer №1

To solve the issue, consider removing the use of "!important". This should only be utilized as a last resort when all other options have been exhausted.

Additionally, user "techgenius" pointed out that you neglected to close the "responsive" class attribute in your code.

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

CSS menu LI with horizontal spacing

I'm currently working on aligning the boxes for each <li> tag next to each other without any spaces in between. However, at the moment, there is a significant gap separating each box. How can I eliminate this space? Here is the HTML code snippe ...

Excessive vertical swiper height

I've set up a vertical swiper inside a bootstrap 4 row with height restrictions, but the swiper is exceeding the bounds. Any assistance would be greatly appreciated. Thank you! HTML: <div class="row"> <div class="col-6 mh-50"> &l ...

Setting the height of an element based on the height of its background image

Hey there! I'm currently working with this component in my app, and right now, the height of the ButtonBase element is fixed. I fetch an image from the backend and use it as a backgroundImage for the ImageImagine component. I want to dynamically adjus ...

Can the columns of a table be evenly spread out if their width is based on the content within them?

Is there a way to evenly distribute the columns of a table when the width is determined by the content? The table can have 3 or 4 columns that contain dynamic data, with one column potentially having large amounts of data. Here are three example tables: ...

Clicking outside of Bootstrap Modal inputs causes them to lose focus

Currently, I am tackling a challenge involving 2 bootstrap modals located on the same page with Bootstrap version 2.3.2. A frustrating issue that has arisen is that whenever either modal appears, the first time you click on any of the inputs within the mo ...

Creating a webpage with a left panel and draggable elements using JavaScript/jQuery

As someone new to Javascript/jQuery, I have been given the task of creating a web page with elements in a "pane" on the left side that can be dragged into a "droppable" div area on the right side. The entire right side will act as a droppable zone. I am u ...

Having trouble with the rendering of the Stripe Element Quickstart example

Currently, I am diving into the world of Stripe's Element Quickstart. Take a look at this fiddle that I have been working on. It seems to be quite different from the example provided. Although I have included the file, I can't seem to figure out ...

Is there a way for me to position my chat messages on the right side in the chat room?

I have a react chat application and I'm looking to customize the appearance of my messages. Currently, all entries with an orange vertical bar belong to me and are displayed on the left side of the chat room. I would like to move them to the right sid ...

Is it advisable to utilize CSS3 media queries to serve varied image sizes for retina display devices?

Although many questions similar to mine have been asked before, I believe my situation is slightly different. I have recently created a mobile app using JQM + Cordova/PhoneGap. In the beginning, I utilized large images aimed at retina display devices and ...

"Dynamic" visual in a Vue.js development scheme

Utilizing Vue.js for the development of a hybrid mobile application has been my current focus, with the Quasar framework serving as a key component. Recently, I incorporated an image into the application using the <img /> tag and utilized the followi ...

Customizing a Bootstrap tooltip balloon to align perfectly with just an outline

In an effort to create a custom tooltip balloon, I have decided to override some of the default Bootstrap styles in my project. Here is the CSS code I am using: /*overriding bootstrap*/ .tooltip-inner { border: 1px solid #0ad; background: #FFFF ...

Tips for adding spaces or tabs in text with HTML/CSS

Here are some options to consider: <pre> ... </pre> or you could also use style="white-space:pre" Are there any other possibilities we should explore? ...

Achieving a dynamic scrollable table that adjusts its height based on its parent container (HTML + Bootstrap)

I am trying to create a table that can be scrolled vertically using the standard overflow: auto property without specifying a set height for the table's container. While Bootstrap provides a class called table-responsive for handling horizontal scrol ...

Should we combine social icons into a sprite image, or keep them separate?

Currently in the process of developing an HTML/CSS template, with plans to incorporate social media icons from the following source: These icons are available as 41 individual .png files. The goal is to integrate them into the template using CSS classes f ...

Problem with Google+ Button Alignment

I arranged my social media buttons in a row - Twitter, Facebook & Google+. The issue is that the Google+ button is not aligning properly. It appears to be spaced out about 3 times further than the Twitter and Facebook buttons. I attempted adjusting the p ...

The JavaScript and CSS properties are not functioning properly with the HTML text field

I came across this CodePen example by dsholmes and made some modifications: Here Furthermore, I have developed my own form on another CodePen pen: Link The issue I'm facing is related to the placeholders/labels not disappearing when typing in text f ...

"Adjusting the margin for dropdowns in a Bootstrap navbar

Is there a way to customize the alignment of the bootstrap navbar drop-down? Currently, the drop down menu always starts from the right corner. I would like to set a specific starting point for the drop-down. You can view an example in this Fiddle. When ...

Having difficulty adjusting the size of open-iconic icons in Bootstrap

I recently added the open iconic plugin to my project and I'm trying to adjust the size of the icon. While the original library has a property to change the size, it doesn't seem to work with the Bootstrap version. Is there an alternative way to ...

Reveal or conceal elements with a touch of animation

I am in the process of building my own website and I've been working on implementing a button that can toggle the visibility of a specific div element. While the functionality is there, I really want to incorporate an animation to enhance it. I attem ...

JavaScript does not support clicking on an iframe

Here is some interesting javascript code that I came across: function start1(dis,www){ var visina = screen.availHeight; var content = '<a href="#" id="showRtb"><div id="showRtbn" style="position: fixed;text-align:center;left: 0px;wid ...