I'm currently in the process of constructing a website for a restaurant. One particularly strange issue I've encountered is that the navigation bar covers the entire page, but only on specific pages like the cart, login, and register pages. Strangely enough, it functions normally on the home page or menu page. The problem arose when I was working on the home page. Subsequently, when I attempted to navigate to the login page, the navigation bar expanded to cover the entire page. What's even more peculiar is that this behavior is limited to certain pages. I included a commented tag in the home HTML code to indicate what changes I made before the problem manifested.
Image: https://i.sstatic.net/iCZHE.png
Snippet from Home Page HTML:
<head>
<link rel="stylesheet" href="./assets/css/home-style.css"/>
</head>
<div class="container min-h main-container">
...
**<!--This is what i added before the problem-->
...
</div>
<!--Until here-->**
CSS for home page:
...
Header:
<?php $categories = $this->products_model->get_all_categories();?>
...
CSS for Header:
.bg-dark{
background-color: #000!important;
}
...
.done styling with CC everything ok now! thanks.
.container{
width: 100%;
height: 100%;
min-height: 100vh;
margin-top: 150px;
display: flex;
}
...Maybe you should try rearranging your stylesheets or checking if there are any conflicting classes causing the navigation bar issue across different pages. Good luck!
One page that have the problem:
HTML:
<head>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>/assets/css/lr-style.css"/>
</head>
...
CSS:
.container{
width: 100%;
height: 100%;
min-height: 100vh;
margin-top: 150px;
display: flex;
}
...
Having isolated the issue, it seems like there might be some conflicting CSS rules affecting the navigation bar behavior. Double-checking your stylesheets and making sure there are no overlapping classes could help resolve the problem. Best of luck troubleshooting!