Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ NavBar expand icon not showing on mobile

Posted by: adelin12 Feb 24 2021, 11:04 PM

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

Posted by: Christian J Mar 6 2021, 10:50 AM

Sorry for late reply. Do you mean this button:

CODE

? It has no content even in desktop browsers.