Photoshop Question posted in
The official user guide can be found here.

Responsive menu hidden by main content – Photoshop

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

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    Try this code, should work for overlapping.

    .nav-list-pagina {
    z-index: 2;
    position: relative;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search