CODEWITHSUNDEEP
css
Giuseppe Lodi Rizzini
Giuseppe Lodi Rizzini

Reputation: 1055

Responsive menu hidden by main content

I've integrated this simple horizontal menu in all my pages of my web app.

https://jsfiddle.net/3u6m4b1w/

When the page is opened on full screen, all is ok (see pic):

enter image description here

But when I switch to responsive (see pic 2) I get this strange problem:

The alert box in yellow become bigger in tall, and the menu is hidden behind the main content!

I've already tried with z-index like:

.nav-list-pagina { z-index:9999; }

but nothing appened.

enter image description here

What I like to obtain is this (photoshop edited):

enter image description here

Anyone can help me find the correct CSS?

UPDATED FIDDLE WITH LAST JQUERY

Upvotes: 0

Views: 45

Answers (2)

MilosMarkoni
MilosMarkoni

Reputation: 96

Try this code, should work for overlapping.

.nav-list-pagina {
    z-index: 2;
    position: relative;
}

Upvotes: 1

wlarcheveque
wlarcheveque

Reputation: 972

I suppose you can add clear: both; CSS property to the .alert class :

.alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    clear: both;
}

enter image description here

Upvotes: 1

Related Questions