Using a background image in the navigation menu with CSS

Looking to create a horizontal menu with a responsive background image.

Struggling with the issue of the 'ul' menu being misaligned with the background image when in full-screen mode. Attempted to use separate 'div' containers for the image and menu, but it did not resolve the problem.

Additionally, resizing the window to its smallest size causes the menu to extend beyond the image bar.

Avoiding 'px' settings to ensure maximum responsiveness for the website.

Here is the HTML and CSS code:

.menu {
  margin-top: 1%;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 11vh;
  background: url(../Images/menu.png) no-repeat;
  background-size: 90% 10vh;
  margin-bottom: 5%;
}
<body class="container">
  <div class="menu">
    <ul>
        <li> foo1 </li>
        <li> foo2 
            <ul>
              <li> sub </li>
            </ul>
        </li>
        <li> foo3 </li>
    </ul>
  </div>
</body>

htmlcssimagemenubackground

Answer №1

Make a change in your code: 

background: url(../Images/menu.png) no-repeat;

Replace it with:

background-image: url("../Images/menu.png");
background-repeat: no-repeat;

Remember to check if the image path is correct.

I implemented the changes above and it worked perfectly (using my own image, of course).

When it comes to responsiveness, it's recommended to have 3 different images for various resolutions and adjust them using @media queries.

For instance: 

@media (max-width: 1200px) {
    .menu {
        background-image: url("../Images/menu1200.png");
    }
   }

@media (max-width: 767px) {
    .menu {
        background-image: url("../Images/menu767.png");
    }
   }

@media (max-width: 480px) {
    .menu {
        background-image: url("../Images/menu480.png");
    }
   }

Moreover, utilizing Bootstrap is the optimal choice for creating responsive menus. Check out more information on how to do this here.

Answer №2

According to the HTML standard, a ul cannot be a child of another ul. To avoid HTML validation errors, your code should look like this:

<ul>
     <li> foo1 </li>
     <li> foo2  
            <ul> 
                        <li> sub </li> 
            </ul>
     </li>
      <li> foo3 </li>
</ul>

A child ul element should have a parent li element first before applying any styling.

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

Explain the inner workings of the setTimeout() function in JavaScript

My goal is to create a line in my code by placing points according to the line equation and adding a 100 millisecond delay before each point is displayed. However, when I try to run the code, it seems to wait for some time and then displays all the points ...

javascripthtmlcsssettimeout

Prevent users from selecting elements on the mobile site

Hey there! I'm currently working on preventing users from selecting items on my mobile site. While I've been successful in doing so on a regular website using the CSS class below .unselectable { -moz-user-select: -moz-none; -khtml-user-s ...

javascriptcssangularjs

Conceal any zero values from an empty numerical input

Currently, I have a form that retrieves data from a database and includes a number input type field. When the field is empty, it defaults to displaying "0." However, I would like to hide the "0" and only show the value if it is different from 0. Despite a ...

javascripthtml

Is there a way to separate a string similar to the way bbcode does?

$answer = "This is simply a placeholder text example. WOW! Check out this link [link=http://www.yahoo.com] yahoo yahoo[/link]"; Hey there, I am developing a discussion platform, and my goal is to allow users to use specific tags like [link=*link*]*text*[/ ...

phphtmlforum

Generating a Popup Alert with a DIV

Looking at this instance: HTML / CSS Popup div on text click I am curious about how to have this display on the main page upon initial visit to the website. I prefer it to load automatically without requiring a button click, and once the content is read, ...

htmlcsspopuponload

Adjusting the empty image source in Vue.js that was generated dynamically

Currently experimenting with Vue.js and integrating a 3rd party API. Successfully fetched the JSON data and displayed it on my html, but encountering issues with missing images. As some images are absent from the JSON file, I've saved them locally on ...

javascripthtmlvue.jsvuejs2vue-component

Tips for switching back and forth between two classes using jQuery?

I'm having some trouble with the toggleClass function. It doesn't seem to be working correctly for me. The image should toggle between displaying and hiding, but it only changes to hide, not back again. You can view my example here, along with t ...

jqueryhtmlcssclasstoggleclass

Creating Consistent Button Padding in Material UI

I am working with a series of Material UI buttons that are defined as follows: <Button className={classes.button}>Edit</Button> <Button className={classes.button}>Duplicate</Button> <hr /> <Button c ...

cssreactjsmaterial-ui

What technique works best for changing the visibility of an image without causing other elements to shift position?

On my webpage, I have a table cell with an image that should only display when hovering over the cell. The problem is that when the image is shown, it shifts the other text to the left because its default state is "display:none". I'm searching for a s ...

jquerycsshovertoggle

Python: Change text within HTML content rather than the HTML tags

Looking for help with converting HTML code? <pre class="script">template("main/GlobalShared");</pre> <pre class="script"> var link = '/Draft/Tracker_1.1'; if (wiki.pageexists(link)) { &lt;div class="version"&gt; web ...

pythonhtmlregexmindtouch

typo in tweet share button

There seems to be a strange typo in the Twitter button on my website: Here is the code for the button: <a lang="<?php echo mida_is_english() ? 'es' : 'he' ?>" href="http://twitter.com/intent/tweet" ...

phphtmltwitter

Issue encountered when trying to integrate a CSS sticky footer with a liquid/fluid layout

I've been attempting to incorporate the CSS Sticky Footer technique demonstrated at cssstickyfooter.com. (I also experimented with Ryan Fait's solution without success). I believe I've followed all the instructions correctly. I have a conta ...

csshtmlfootersticky-footer

Thrilling visual loops in motion with CSS animations

Currently, I am working on developing a captivating 'pulsating rings' animation that revolves around a circular image with the use of CSS animations. The image itself is a circle measuring 400px in width. Although I have successfully implemented ...

htmlcsscss-animations

The paragraph tag remains unchanged

I am currently working on developing a feature that saves high scores using local storage. The project I'm working on is a quiz application which displays the top 5 scores at the end, regardless of whether the quiz was completed or not. However, I&apo ...

javascriptjqueryhtmlcssajax

Using JQuery functions from other JavaScript files is Simple

When it comes to my CSS, I have taken the approach of creating smaller files for specific functions and then using minification to merge and compress them into one file for easier download. I want to apply the same strategy to my JS Files by logically sep ...

jqueryhtmlcss

If the URL hash matches the ID of a specific div, then take action on the div's child element

Imagine I have the following HTML structure: <div class=".blog-item-holder"> <div id="AAAA"><div class="inner">AAAA</div></div> <div id="BBBB"><div class="inner">BBBB</div></div> <div id="CCCC">& ...

jqueryhtmlcssurlfragment-identifier

Leveraging Angular for REST API Calls with Ajax

app.controller('AjaxController', function ($scope,$http){ $http.get('mc/rest/candidate/pddninc/list',{ params: { callback:'JSON_CALLBACK' } }). success(function (data, status, headers, config){ if(ang ...

javascripthtmlangularjsajaxrest

Issue with justify-content in Bootstrap 5 still unresolved

Currently working with Bootstrap 5 and have set up 4 cards. My goal is to position the second card on the left side. I've applied the class justify-content-xl-start to the card, however, it doesn't seem to be functioning as expected. I also attem ...

htmlcsstwitter-bootstrapbootstrap-5

What is the process for defining a date range in HTML5?

I am currently working on a wedding website and I am trying to set up a countdown for the wedding date. However, I am having trouble figuring out how to correctly display the countdown. https://i.sstatic.net/iGikh.png Here is the code snippet that I am u ...

htmltwitter-bootstrap

JavaScript function to convert a string of characters into a readable time format

Is there a way to input a string in an 'input type="time"' field in my HTML code? <label class="item item-input"> <span class="input-label">Departure Time </span> <input type="time" ng-model="heur ...

javascripthtmltime