Partage
  • Partager sur Facebook
  • Partager sur Twitter

[CSS] Liste menu n'apparait pas version mobile

    16 octobre 2020 à 17:44:37

    Bonjour a tous, j'ai des soucis avec le menu de la version mobile. Les éléments (liste) apparaissent sur la version ordinateur mais non sur la version mobile.

    Merci pour votre aide

    CODE HTML

    <!-- ##### Header Area Start ##### -->
        <header class="header-area">
        <!-- Top Header Area -->
     
        <!-- Navbar Area -->
        <div class="credit-main-menu" id="sticker">
        <div class="classy-nav-container breakpoint-off">
        <div class="container">
        <!-- Menu -->
        <nav class="classy-navbar justify-content-between" id="creditNav">
     
        <!-- Navbar Toggler -->
        <div class="classy-navbar-toggler">
        <span class="navbarToggler"></span>
        </div>
     
        <!-- Menu -->
        <div class="classy-menu">
     
        <!-- Close Button -->
        <div class="classycloseIcon">
        <div class="cross-wrap"><span class="top"></span><span class="bottom"></span></div>
        </div>
        <!-- Nav Start -->
        <div class="classynav">
     
        <!-- Logo Area -->
        <div class="logo">
        <a href="index.html"><img src="img/core-img/logo.png" alt="" width="80px" height="63px">&nbsp;&nbsp;&nbsp;&nbsp; BRAND TITLE</a>
        </div>
        <ul>
        <li><a href="index.html">HOME</a></li>
        <li><a href="how-it-works.html">HOW IT WORKS</a></li>
        <li><a href="faq.html">FAQ</a></li>
        <li><a href="contact.php">CONTACT US</a></li>
        </ul>
       </div>
      <!-- Nav End -->
      </nav>
      </div>
      </div>
      </div>
      </header>
      <!-- ##### Header Area End ##### -->

    CODE CSS

    .classynav .logo {
    background-color: #ffffff;
    padding-right:20px; 
    padding-top: 13px;
    padding-bottom: 9.5px;
    position: fixed;
    top: 0;
    left: 0;
    width: 30%;
    clip-path: polygon(100% 0, 100% 0, 86% 100%, 0 100%, 0 0);
    }
     
    .classynav .logo a {
    color: #b00b1b;
    font-size: 18px;
    font-weight: 800;
    }
     
     
    /* Mobile/Tablet Nav CSS */
    .breakpoint-on .classycloseIcon {
      display: block; }
    .breakpoint-on .classy-navbar-toggler {
      display: block; }
    .breakpoint-on .classy-navbar .classy-menu {
      background-color: #ffffff;
      position: fixed;
      top: 88px;
      left: -310px;
      z-index: 1000;
      width: 200px;
      height: 50%;
      -webkit-transition-duration: 500ms;
      transition-duration: 500ms;
      padding: 0;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
      display: block;
       overflow-x: hidden;
      overflow-y: scroll;
       }




    • Partager sur Facebook
    • Partager sur Twitter
      16 octobre 2020 à 19:37:15

      Salut, il manque des virgules  dans ta selection de class:

      /* Mobile/Tablet Nav CSS */
      .breakpoint-on .classycloseIcon {
        display: block; }
      .breakpoint-on .classy-navbar-toggler {
        display: block; }
      .breakpoint-on .classy-navbar .classy-menu {
       
         }
      /* Mobile/Tablet Nav CSS */
      .breakpoint-on,
      .classycloseIcon {
        display: block; }
      
      .breakpoint-on,
      .classy-navbar-toggler {
        display: block; }
      
      .breakpoint-on,
      .classy-navbar .classy-menu {
       
         }



      • Partager sur Facebook
      • Partager sur Twitter

      La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]

        16 octobre 2020 à 21:22:22

        Salut NadfriJS, j'ai ajouté avec les virgules mais dans ce cas le menu complet disparaît.
        • Partager sur Facebook
        • Partager sur Twitter
          17 octobre 2020 à 13:22:04

          Tu as utilisé quel framework CSS? car je ne vois pas comment peut s'activer tes breakpoint sans spécifier les media queries?
          • Partager sur Facebook
          • Partager sur Twitter

          La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]

            19 octobre 2020 à 9:23:25

            Salutations,

            Fais un petit codepen si tu peux avec ton code ce sera plus simple pour que l'on t'aide je pense. J'ai essayé d'en faire un en copiant/collant ton code mais la liste ne s'affichait même pas.

            Bonne journée

            https://codepen.io/pen/

            • Partager sur Facebook
            • Partager sur Twitter

            Développeur react freelance à Toulouse  

            Je suis développeur  react freelance spécialisé dans la création de site internet basé à Toulouse

            [CSS] Liste menu n'apparait pas version mobile

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
            • Editeur
            • Markdown