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:
and here is the Css config for mobiles:
Thanks!
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!
