NavBar expand icon not showing on mobile |
NavBar expand icon not showing on mobile |
adelin12 |
Feb 24 2021, 11:04 PM
Post
#1
|
Group: Members Posts: 1 Joined: 24-February 21 Member No.: 27,821 |
Hello, I have a problem. When I acces the site from mobile I can't see the expand menu icon. I can press it, and it is like an empty square. Just this. Not an icon or something.
Here is the header: CODE <body><!-- Start header --><!-- Start header --> <header class="top-navbar"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container"><a class="navbar-brand" href="index.html"><img alt="" src="images/logo.png" /> </a><button aria-controls="navbars-rs-food" aria-expanded="true" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbars-rs-food" data-toggle="collapse" type="button"></button> <div class="collapse navbar-collapse" id="navbars-rs-food"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"><a class="nav-link" href="index.html">Acasa</a></li> <li class="nav-item"><a class="nav-link" href="menu.html">Meniu</a></li> <li class="nav-item"><a class="nav-link" href="about.html">Despre noi</a></li> <li class="nav-item"><a class="nav-link" href="reservation.html">Fa o rezervare!</a></li> <li class="nav-item"><a class="nav-link" href="gallery.html">Galerie</a></li> <li class="nav-item"><a class="nav-link" href="contact.html">Contacteaza-ne</a></li> </ul> </div> </div> </nav> </header> and here is the Css config for mobiles: CODE /* only small desktops */ /* tablets */ /* only small tablets */ @media only screen and (min-width: 992px) and (max-width: 1180px) { .footer-area h3{ font-size: 18px; } } @media (min-width: 768px) and (max-width: 991px) { .navbar-light .navbar-brand{ margin-left: 15px; } .navbar-light .navbar-toggler{ margin-right: 15px; border-radius: 0px; } .navbar-expand-lg .navbar-nav .dropdown-menu{ box-shadow: none; } .carousel-control-prev{ left: -60px; } .carousel-control-next{ right: -60px; } .why-text h4{ font-size: 18px; } .why-text p{ margin: 0px; } } /* mobile or only mobile */ @media (max-width: 767px) { .navbar-light .navbar-brand{ margin-left: 15px; } .navbar-light .navbar-toggler{ margin-right: 15px; border-radius: 0px; } .navbar-expand-lg .navbar-nav .dropdown-menu{ box-shadow: none; } .cover-slides h1{ font-size: 22px; } .cover-slides p { font-size: 14px; } .slides-navigation a{ height: 42px; width: 38px; line-height: 33px; } .inner-column{ margin-top: 15px; } .inner-column h1{ font-size: 22px; } .filter-button-group{ margin: 10px 0px; } .contact-imfo-box .col-md-4{ margin-bottom: 15px; } .carousel-control-prev{ left: 0px; } .carousel-control-next{ right: 0px; } .blog-box-inner .blog-detail{ overflow: hidden; } .blog-sidebar{ margin-top: 50px; } } @media only screen and (min-width: 280px) and (max-width: 599px) { .why-text p{ margin-bottom: 0px; margin-top: 0px; } } Thanks! |
Christian J |
Mar 6 2021, 10:50 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
Sorry for late reply. Do you mean this button:
CODE <button aria-controls="navbars-rs-food" aria-expanded="true" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbars-rs-food" data-toggle="collapse" type="button"></button> ? It has no content even in desktop browsers. |
Lo-Fi Version | Time is now: 23rd April 2024 - 05:47 PM |