0

Lo que busco es que el menu, al momento de estar en moviles no scrolléy se mantenga, lo cual lo hace, pero al momento de darle click a los menus laterales, sube el tab-bar, alguien sabe que hacer para que se mantenga siempre arriba?

<head>
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <meta charset="utf-8" />
    <title>Hola</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/foundation.css" />
    <link rel="stylesheet" href="css/styles.css" />
    <link rel="stylesheet" href="css/animate.css" />
    <script src="js/modernizr.js"></script>
    <script src="js/modernizr.custom.js"></script>
    <script type="text/javascript" src="js/login_function.js"></script>
    <script type="text/javascript" src="alerts/lib/alertify.js"></script>
    <script type="text/javascript" src="alerts/lib/alertas.js"></script>
    <link rel="stylesheet" href="alerts/themes/alertify.core.css" />
    <link rel="stylesheet" href="alerts/themes/alertify.default.css" />

<body class="<?php echo $page ?>">

    <div class="off-canvas-wrap" data-offcanvas>
        <div class="inner-wrap">
            <!--
            <!-- Nav bar responsive -->
    <div class="fixed">
            <nav class="tab-bar hidden-for-medium-up">
                <section class="left-small">
                    <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
                </section>

                <section class="middle tab-bar-section">
                    <h1 class="title"><a href="index.php"><img src="img/logo-responsive.png"></a></h1>
                </section>

                <section class="right-small">
                    <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
                </section>
            </nav>
    </div>  
            <!-- Nav bar desktop-->
    <div class="fixed">
        <nav class="top-bar show-for-medium-up" data-topbar role="navigation">
        <ul class="title-area">
            <li class="name">

            </li>
        <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
        </ul>

        <section class="top-bar-section">
        <!-- Right Nav Section -->
        <ul class="left">
            <li style="margin-left:15px;">
                 <a href="index.php">
                    <img src="img/hola.png">
                </a>
            </li>
        </ul>
        <ul class="right">
        <li><a class="sesion" href="login.php">INICIAR SESIÓN</a></li>
        </ul>
        <br>
        <ul class="right nav-menu">
        <li><a href="servicios.php">SERVICIOS</a></li>
        </ul>

        <!-- Left Nav Section 
        <ul class="left">
        <li><a href="#">Left Nav Button</a></li>
        </ul>
        </section>-->
        </nav>
</div>  
        <!-- Offcanvas menu -->

        <aside class="left-off-canvas-menu">
        <ul class="off-canvas-list">
            <li><label>MENÚ</label></li>
            <li><a href="index.php">Inicio</a></li>
            <li><a href="servicios.php">Servicios</a></li>
        </ul>
        </aside>

        <aside class="right-off-canvas-menu">
        <ul class="off-canvas-list">
            <li><label>MENÚ</label></li>
            <li><a href="login.php">Iniciar sesión</a></li>
        </ul>
        </aside>

        <section class="main-section">    

        <a class="exit-off-canvas"></a>         
1

1 respuesta 1

0

me parece que esto se matine con una propiedad en css que se llama Position :fixed.

Aquí tienes una gran explicación.

https://www.w3schools.com/howto/howto_css_fixed_menu.asp

1
  • Cuando se coloca un enlace a material externo debe incluir las partes relevantes en la respuesta, dado el caso de que el enlace deje de funcionar.
    – Rubén
    Commented el 12 jul. 2017 a las 1:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.