Soporte » Diseño – Temas y plantillas » Problemas con Slider tapa el menú cuando se ve en móviles (smartphones)

  • sebastianmrs

    (@sebastianmrs)


    Hola tengo 2 problemas:

    1. Cuando navego mi Web en un celular/móvil/smartphone se ve mal porque el SLIDER tapa al MENÚ ocupando todo el cuadro.

    2. El MENÚ DESPLEGABLE no se puede navegar porque aparece debajo del SLIDER.

    *Ya cambié valores en CSS de la z-index del MENÚ a 999

    ——————————————-
    Aquí el código del SLIDER CSS:

    /* Revolution Slider
    ———————————————————————-*/
    .sliderr {
    width: 100%;
    position: relative;
    }
    /* Nivo Slider
    ———————————————————————-*/
    .nivoSlider {
    position:relative;
    width:100%;
    height:auto;
    overflow: hidden;
    box-shadow: none !important
    }
    .nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    max-width: none;
    }
    .nivo-main-image {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    }

    /* If an image is wrapped in a link */
    .nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:6;
    display:none;
    background:white;
    -ms-filter: «progid:DXImageTransform.Microsoft.Alpha(Opacity=0)»;
    opacity:0;
    }
    /* The slices and boxes in the Slider */
    .nivo-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
    top:0;
    }
    .nivo-box {
    display:block;
    position:absolute;
    z-index:5;
    overflow:hidden;
    }
    .nivo-box img { display:block; }

    /* Caption styles */
    .nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    width:100%;
    z-index:8;
    padding: 10px 20px;
    -ms-filter: «progid:DXImageTransform.Microsoft.Alpha(Opacity=80)»;
    opacity: 0.8;
    overflow: hidden;
    display: none;
    -moz-opacity: 0.8;
    filter:alpha(opacity=0.8);
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    }
    .nivo-caption p {
    padding:5px;
    margin:0;
    }
    .nivo-caption a {
    display:inline !important;
    }
    .nivo-html-caption {
    display:none;
    }
    /* Direction nav styles (e.g. Next & Prev) */
    .nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:9;
    cursor:pointer;
    }
    .nivo-prevNav {
    left:0px;
    }
    .nivo-nextNav {
    right:0px;
    }
    /* Control nav styles (e.g. 1,2,3…) */
    .nivo-controlNav {
    text-align:center;
    padding: 15px 0;
    }
    .nivo-controlNav a {
    cursor:pointer;
    }
    .nivo-controlNav a.active {
    font-weight:bold;
    }

    .flex-direction-nav a:hover {background-color: transparent !important;}

    /* Flex Slider
    ———————————————————————-*/
    .wpb_gallery_slides.flexslider {
    border: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    -webkit-border-radius: none !important;
    -moz-border-radius: none !important;
    border-radius: none !important;
    }
    .wpb_gallery_slides .flex-control-nav li {
    padding: 0 !important;
    }

    .flex-container a:active,
    .flexslider a:active,
    .flex-container a:focus,
    .flexslider a:focus {outline: none;}
    .slides,
    .flex-control-nav,
    .flex-direction-nav {margin: 0; padding: 0; list-style: none;}

    /* FlexSlider Necessary Styles */
    .flexslider {margin: 0; padding: 0;}
    .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
    .flexslider .slides img {display: block; width: 100%}
    .flex-pauseplay span {text-transform: capitalize;}

    /* Clearfix for the .slides element */
    .slides:after {content: «.»; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
    html[xmlns] .slides {display: block;}
    * html .slides {height: 1%;}

    /* If you are not using another script, such as Modernizr, make sure you
    * include js that eliminates this class on page load */
    .no-js .slides > li:first-child {display: block;}

    —————————————–
    *No sé si copié demás.

    Este es el del MENÚ CSS

    /* Superfish
    ———————————————————————-*/
    .sf-menu, .sf-menu * {
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 999;
    }
    .sf-menu {
    line-height: 1.0;
    float: right;
    padding: 0;
    position: relative;
    margin: 38px 0;
    }
    .sf-menu ul {
    position: absolute;
    top: -999em;
    width: 200px;
    }
    .sf-menu ul li {
    width: 100%;
    margin: 0;
    padding: 10px 0;
    }
    .sf-menu li li.current a {
    background: none !important
    }
    .sf-menu li:hover { visibility: inherit }
    .sf-menu li {
    float: left;
    position: relative;
    margin: 0 0 0 14px;
    padding: 0
    }
    .sf-menu li li {
    border-top-width: 1px;
    border-top-style: solid;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    margin:0;
    padding: 0;
    -moz-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease
    }
    .sf-menu li li:first-child {border-top: 0}
    .sf-menu li li:last-child {border-bottom: 1px solid transparent}
    .sf-menu li li li:first-child {border-top: 1px solid transparent}
    .sf-menu li li a {
    padding: 8px 15px;
    line-height: 20px;
    color: #fff;
    text-transform: none;
    letter-spacing: 0;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    }
    .sf-menu i {
    margin-right: 8px
    }
    .sf-menu a {
    display: block;
    position: relative;
    color: #000;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 400;
    padding: 10px 16px;
    margin: 0;
    border-radius: 6px;
    border: 1px solid transparent;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    }
    .sf-menu li li a {
    margin: 0;
    border:0
    }
    .sf-menu > li:hover > a, .sf-menu > li > a:hover {
    color: #fff !important;
    border-width: 1px;
    border-style: solid;
    }
    #menu > li > a:hover, #menu > li > a:active, .sf-menu > li.current_page_item > a, .sf-menu > li.current_page_item > a:visited,
    .sf-menu > li.current-menu-parent > a {
    color: #fff !important;
    }
    .sfHover:hover > a {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    }
    .sf-menu li .current-menu-parent > a {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    border: none;
    }
    .sf-menu > li.current-menu-parent > a {
    color: #fff;
    border-width: 1px;
    border-style: solid;
    }

    .sf-menu li li:hover > a, .sf-menu li li > a:hover, .sf-menu li li.current > a {
    color: #fff;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    }
    .sf-menu li li a {
    font-size: 12px;
    font-weight: normal;
    margin-bottom: 0;
    }
    .sf-menu li li:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 6px;
    }
    .sf-menu li li:last-child {
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    }
    .sfHover:hover {
    border-bottom-right-radius: 0 !important
    }
    .sfHover > .sf-with-ul {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    }
    .sf-menu li:hover ul,
    .sf-menu li.sfHover ul {
    left: 0px;
    z-index: 999;
    top: 34px;
    padding: 0;
    }
    .sf-menu li:hover ul li ul,
    .sf-menu li.sfHover ul li ul,
    .sf-menu li:hover ul li ul li ul,
    .sf-menu li.sfHover ul li ul li ul {
    left: 200px;
    z-index: 999;
    top: -1px !important
    }
    ul.sf-menu li:hover li ul,
    ul.sf-menu li.sfHover li ul {
    top: -999em;
    }
    ul.sf-menu li li:hover ul,
    ul.sf-menu li li.sfHover ul {
    left: 200px;
    top: -1px !important;
    padding: 0;
    }
    ul.sf-menu li li:hover li ul,
    ul.sf-menu li li.sfHover li ul {
    top: -999em;
    }
    ul.sf-menu li li li:hover ul,
    ul.sf-menu li li li.sfHover ul {
    left: 200px;
    top: 0;
    }
    .sf-menu li:hover, .sf-menu li.sfHover,
    .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
    outline: 0;
    }

    /*** arrows **/
    .sf-menu a.sf-with-ul {padding-right: 30px;min-width: 1px}
    .sf-sub-indicator {
    position: absolute;
    display: block;
    overflow: hidden;
    }
    a > .sf-sub-indicator {
    position: absolute;
    right: 8%;
    top: 12px;
    font-size: 8px;
    }
    li li a .sf-sub-indicator {
    top: 10px;
    right: 1%;

    ———————————————

    Todo en un mismo fichero Style.css

    Espero alguien me pueda ayudar. Muchas gracias

  • El debate ‘Problemas con Slider tapa el menú cuando se ve en móviles (smartphones)’ está cerrado a nuevas respuestas.