The background image of the div appears above the top menu

I am encountering a small bug in my code where everything looks fine on desktop, but when I switch to mobile screen, the layout bugs out and displays before another div class.

On desktop, everything looks fine. I want to create a menu like this

Here is the issue...

I want my "My Basket" and "Profile" divs to appear before these images...

Here is my code:

/* 
    |BURGERS DIV
    */

.pm_shop_catagory_burgers {
  width: 250px;
  height: 200px;
  background: url('../images/pm_burgers.png')center;
  position: relative;
  display: inline-block;
  left: 25px;
  border-bottom: 1px solid #7FADCB;
}

// More CSS code here...

<center>
  <h2 class="column-title"><i class="fas fa-angle-double-right"></i> OUR MENU <i class="fas fa-angle-double-left"></i></h2>
</center>
<hr style="border:2px solid #FA5B11;border-radius: 325%;" />
<div class="pm_shop_catagory_burgers">
  <span class="top-left">
                <h2 class="column-title">
                    <a class="collapsible">Burgers</a> 
                    <div class="content" style="padding: 6px;">
                        <a href="./?p=1_4qpb" style="font-size:10pt;">1/4 Quarter Pounder Burger</a>
                        <hr />
                        // Additional HTML code here...
                    </div>
                </h2>
            </span>
</div>
<div class="pm_shop_catagory_grill_dishes">
  <span class="top-left"><h2 class="column-title"><a href="#">Grill Dishes</a></h2></span>
</div>
<div class="pm_shop_catagory_fried_dishes">
  <span class="top-left"><h2 class="column-title"><a href="#">Fried Dishes</a></h2></span>
</div>
<br />

htmlcss

Answer №1

If you're looking to bring "My Basket and Profile" to the forefront, try utilizing the z-index property to establish priorities. For more information, visit this link: https://www.w3schools.com/cssref/pr_pos_z-index.asp. By assigning a z-index of -1 to the burger images, they will be pushed to the background while allowing clear visibility of the "My Basket and Profile" section.

Many thanks!

Answer №2

Despite using z-index: 999; for My Basket and Profile content, I encountered the same problem. To address this issue, I attempted adding z-index: -1; to div contents such as burgers and fried_dishes. However, applying z-index to the div caused it to disappear. Thank you for your assistance :)

================================= Innovative Project ======================================== ===========================/ index /==============================

<div class="pm_h_menu" style="position: fixed;right:0;top:0;">
            <ul>
                <li><a href="./?p=pm_shop"><i class="fas fa-shopping-basket txt_color_pm"></i> <b>My Basket</b></a></li>
                <li><a href="./?p=profile"><i class="fas fa-user txt_color_pm"></i> <b>Profile</b></a></li>
            </ul>
        </div>
        <div class="pm_clear"></div>
<center>
    <h2 class="column-title"><i class="fas fa-angle-double-right"></i> OUR MENU <i class="fas fa-angle-double-left"></i></h2>
</center>
<hr style="border:2px solid #FA5B11;border-radius: 325%;" />
<div class="pm_shop_catagory_burgers">
    <span class="top-left">
        <h2 class="column-title">
            <a class="collapsible">Burgers</a> 
            <div class="content" style="padding: 6px;">
                <a href="./?p=1_4qpb" style="font-size:10pt;">1/4 Quarter Pounder Burger</a>
                <hr />
                <a href="./?p=1_2hpb" style="font-size:10pt;">1/2 Half Pounder Burger</a>
                <hr />
                <a href="./?p=1_2hpb" style="font-size:10pt;">Triple Burger</a>
                <hr style="border:1px dashed #FA5B11;"/>
                <a href="./?p=1_4chb" style="font-size:10pt;">1/4 Chiken Burger</a>
                <hr />
                <a href="./?p=1_2chb" style="font-size:10pt;">1/2 Chiken Burger</a>
            </div>
        </h2>
    </span>
</div>
<div class="pm_shop_catagory_grill_dishes">
    <span class="top-left"><h2 class="column-title"><a href="#">Grill Dishes</a></h2></span>
</div>
<div class="pm_shop_catagory_fried_dishes">
    <span class="top-left"><h2 class="column-title"><a href="#">Fried Dishes</a></h2></span>
</div>
<br />

======================================= Style Sheet (CSS) =========================

/* 
| HEADER MENU | 
*/
.pm_h_menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    background-color: #333;
    letter-spacing: 1px;
    -webkit-transition: .3s;
    transition: .3s;
    z-index: -1;
}

.pm_h_menu li {
    float: left;
}

.pm_h_menu li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    border-bottom:3px solid #FA5B11;
}

.pm_h_menu li a:hover {
    background-color: #111;
    color:#FA5B11;
    border-bottom:3px solid #5C94B9; 
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
/* 
| END HEADER MENU | 
*/
/* 
|BURGERS DIV
*/

.pm_shop_catagory_burgers {
    width: 250px;
    height: 200px;
    background:  url('https://ibb.co/i7GcA9')center;
    position: relative;
    display: inline-block;
    left:25px;
    border-bottom: 1px solid #7FADCB;
}


.pm_shop_catagory_burgers .top-left {
    position: absolute;
    top: 8px;
    left: 65px;
}
.pm_shop_catagory_burgers .top-left a{
    text-decoration: none;
    color:#FA5B11;
}
.pm_shop_catagory_burgers .top-left a:hover{
    text-decoration: none;
    color:#7FADCB;
}
.pm_shop_catagory_burgers .top-left a:hover:before{
    border-radius:325%;
    display: block;
    position: absolute;
    margin-left: -25px;
    content: "\2192";

}
/* 
|END BURGERS DIV
*/


/* 
|GRILL DISHES DIV
*/
.pm_shop_catagory_grill_dishes {
    width: 240px;
    height: 200px;
    background:  url('https://ibb.co/dUieOU')center;  
    position: relative;
    display: inline-block;
    left:25px;
    border-bottom: 1px solid #7FADCB;
}

.pm_shop_catagory_grill_dishes span.top-left {
    position: absolute;
    top: 8px;
    left: 35px;
}
.pm_shop_catagory_grill_dishes .top-left a{
    text-decoration: none;
    color:#FA5B11;
}
.pm_shop_catagory_grill_dishes .top-left a:hover{
    text-decoration: none;
    color:#7FADCB;
}
.pm_shop_catagory_grill_dishes .top-left a:hover:before{
    display: block;
    position: absolute;
    margin-left: -25px;
    content: "\2192";
}
/* 
|END GRILL DISHES DIV 
*/


/* 
|FRIED DISHES DIV
*/
.pm_shop_catagory_fried_dishes {
    width: 240px;
    height: 200px;
    background:  url('https://ibb.co/hrsHA9')center;  
    position: relative;
    display: inline-block;
    left:25px;
    border-bottom: 1px solid #7FADCB;
}

.pm_shop_catagory_fried_dishes span.top-left {
    position: absolute;
    top: 8px;
    left: 35px;
}
.pm_shop_catagory_fried_dishes .top-left a{
    text-decoration: none;
    color:#FA5B11;
}
.pm_shop_catagory_fried_dishes .top-left a:hover{
    text-decoration: none;
    color:#7FADCB;
}
.pm_shop_catagory_fried_dishes .top-left a:hover:before{
    display: block;
    position: absolute;
    margin-left: -25px;
    content: "\2192";
}
/* 
|END FRIED DISHES

Answer №3

Greetings! I recently made some adjustments to my CSS file, removing a small portion of code which resolved the issue I was facing. Here is what I changed:

list-style-type: none;
overflow: hidden;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
background-color: #333;
letter-spacing: 1px;
-webkit-transition: .3s;
transition: .3s;
z-index: 5;
position: fixed;
float:right;
right:0;
top:0;
margin:0;
padding:0;

I also made changes in the HTML section:

 <div class="pm_h_menu">
            <ul>
                <li><a href="./?p=pm_shop"><i class="fas fa-shopping-basket txt_color_pm"></i> <b>My Basket</b></a></li>
                <li><a href="./?p=profile"><i class="fas fa-user txt_color_pm"></i> <b>Profile</b></a></li>
            </ul>
        </div>
        <div class="pm_clear"></div>

Thank you for your help with this matter :)

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

Is there a way to incorporate animation while calculating a number?

I am looking to add some special animation effects to the number in this script, but I am not sure how to achieve that. $('#choose').change(function() { if($(this).val() == '1') { document.getElementById('harga&ap ...

javascripthtml

Steps for transferring a value to a different page after it has been selected from a listview

web page layout <!DOCTYPE html> <html lang="en"> <head> <title>Student Information</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="styleshe ...

javascriptjqueryhtmljson

Viewing HTML in Gmail shows the raw code with tags, making it easy to read with no fancy CSS or styling

This is a simple HTML document with test content that was sent in the message body by a mailing server to a Gmail account: <html> <body> Some text goes here <br><br> User who applied: Username <br> User's email: < ...

htmlgmail

Is it feasible to remain on the page and receive a confirmation message once the file has been successfully uploaded

After uploading and clicking Submit, the page changes without using the JavaScript below. The JavaScript is meant to ensure that the page remains unchanged. Issue While the HTML and JavaScript keep the page as desired and retrieve the radio button value, ...

javascriptjquerypythonhtmlajax

What is the best way to implement a CSS Style specifically for a glyphicon icon when it is in keyboard focus?

I have a particular icon representing a checkbox that appears as a glyphicon-star. It is designed to display in yellow when focused on by the keyboard navigation. This feature is intended to help users easily identify their location on a page. However, an ...

javascripthtmlcss

Using React-Bootstrap to create smaller user inputs

Is there a way to reduce the size of the Input element? By default, the syntax looks like this: <Input type='text' value='' placeholder='Enter Entity'/> Using bsSize='xsmall' does not work for making the inp ...

csstwitter-bootstrapreactjsreact-bootstrap

Unable to stop page refresh following form submission or file upload

Is it possible to upload a photo with Ajax to Express and have the response generate desired HTML? Whenever I submit the form, it redirects me and displays the picture data as an object. Here's the Express code: const storage = multer.diskStorage({ ...

jqueryhtmlnode.jsajaxexpress

I am encountering an issue with my register button not being able to submit in PHP+AJAX, while the

Having trouble with the registration page in PHP and AJAX. The login section works fine as I can sign in, but the registration button appears disabled or inactive, preventing form submission. I suspect an error somewhere, but unable to pinpoint it. Login ...

phphtmlajax

Using jQuery to reveal and conceal elements upon hover interaction

I have implemented a basic jquery function to display and hide a div when hovering over an anchor. However, the issue I am facing is that the div disappears when I move my cursor away from the anchor tag. I want to be able to interact with the div without ...

jquerycss

Having trouble understanding why the other parts of my header are not displaying

<head> This special function runs when the webpage is loaded. <body onload="myOnload()"> A distinctive div at the top with a unique graphic <div id="header"> <img src="resumeheader.png" alt="Header" style="width:750px;h ...

javascripthtmlheaderappendchild

Incorporate a Burger Icon into the Navigation Menu

insert image description here I am currently working on implementing a hamburger slide-out feature in my navigation bar. The desired behavior is for the sidebar to slide out to the right. We are using Elementor within WordPress for this project. Has anyone ...

csswordpressdrop-down-menunavigationelementor

What steps can be taken to transform example.com/blog.html into example.com/blog?

www.awesomenewgames.com/articles I need to change the URL of this page from ending with /articles to simply /blog. So the desired result should be: www.awesomenewgames.com/blog What steps do I need to take to make this change? Any guidance on this matte ...

htmlweburl

Keeping track of the toggle state using a cookie

While searching for a way to retain the toggle state, I stumbled upon js-cookie on GitHub. The documentation provides instructions on creating, reading, and deleting a cookie. However, an example would have been really helpful in enhancing my understanding ...

javascriptjqueryhtmlcookiestoggle

I seem to be having an issue here - my style sheet just won't load

I am having an issue with my external style sheet named style.css. style.css #topbar { background-color: red; width: 1000px; height: 40px; } body{ background-color: green; } I have tried calling this style.css from the root folder, but it's not ...

htmlcss

Adding an <a> tag to Flickity: Step by step guide

Is there a way to incorporate tags into a Flickity image slider without affecting its functionality? Here's the code snippet I have for the slider: <div class="carousel" data-flickity='{ "imagesLoaded": true, "percentPosition": false, "auto ...

javascripthtmlflickity

JavaScript Link Replacement Magic!

I am trying to use JavaScript to update directory links. For example, I need to switch to . This is the code I currently have: <!DOCTYPE html> <html> <body> <img src="http://mysite.com/cdn/backup/Pic.jpg" /> <iframe src="http ...

javascripthtml

Unleashing the power of React: Integrating raw HTML <a href> tags with JavaScript

I am currently working on a small web app that mimics browsing WikiPedia by fetching raw HTML content of WikiPedia articles through its API. I then display this HTML in my app using "dangerouslySetInnerHTML". I am faced with the challenge of enabling a us ...

javascripthtmlreactjsdom

Changing the background color using jQuery switch case statement

I am attempting to utilize jquery to dynamically change the background image of a webpage based on different cases in a JavaScript switch statement. I have completed three steps: 1) Included this script tag in my HTML document: <script src="http://co ...

javascriptjqueryhtmlcss

The issue with the Hidden Content feature in the Slick Carousel is that it does not function correctly on the

There are some related topics worth exploring, such as: Slick carousel center class not working when going from last item to first item Despite trying various solutions, the issue still persists in my code. My goal is to have each item displayed in the ce ...

javascripthtmljquerycssslick.js

CSS not working with fixed positioning

As part of a school project, I am required to utilize the position fixed property to correctly position the cookie statement at the bottom right of the screen. However, when I attempt to move the element, it does not seem to display properly. ...

htmlcss