如何修复导航菜单

Question

how to fix my menu, when web stable menu just on mobile, but menu not show or hidden

<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 -->

help me to solved this css? I'm so tired to solved this menu. Please anybody help me try and guides me

Answer 1

I dont know if u open to different suggestions, my menus are always like this, desktop wide menu class desktopmenu only display block if media screen width larger than 1024 if less display none. Then have a 2nd menu mobilemenu class for mobile with dropdown and burger icon toggle which triggers display block under 1024 and hides above 1024 media screen width. Hope it helps. I wouldve went into your code, but im at work on mobile. Cant code atm. Tomorrow il look at it if you still want to keep that format. Hope my suggestion helps you till then in case u want to change ur approach. If u dont want to menus u can always use grid css or flex. Just grid i think needs some -ms- prefix double code foe ie9 and safari. From the image it seems u are missing mobile @media only screen only max width 768px css format. Ur like half way there tough.