The hamburger menu image is not appearing when using the CSS background-image property

The burger menu image I have as a background image is not displaying in my navigation bar or on the page.

I set it to appear when the page is responsive (max-width: 480px), but it still doesn't show. I even tried copying the code to my main CSS above the media query to test if it would display on the full page, but no luck.

<nav class="navbar">

          <a class="burger-nav"></a>
          <ul>
            <li><a href="index.html">HOME</a></li>
            <li><a href="#">CASINO</a></li>
            <li><a href="#">HOTEL</a></li>
            <li><a href="#">ENTERTAINMENT</a></li>
            <li><a href="#">EVENTS</a></li>
            <li><a href="#">MEMBERS</a></li>
            <li><a href="#">JOIN</a></li>
          </ul>

        </nav>



@media screen and (max-width: 480px){

  .burger-nav{
    display: block;
    background-image: url(../images/burger-nav.png);
    background-repeat: no-repeat;
    height: 40px;
    width: 100%;
    color: red;
    background-color: blue;
  }
}

This is the path of my image, the file name is "burger-nav.png":

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

Any suggestions on how to make the burger nav image show up?

Answer №1

If you're looking for a solution, consider taking this route:

  .burger-nav img {
   display:none;
  }


@media screen and (max-width:480px) {
  .burger-nav img {
    display:block;
    width:40px;height:40px;
  }
}
<nav class="navbar">
  <a href="#" class="burger-nav"><img src="http://dev.laurentchevrette.digital/images/burger-nav.png"></a>
   <ul>
      <li><a href="index.html">HOME</a></li>
      <li><a href="#">CASINO</a></li>
      <li><a href="#">HOTEL</a></li>
      <li><a href="#">ENTERTAINMENT</a></li>
      <li><a href="#">EVENTS</a></li>
      <li><a href="#">MEMBERS</a></li>
      <li><a href="#">JOIN</a></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

Hiding loading spinner in Ionic 2 upon iframe completion

I need to embed an external webpage in my app using an iframe. I have successfully implemented a loading animation while the iframe is loading, but I am unsure how to hide the animation once the iframe content has loaded. Unfortunately, I am unable to edit ...

Expand your dropdown options with a Popup Input feature in the ComboBox to seamlessly add a 'New Option'

Hello there! I am currently learning, so please be patient with me. Currently, I am in the process of developing a web application for a product management system. The company I work for purchases products from multiple vendors, both through wholesale and ...

What is the reason for the jquery change event failing to fire when the select value is modified using val()?

I'm experiencing a peculiar issue where the logic inside the change() event handler is not triggering when the value is set using val(), but it does work when the user manually selects a value with their mouse. Any idea why this might be happening? & ...

An element will not automatically wrap text when all anchors are in place

http://jsfiddle.net/awWmY/ I've been struggling to figure out why the text won't wrap to #bigEnough. Can anyone help me with this simple issue? html{background:black;} #bigEnough { width: 500px; text-wrap: normal; } #bigEnough a { -moz-t ...

Ways to incorporate a dynamic value into a chart created with chart.js?

I want to create a doughnut chart representing the number of individuals who have tested positive for Coronavirus and the number of deaths related to it. How can I transfer the same data from the top container into the chart? The confirmedCases and deaths ...

JavaScript - A simple way to retrieve the dimensions of an image consistently

I'm currently working on a piece of Jquery code that is designed to display an image fitting within the screen's dimensions. These images are generated dynamically as needed. However, I am facing an issue where the height and width of the image a ...

Creating a notification system similar to Facebook's in an HTML button using just HTML and CSS

I'm attempting to create a button with a notification feature that mimics the style of Facebook notifications. I want a small red circle in the top right corner, showing a numerical value. However, I'm running into some difficulties. I can' ...

What is the process for extracting the differences between two or three files and merging them together in Node.js?

Recently, I've been experimenting with webpack and successfully managed to output and transform es5 build to include nomodule in the tags directly from HtmlWebpackPlugin using hooks. Similarly, for the es6 build, I added type="module". Howe ...

My CSS horizontal drop-down menu is causing the sub-navigation items to overlap each other

I'm having an issue where my sub navigation menu items are stacking on top of each other instead of displaying properly. Here is the code snippet causing the problem: /* STYLING FOR NAVIGATION MENU */ .nav-bar { width: 100%; height: 80px; ...

Turn off the footer button on materialize.css modal

I'm struggling to disable one of the modal footer buttons in materialize.css. I tried using disabled="disabled", but it doesn't seem to be working. You can see my example on jsfiddle. <a class="waves-effect waves-light btn modal-trigger" href ...

Retrieval of jQuery remove() method

Essentially, I am utilizing an OnClick function to delete a DIV. Once the OnClick is triggered, it invokes the remove() jQuery function to eliminate the div. Below is my code that implements the removal using remove(): <div id="add"> <button typ ...

Creating distinct identifiers for CSS JQ models within a PHP loop

Can anyone assist me in assigning unique identifiers to each model created by the loop? I am currently looping through a custom post type to generate content based on existing posts. I would like to display full content in pop-up modals when "read more" i ...

Having trouble with the contact form sending emails

My contact form box seems to be having trouble directing the mail to my email. When I hit the send message button, it just refreshes the page in a continuous loop. <div class="wow fadeInUp col-md-6 col-sm-12" data-wow-delay="1.6s"> <h1>I ...

When table cells are added dynamically, they are not encompassed by the solid fixed title bar when scrolling

My webpage has a fixed title bar with a high z-index that overlaps all other elements on the page when they are scrolled up, except for the dynamically created table cells. What attributes or styles do I need to set in order to hide the table cells behin ...

Use the ng-repeat directive to display multiple items and let the user input a quantity for each item. Then, in AngularJs, gather all the form data, including the repeated items and their quantities, and

Hey there! I have a question related to AngularJs: How can I repeat pre-selected items using (ng-repeat) and allow users to enter a quantity for each item in a subsequent step, then submit all the form data? I'm wondering if adding $index to the repe ...

Leveraging Vue components for populating table information within a Vue-exclusive application

I am currently working on developing a front-end web application using Vue. One of the components in this application renders a table, and I want to populate some of the table data using a child component within a loop for each row in the table body. Pare ...

Can javascript be used to swap out the folder in my URL?

I have been searching for solutions on how to change the language of my website using jQuery, but so far I have not found anything that works for me. Let's take my website as an example: www.domain.com I have separate folders for different languages. ...

When submitting a form with a contenteditable div and text box using JQuery, the POST request is not

I developed a website that allows users to edit and format text, then save it onto the server. Utilizing jquery to send the data to a PHP page for saving, I encountered an issue where the site fails to send the file name along with the formatted text to PH ...

Ensuring that images are the perfect size for their parent container

Exploring the functionalities of angular bootstrap carousel, I am eager to showcase various images and enable clicking on them. The challenge I'm facing is that my images are not uniform in size and don't fit perfectly within my bootstrap column ...

What is the best way to integrate my custom JavaScript code into my WordPress theme, specifically Understrap?

I am looking to enhance my website with a sticky navbar positioned directly under the header, and I want it to stick to the top of the page as users scroll down. Additionally, I want the header to disappear smoothly as the user scrolls towards the navbar. ...