I have a customized navbar(bootstrap) on my webpage.
<nav class='navbar fixed-top navCustom '>
<div class='navComp'>
<input class='dateStyle' id='dateChart' type='date' value='" . $now . "'/>
<button id='refreshBtn' class='refreshStyle' type='button' name='refresh'>Refresh</button>
<form style='display:inline' method='post' action=''>
<button id='logout' class='logoutStyle' type='submit' name='logout'>Log Out</button>
</form>
</div>
</nav>
Below is the CSS for navCustom and navComp:
@media (min-width:600px) {
.navCustom{
justify-content: center !important;
}
}
.navCustom{
margin-top: -1px;
height: 33px;
white-space: nowrap;
}
.navComp{
position: absolute;
text-align: center;
border-style: solid;
border-color: #dadada;
border-width: 1px;
border-radius: 3px;
background-color: #fafafa;
padding-left:5px;
padding-right:5px;
box-shadow:0 0px 2px rgba(0, 0, 0, 0.1);
}
The issue I'm facing occurs when the browser window is narrow.
The navbar overflows beyond the right edge of the browser, but the scrollbar does not appear.
The scrollbar only shows up when the divs containing the text Test go beyond the right side.