У меня проблема с кнопкой переключения в меню, когда ее максимальная ширина = 1200 пикселей ,. т.е. когда я переключаюсь на кнопку переключения, ничего не появляется - PullRequest
Новая
       2

У меня проблема с кнопкой переключения в меню, когда ее максимальная ширина = 1200 пикселей ,. т.е. когда я переключаюсь на кнопку переключения, ничего не появляется

0 голосов
/ 03 мая 2020

У меня проблема с кнопкой-переключателем в меню, когда ее максимальная ширина = 1200 пикселей ,. т.е. когда я переключаюсь на кнопку переключения, ничего не появляется. Хотя я сделал меню для max-width = 1200px, но все равно оно не появляется. Пожалуйста, помогите

Я добавил bootstrap 4.3 в скрипт html. Пожалуйста, если кто-нибудь может взглянуть на это и помочь мне. Поскольку у меня есть проблема с этим, и я хочу, чтобы это было сделано через css, так как я не очень хорошо оборудован javascript. 

ol, ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a{
  text-decoration: none;
}

a:hover{
  text-decoration: none;
}

/*********************************
*** Marque
*********************************/
.marquee {
  background: #2a4563;
  box-shadow: 0 0 5px 0;
  padding: 1px;
  /*border: 1px;
    border-left: 10px;
    border-style: solid;
    border-color: #FF5733 ;*/
}

.marquee a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  line-height: 1.5;
}

/*********************************
*** Logo Bar
*********************************/
#logo-bar {
  background: #fff;
  padding-top: 3px;
}

#logo-bar .logo {
  display: flex;
  align-items: center;
}

#logo-bar .logo img{
  max-width: 280px;
}

#logo-bar .logo-2 img{
  max-width: 200px;
  margin-left: 70px;
}


#menu {
  background: #2a4563;
  box-shadow: 0 0 3px 0;
}

#menu ul {
  text-align: center;
  margin-bottom: 0;
}

#menu ul li {
  display: inline-block;
  padding: 8px 20px;
}

#menu ul li:hover {
  background-color: orange;
  transition: ease-in .3s;
}

#menu ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
}

#menu ul li:hover a {
  color: black;
  transition: ease-in .3s;
}

#menu ul li ul {
  display: none;
  position: absolute;
  padding: 10px;
  background: orange;
}

#menu ul li:hover ul {
  display: block;
  z-index: 1;
  padding: 10px;
}

#menu ul li ul li {
  display: block;
}

#menu ul li ul li:hover {
  background: #2a4563;
  transition: ease-in .3s;
}

#menu ul li ul li:hover a {
  color: #fff;
  transition: ease-in .3s;
}

label{
 
    font-size: 26px;
    line-height: 70px;
    display: none;
}

#toggle{
    display: none;
}

.mobile-menu{
    display: none;
}





/*********************************
*** Title
*********************************/
#title{
  min-height: 550px;
  background: grey;
  
}


@media only screen and (max-width: 1200px){
    .logo-bar{
        display: none;
        
    }
    
    .mobile-menu{
        display: block;
        box-shadow: 0 0 5px 0;
    }
    
    .mobile-menu-1{
        padding: 0 0 0 50px;
    }
    
    label{
        display: block;
        pointer: cursor;
    }
    
    #menu ul li{
        display: none;
        width: 100%;
        text-align: center;
    }
    
    #menu ul li a{
        display: block;
        border-bottom: 1px solid #EAEAEB;
        margin: 0;
    }
    
    #toggle:checked + #menu ul{
        display: block;
    }
}
<html>
<head>
<!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  
</head>
<body>
<!-- Marquee Starts -->
<div class="marquee">
    <marquee behavior="scroll" scrollamount="4" direction="left" class="marqueeStyle" onmouseover="this.stop();" onmouseout="this.start();">
        <a href="https://www.theglobaluniversity.co.in" target="_blank"><i class="fas fa-newspaper"></i> University will remain closed upto 30th May 2020 to avoid gathering &amp; prevention of spreading Novel Corona Virus </a>
    </marquee>
</div>
<!-- Marquee Ends-->
<!-- Logo Bar Starts -->
<header class="header">
    <div id="logo-bar">
        <div class="container">
            <div class="logo-bar">
                <div class="row">
                    <div class="logo col-lg-6 col-md-6">
                        <h1>Navbar</h1>
                    </div>
                    <div class="logo-2 col-lg-3 col-md-3">
                        <h1>Second Navbar</h1>
                    </div>
                    <label for="toggle">&#9776;</label>
                    <input type="checkbox" id="toggle" />
                    <div class="menu-sidebar col-lg-3 col-md-3">
                        <button class="btn btn-sm btn-primary">Student Login</button>&nbsp;<button class="btn btn-sm btn-primary">Admin Login</button>
                        <h6><strong>Call Us:</strong> +91-360-2277560</h6>
                        <h6><Strong>Email Us:</Strong></h6>
                        <h6>info@theglobaluniversity.co.in</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mobile-menu">
        <div class="row">
            <div class="mobile-menu-1 col-10 d-flex my-auto">
                <h1>Navbar</h1>
            </div>
            <div class="mobile-menu-2 col-2 d-flex my-auto">
                <label for="toggle">&#9776;</label>
                <input type="checkbox" id="toggle" />
            </div>
        </div>
    </div>
    <!-- Logo Bar Ends -->
    <!-- Menu Bar Starts -->
    <div id="menu">
        <div class="container">
            <ul>
                <li><a href="index.html"><i class="fas fa-home"></i> </a></li>
                <li class="nav-item"><a href="#!">About Us</a>
                    <ul>
                        <li class="nav-sub-item"><a href="about.html">About TGU</a></li>
                        <li class="nav-sub-item"><a href="vision.html">TGU Vision</a></li>
                        <li class="nav-sub-item"><a href="mission.html">TGU Mission</a></li>
                        <li class="nav-sub-item"><a href="board.html">Board of Mgt.</a></li>
                        <li class="nav-sub-item"><a href="affiliation.html">Approval & Affiliation</a></li>
                    </ul>
                </li>
                <li class="nav-item"><a href="">Academic</a>
                    <ul>
                        <li class="nav-sub-item"><a href="course.html">Courses</a></li>
                        <li class="nav-sub-item"><a href="department.html">Department</a></li>
                        <li class="nav-sub-item"><a href="syllabus.html">Syllabus</a></li>
                    </ul>
                </li>
                <li class="nav-item"><a href="#!">Admission</a>
                    <ul>
                        <li class="nav-sub-item"><a href="#!">Procedure</a></li>
                        <li class="nav-sub-item"><a href="#!">Apply Online</a></li>
                        <li class="nav-sub-item"><a href="#!">Scholarship</a></li>
                        <li class="nav-sub-item"><a href="#!">Download Form</a></li>
                        <li class="nav-sub-item"><a href="#!">Merit</a></li>
                    </ul>
                </li>
                <li class="exam.html"><a href="#!">Examination</a>
                    <ul>
                        <li class="nav-sub-item"><a href="#!">Exam Form</a></li>
                        <li class="nav-sub-item"><a href="#!">Exam Notice</a></li>
                        <li class="nav-sub-item"><a href="#!">Admit Card</a></li>
                        <li class="nav-sub-item"><a href="#!">Verification</a></li>
                    </ul>
                </li>
                <li class="research.html"><a href="#!">Research</a></li>
                <li class="facilities.html"><a href="#!">Facilities</a>
                    <ul>
                        <li class="nav-sub-item"><a href="#!">Library</a></li>
                        <li class="nav-sub-item"><a href="#!">WiFi Campus</a></li>
                        <li class="nav-sub-item"><a href="#!">Hostel & Cafe</a></li>
                        <li class="nav-sub-item"><a href="#!">Digitalization</a></li>
                        <li class="nav-sub-item"><a href="#!">First Aid</a></li>
                        <li class="nav-sub-item"><a href="#!">Sports</a></li>
                    </ul>
                </li>
                <li><a href="contact.html">Contact</a></li>
                <li>
                    <div class="search_button"><i class="fa fa-search" aria-hidden="true"></i></div>
                </li>
            </ul>
        </div>
    </div>
</header>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...