After creating a Navigation bar using HTML and PHP, I encountered an issue. The Navigation bar appears on desktops and laptops but is not visible on mobile screens.
Here is an example of my code:
<header class="page__header media__img ratio--small">
<?php include "navigation.php"; ?>
<div class="nav--sub visible-sm">
<input type="hidden" name="product_category_id" id="product_category_id" value="<?php echo $_GET["id"]; ?>">
<ul>
<?php
$selectcategory = mysqli_query($conn, "select * from product_category where is_active='1' and is_delete='0'");
while ($rowcategory = mysqli_fetch_array($selectcategory)) {
?>
<li class="<?php if ($_GET['id'] == $rowcategory['product_category_id']) {
echo 'selected';
} ?>">
<a href="product_list.php?id=<?php echo $rowcategory['product_category_id']; ?>"><?php echo $rowcategory['product_category_name']; ?></a>
</li>
<?php
}
?>
</ul>
</div>
</header>
The code works perfectly on larger screens but has issues on Mobile devices. Can anyone suggest a Bootstrap solution to make it visible on mobile devices?
Laptop View
https://i.sstatic.net/JuXpd.png
Mobile View