The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> NavBar expand icon not showing on mobile
adelin12
post 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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 6 2021, 10:50 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,653
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 18th April 2024 - 03:50 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC