Can't get navbar to show on mobile devices

ianc01 · Jan 29, 2025

Hi Everyone,

I am having a bit of a problem. I am doing a website for some friends and have bitten of more than I can chew. They opened a restaurant and are wanting a website that shows their menu, can take reservations and online orders.

I have the website up and running with some of the features mentioned above. However, the problem I am wanting to try to solve is that my navbar is not showing up on my mobile devices (phone and pad) but it shows up on my browser (Firefox) on my pc. I am unsure what I am doing wrong.

Here is my css code:

CSS:

/*** START NAVBAR STYLE ***/

.navbar
{
    border: medium none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
     margin: auto;
    position: relative;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width; 80%;
}

.header-section
{
    transition: all .3s ease-in-out;
}

.header-section
{
    background-color:#222227;
    width:100%;
    height:120px;
    z-index:999;
    position:fixed;
    left:0;
    top:0;
    padding:0;
    display:flex;
    align-items:center
}

.menu-wrap
{
    position: relative;
}

ul.nav>li
{
    position: relative;
}
ul.nav>li>a
{
    color: #ddd;
    font-family: work sans,sans-serif;
    display: inline-block;
    vertical-align: middle;
    padding: 0 20px;
    letter-spacing: 0;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 80px;
    z-index: 1;
    transition: 0.5s;

}

.header-btn .menu-btn
{
    background-color: #ffc851;
    font-family: work sans,sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    color: #fff;
    padding: 0 30px;
    height: 45px;
    line-height: 45px;
    display: block;
    margin: 0;
}

.header-btn .menu-btn:hover
{
    opacity: .8;
}

ul.nav>li>a:hover
{
    color: #ffc851;
}

/*** END NAVBAR STYLE ***/

For my header file, I have:

HTML:

<!DOCTYPE html>
<html lang="en">
        
        <!-- HEAD -->

        <head>
                <meta charset="utf-8">
                <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
                <meta name="author" content="JAIRI IDRISS">
                <title><?php getTitle(); ?></title>

                <!-- EXTERNAL CSS LINKS -->

                <link rel="stylesheet" type="text/css" href="Design/css/bootstrap.min.css">
                <link rel="stylesheet" type="text/css" href="Design/fonts/css/all.min.css">
                <link rel="stylesheet" type="text/css" href="Design/css/main.css">
                <link rel="stylesheet" type="text/css" href="Design/css/responsive.css">

                <!-- GOOGLE FONTS -->

                <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Prata&display=swap" rel="stylesheet">

        </head>

        <!-- BODY -->

        <body>

And for my navbar file I have:

HTML:

    <!-- START NAVBAR SECTION -->

    <header id="header" class="header-section">
        <div class="container">
            <nav class="navbar">
                <a href="index.php" class="navbar-brand">
                    <img src="Design/images/IMG_54821.jpg" alt="Restaurant Logo" style="width: 100px;">
                </a>
                <div class="d-flex menu-wrap align-items-center">
                    <div class="mainmenu" id="mainmenu">
                        <ul class="nav">
                            <li><a href="index.php#home">HOME</a></li>
                            <li><a href="lunch_menu.php">LUNCH</a></li>
                            <li><a href="dinner_menu.php">DINNER MENU</a><li>
                    <!--        <li><a href="index.php#gallery">GALLERY</a></li> -->
                    <!--        <li><a href="index.php#about">ABOUT</a></li> -->
                            <li><a href="index.php#contact">CONTACT</a></li>
                        </ul>
                    </div>
              <!--      <div class="header-btn" style="margin-left:10px">
                        <a href="table-reservation.php" target="_blank" class="menu-btn">Reserve Table</a>
                    </div> -->
                </div>
            </nav>
        </div>
    </header>

        <div class="header-height" style="height: 120px;"></div>

    <!-- END NAVBAR SECTION -->
~

If someone can please help me out, that woyld be great. They have already opened and I need to get this finished. These little problems are eating up so much time.

Thanks in advance

Search

Search

Can't get navbar to show on mobile devices

ianc01

New member

Similar threads