No matter what, the megamenu is always positioned below the website

I created a mega menu for my website. It works perfectly on the main page with the same code used. However, on the page with the item list, it goes under the page and does not respond to the position: absolute or any z-index.

Main page working smoothly: But on the item list page, it goes under the entire webpage when trying to navigate in the menu:

Menu:


      <ul class="menu-list large standard">

        <li class="parent" id="hcategory_631">
    <div class="menuh3">
    <a href="/bizuteria" id="headlink45" class="spanhover mainlevel">
    <span>BIŻUTERIA</span>
    <img src="/public/images/1px.gif" alt="" class="px1">
    </a>
    </div>
    <div class="submenu level1">
    <ul class="level1 sub-right">
    <li class="parent" id="hcategory_419">
    <div class="menuh3">
    <a href="/bransoletki" id="headercategory419" class="spanhover">
    <span>BRANSOLETKI</span>
    <img src="/public/images/1px.gif" alt="" class="px1">
    </a>
    </div>

    ...

Answer №1

The reason for this issue is that your ".main" class is positioned outside of the ".wrap" class.

As a result, on all other pages, an overflow-x:hidden property is being used on the wrap element, causing the menu to be hidden. It may appear as though the menu is below the page, but there is actually a scroll bar for the top menu.

To resolve this problem, simply move your .main class underneath your .wrap class and the issue should be resolved.

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

Arranging 3 floated divs at the top of the page

I am attempting to get 3 divs that cover the entire width of the page to align at the top. The goal is to have: Left Div| Center Div | Right Div with both the left and right divs occupying 25% of the width and the center occupying 50%. I am using float t ...

Implementing Bootstrap 3.1 to prioritize main content at the top on mobile devices

Below is the grid structure that I am working with <div class="row"> <div id="A" class="col-md-3"> <div class="alert alert-info">A</div> </div> <div id="B" class="col-md-6"> <div class=" ...

Generate an array of HTML files from external sources and randomize their placement within multiple div containers

I am currently working on a website that features a grid made up of divs (4x4) which need to have a set of texts shuffled into them every time the page is reloaded. You can see what it looks like here. Within my index.htm file, I have the following struct ...

Header width does not expand to match sibling width when sibling content overflows

When my current code displays a container with a header and content div, the header does not extend to match the sibling width when the sibling overflows. I initially thought using flex-1 would solve this issue, but it didn't work. Is there another so ...

Navigate to the subsequent frame once the HTML5 video finishes playing

I have created a basic HTML webpage with a fullscreen background video (not set to loop) using the Vide plugin. Everything is working well, but I want the video to pause on the last frame to showcase a logo I have included at the end. This functionality w ...

Hide the first child element

JavaScript $('dl #last div #product-tabs-content').not(":first-child").hide(); This testing code works perfectly, however... <dl class="last"><div class="product-collateral row-fluid"> <constructob> <ul class="pro ...

Send the selected option from the dropdown menu to a different page

I am in the process of designing a unique shopping cart system where, upon clicking on the "add to cart" link, both the selected quantity from the drop-down menu and the product ID are transmitted to the addCart page. While I have successfully managed to p ...

`Nav arrow positioning problem in absolute position`

I'm experiencing an issue with the left navigation arrow in a portfolio viewer I'm using. It seems to be moving along with the window size and I can't seem to find a way to keep it contained within my div and stationary. The plugin responsib ...

Seeking assistance to transfer div elements into a different div post an onclick event

I have a container that contains four separate divs. My goal is to append the remaining three divs to another specific div after clicking on one of them. Does anyone know how I can achieve this? <!DOCTYPE html> <html lang="en"> < ...

Is there a way to conceal the Tumblr App buttons on an iPhone?

I attempted to hide the buttons using the CSS code below, but unfortunately, it did not work: .app-cta-button .tx-button.ios { display: none !important; } Despite my efforts, the buttons still appear on the website. The URL of the website in questi ...

Inline display malfunctioning for text-containing divs

When creating a style sheet for mobile devices, I encountered an issue where the text was displayed in two columns instead of one column like on desktop. I'm questioning whether the positioning applied to the divs is causing this problem. Please ref ...

Expanding section beneath a Row in a Table (Semantic UI React)

I'm attempting to implement expandable Table Rows in a Table that can be activated by clicking on them individually. For instance, upon clicking on the designated area in the provided image below, a Segment or Container will reveal itself with embedd ...

Issue with unique scrollbar customization tool

To access the plugin, visit: My webpage is still a work in progress: XXX Both divs move simultaneously when scrolling down! I am unfamiliar with jQuery and java, can someone assist me? ...

What's the deal with this loading GIF layout problem?

Styling with CSS: .smallLoaderBackground { background-image: url('loaderBackground.gif') !important; background-position: center center; background-repeat: no-repeat; position: fixed; left: 50%; top: 50%; height: 50px ...

Manipulate classes based on scrolling (Wordpress)

Trying to manipulate a widget by adding and removing classes based on user scroll behavior has proven to be quite challenging. Specifically, I aim to add one class when the user scrolls down by 50px and remove it when they scroll back up. Website: Check o ...

The footer navigation in CSS shifts position when it is hovered over

My attempt to add a <nav> at the footer was unsuccessful. The navigation bar in this fiddle is completely wrong as the entire nav moves when hovered, even though I did not include any animations. I want the items in the <nav> to stay fixed. ...

Is it possible to update the underline color using CSS in Google Chrome?

I have been attempting to modify the color of the underline during a hover event by using spans. Surprisingly, it seems to be working fine in IE9 and Firefox 13.01, but unfortunately, it doesn't work properly in Chrome (it should be underlined in gold ...

Transform every DIV element into a TABLE, replacing each DIV tag with a combination of TR and TD tags

I have a code that is currently structured using DIV elements. However, I've encountered alignment issues when rendering it in EMAIL clients. To address this problem, I am looking to convert the DIV structure to TABLE format. Below is the original co ...

handling a radius variable across various stylesheets in SASS

Recently, I started using SASS and I am very impressed with this tool. However, before diving in further, I have one question that I can't seem to find the answer to. What is the best approach for managing a variable value across multiple style sheet ...

Issue with empty space at the bottom of the page when the border is set to 0

I have a query regarding an HTML sample I'm working on. The objective is to create a big yellow div that fills the entire page, covering the available area completely. It seems to be functioning well when there isn't much content within the div. ...