Currently exploring web development for a new restaurant site, I've encountered an issue with the display on smaller screens. The page doesn't show full width and the navbar disappears entirely. How can I adjust the layout to ensure it looks good on smaller screens? Ideally, I'd like the navbar to either become a togglebar or appear under the logo. I suspect my CSS settings are causing this. Any guidance would be appreciated.
While attempting to optimize with CSS, I managed to get the page to display properly on iPad Air and larger screens, but smaller screens remain a challenge.
If necessary, I'm happy to provide my code:
HTML
<body>
<p class="catering">*Catering services available for hire</p>
<header>
<img class="shop-logo w-55" src="/FBS LOGO.png">
<nav class="navbar navbar-default">
<div class="hover-underline-animation"> <a href="#menu">Menu</a> </div>
<div class="hover-underline-animation"><a href="#order">Order</a></div>
<div class="hover-underline-animation"><a href="#location">Location</a> </div>
<div class="hover-underline-animation"><a href="#contact">Contact</a></div>
</nav>
</header>
<section class="about" id="about">
<div class="row">
<div class="image">
<img src="FBS_ISLAND GIRL_.png" alt="">
</div>
<div class="content">
<h3>
<span class="line-1">Authentic </span>
<span class="line-2"><br> Caribbean </span>
<span class="line-3"><br> Cuisine</span>
<span class="line-4"><br> jus lik momma use tah mek it </span>
</h3>
</div>
</div>
<p class="share"> Like, Follow `n Share <br> <a href="https://www.instagram.com/food_by_sophie/" target="_blank"> <i class="fa-brands fa-instagram"> </i> FOOD_BY_SOPHIE </i> </a> </p>
</section>
<section class="order" id="order"gt;
<h3 class="sub-heading"pp> Order Now </h3>
<h1 class="heading"Primitive Types> Collection Only </h1>';
.
. [Other HTML content]
.
<styleocked">--- Insert CSS Code Here ---</style>
CSS
[CSS Code Goes Here]