I'm encountering an issue with my navigation bar. I need it to maintain its size when the page is minimized, but currently, the navbar elements stack on top of each other as I reduce the browser window width.
Before reducing browser window width: https://i.sstatic.net/jF5th.png
After reducing browser window width: https://i.sstatic.net/Ynk0j.png
The code for the navbar:
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-static-top" style="">
<div class="container">
</ul>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Business<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><%= link_to "Culture", "/boards/4" %></li>
<li><%= link_to "Invest", "/boards/5" %></li>
<li><%= link_to "Advice", "/boards/6" %></li>
</ul>
</li>
</ul>
<script>
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
<div class="navbar-header" style="">
<%= link_to "EssayFriends", root_path, class: "navbar-brand" %>
</div>
<div style="width:360px;max-width:360px;margin-left:200px;top: 50%;transform: translateY(12%);">
<%= render 'users/school_search' %>
</div>
</div>
</nav>.textbox-search {
height:40px;
width: 20rem;
font-size: 18px;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.container {
width: 95%;
}
.navbar {
margin-bottom: 0px;
}
.alert {
margin-bottom: 0px;
}
.navbar-default {
background-color: #45d1b8;
border-color: #45d1b8;
}
.navbar-default .navbar-brand {
color: #FFF;
font-size: 2em;
font-weight: 400;
}
.navbar-default .navbar-links {
color: #FFF;
font-weight: 400;
font-family: Helvetica;
}
.navbar-default .navbar-nav > li > a {
color: #FFF;
}Could someone assist me in identifying why my nav bar behaves this way and provide a solution? I'd like the navbar to shrink and only appear upon scrolling over it similarly to the Stack Overflow navbar. Thank you!