如何修复导航菜单

Question

如何修复我的菜单，当网页稳定的菜单只在手机上，但菜单不显示或隐藏

​

​

<div class="container">
            <a class="logo" href="<?php echo site_url();?>"><img src="<?php echo base_url().'theme/images/'.$data['site_logo_header'];?>" alt="<?php echo $data['site_name'];?>"></a>

            <a class="right-area src-btn" href="#" >
                <i class="active src-icn ion-search"></i>
                <i class="close-icn ion-close"></i>
            </a>
            <div class="src-form">
                <form method="get" action="<?php echo site_url('search');?>">
                    <input type="text" name="search_query" placeholder="Search here" required>
                    <button type="submit"><i class="ion-search"></i></a></button>
                </form>
            </div><!-- src-form -->

            <a class="menu-nav-icon" data-menu="#main-menu" href="#"><i class="ion-navicon"></i></a>

            <div class="nav-wrapper large-nav">
            <ul class="main-menu" id="main-menu">
                <li><a href="<?php echo site_url();?>">HOME</a></li>
                <li>
                <a href="<?php echo base_url();?>profile" class="menu-down">
                  PROFILE
                </a>

                    <div class="menu-down">
                      <a class="dropdown-item" href="#">SEJARAH</a>
                      <a class="dropdown-item" href="#">LAMBANG</a>
                      <a class="dropdown-item" href="#">DANSAT</a>
                      <a class="dropdown-item" href="#">PEJABAT TERAS</a>
                      <a class="dropdown-item" href="#">RIWAYAT PENUGASAN</a>
                      <a class="dropdown-item" href="#">TUGAS POKOK</a>
                    </div>
                </li>
                <!--<?php 
                    $query=$this->db->get('tbl_category', 3);
                    foreach ($query->result() as $row):
                ?>
                <li><a href="<?php echo site_url('category/'.$row->category_slug);?>"><?php echo strtoupper($row->category_name);?></a></li>
                <?php endforeach;?>-->
                <li><a href="<?php echo site_url('blog');?>">BLOG</a></li>
                <li><a href="<?php echo site_url('contact');?>">CONTACT</a></li>
            </ul>
            </div>
            <div class="clearfix"></div>
        </div><!-- container -->

能帮我解决这个css吗？我太累了，解不了这个菜单。请任何人帮助我尝试并引导我

Answer 1

我不知道你是否打开了不同的建议，我的菜单总是这样，桌面宽菜单类桌面菜单只显示块，如果媒体屏幕宽度大于1024，如果小于显示无。然后有一个手机的第二个菜单mobilemenu类，带有下拉菜单和汉堡图标切换，在1024以下触发显示块，在1024以上的媒体屏幕宽度上隐藏。希望能有所帮助。我本想研究你的代码，但我在手机上工作。无法对自动柜员机进行编码。如果你还想保留这种格式，明天我会看看它。希望我的建议对你有所帮助，以防你想改变你的方法。如果你不想要菜单，你可以随时使用网格css或flex。只是网格，我认为需要一些-ms-前缀，ie9和safari的双重代码。从图片上看，你似乎缺少了移动@媒体，只有屏幕，最大宽度768px的css格式。你就像是走了一半的路。