We Keep Coding

make a navbar with a dropdown that instead of showing the link vertical, show them horizontal

Hi everyone i'm trying to replicate this style of navbar https://unionbindingcompany.com/ to practice my skills in css, i tried adding some bootstrap but i ended up in a mess of presents and blah, blah, blah.
so how can i make something like that? sorry if its a lot to explain or maybe is simple, but i can make it just giving it a modify to the bootstrap navbar?
i tried giving it a diferent flex to the container of the dropdown bar but don't show any good results.
/* body and root stuff */
body {
margin: 0;
font-size: 0.813rem;
font-family: "Assistant", sans-serif;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: white;
}
/* img {
width: 100%;
height: 100%;
} */
header {
text-align: center;
background: rgb(255, 123, 0);
color: white;
padding: 2em auto;
}
/* body and root stuff end */
/* nav bar and header stuff */
.nav-bar-container {
display: flex;
justify-content: space-between;
}
#union-logo-container {
padding-top: 0px;
padding-left: 0px;
padding-bottom: 0px;
border-right-width: 0px;
padding-right: 0px;
width: 10%;
}
.union-logo-nav {
width: 100%;
height: 100%;
}
.#navbarDropdownMenuLink {
display: flex;
flex-direction: row;
}
<div class="nav-bar-container">
<nav class="navbar navbar-light" id="union-logo-container">
<a class="navbar-brand" href="#">
<img
src="/union project/img/logo navbar.jpg"
width="30"
height="30"
alt=""
loading="lazy"
class="union-logo-nav"
/>
</a>
</nav>
<nav class="navbar navbar-expand-lg navbar-light">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdownMenuLink"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Dropdown link
</a>
<div
class="dropdown-menu"
aria-labelledby="navbarDropdownMenuLink"
>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
</div>

just use the css transform with rotate. be sure to set width
a{
transform: rotate(90deg);
display:block;
width:1em;
}
<a href='#'>Action</a>

On page navigation with anchor tag on dropdown menu

I'm currently building a top navigation bar that shows dropdown on hover on some of the nav-items.
It currently looks like this
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
const $dropdown = $(".dropdown");
const $dropdownToggle = $(".dropdown-toggle");
const $dropdownMenu = $(".dropdown-menu");
const showClass = "show";
$(window).on("load resize", function() {
if (this.matchMedia("(min-width: 768px)").matches) {
$dropdown.hover(
function() {
const $this = $(this);
$this.addClass(showClass);
$this.find($dropdownToggle).attr("aria-expanded", "true");
$this.find($dropdownMenu).addClass(showClass);
},
function() {
const $this = $(this);
$this.removeClass(showClass);
$this.find($dropdownToggle).attr("aria-expanded", "false");
$this.find($dropdownMenu).removeClass(showClass);
}
);
} else {
$dropdown.off("mouseenter mouseleave");
}
});
.navbar{
background-color: black;
padding-left: 5vw;
padding-right: 4vw;
}
.navbar .nav-item{
text-align: center;
padding-top: 40px;
padding-bottom: 40px;
}
.navbar .nav-item .nav-link{
color: white;
font-size: 18px;
font-family: 'Roboto';
font-weight: bold;
}
.navbar .nav-item .nav-link:hover{
color: red;
text-decoration: none;
}
.navbar .nav-item a:hover{
color: #4c4c4c;
}
.navbar .nav-item:not(:last-child) {
margin-right: 5px;
}
.dropdown-toggle::after {
transition: transform 0.15s linear;
content: none;
}
.show.dropdown .dropdown-toggle::after {
transform: translateY(3px);
}
.dropdown-menu {
margin-top: 5px;
border-top: 5px solid red;
border-radius: 0;
padding: 0;
}
.navbar .nav-item a{
font-size: 18px;
color: #080808;
padding-top: 12px;
padding-bottom: 12px;
padding-right: 40px;
font-weight: 400;
font-family: 'Roboto';
background-color: none;
border-bottom: 1px solid rgba(193,193,193,0.59);
}
.navbar .nav-item .nav-link{
border-bottom: none;
}
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a href="#information" class="nav-link dropdown-toggle" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About Us
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<a class="dropdown-item" href="#">Who we are</a>
<a class="dropdown-item" href="#">What we do</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Events</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
So what I want to do is having both dropdown on hover working as well as using the dropdown same button(nav-item) to work as a button that navigates the user to specified section.
In the above code, it would be "About Us" that will show its following dropdown on hover. And when "About Us" is clicked, it would navigate the user to specified section ("#information").
I can only get one or the other working. If i get dropdown on hover, navigation doesn't work, if i get navigation work, then dropdown doesn't appear on hover.
Any help would be much appreciated
Thank you.

You have no hover on mobile devices, so the click cannot open the submenu and navigate to the desired section. It wouldn't be ideal, so Bootstrap works like this.
One solution would be to remove data-toggle="dropdown" from the <a> tag, however the dropdown would not work in mobile devices, since it needs click event.
If you want to maintain the submenu for mobile working, it's better to not have anchor navigation on mobile. So, keep the data-toggle="dropdown" and add this code:
$("#navbarDropdown1").click(function() {
if ($(window).width() > 991) {
var href = $(this).attr('href');
$('body, html').animate({ // an animation if you prefer, slim jQuery doesn't include animate
scrollTop: $(href).offset().top
}, 600);
}
});
Now when clicking on "About Us", it will navigate to the section, but not if the screen width is less than the Bootstrap breakpoint reserved for mobile devices (991px).

show/hide buttons on resizable navbar

I have a nivagation bar with button links in row on resize the window to smaller width each button wrap underneath which changing the navigation height, gets removed from the nav and appended into a dropdown menu.
I managed to append wrapped buttons when the navigation height is higher than 80, but it will only work if the initial size of the screen is big which will have all buttons in one row. but if the screen started at a smaller width it won't append all wrapped buttons in the menu.
Here is my attempt
$(window).resize(function() {
var navbar = $("#navbar");
var list = $("#list");
var btns = $("#btns");
var last_element;
for (var i = 0; i < list.children().length; i++) {
setTimeout(function() {
if (list.height() > 80) {
last_element = list.children().last();
setTimeout(function() {
$("#btns .dropdown-menu").prepend(last_element);
}, 300);
last_element.remove();
}
}, 500);
}
});
#navbar {
width: fit-content;
background-color: #dbdbdb;
box-shadow: 2px 2px 2px #999;
border-radius: 10px;
padding: 10px;
}
#list {
margin: 0;
padding: 0;
text-align: center;
display: flex;
flex-wrap: wrap;
}
.item {
color: #333;
font-size: 30px;
font-weight: bold;
background-color: #f5f5f5;
/* display: inline-block; */
padding: 10px 30px;
border-radius: 5px;
box-shadow: 2px 2px 2px #888;
margin: 4px 2px;
list-style-type: none;
}
.dropdown-menu {
width: 200px;
padding: 0 20px;
}
<!-- bootstrap style -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="navbar">
<ul id="list">
<li class="item">item 1</li>
<li class="item">item 2</li>
<li class="item">item 3</li>
<li class="item">item 4</li>
<li class="item">item 5</li>
<li class="item">item 6</li>
<li class="item">item 7</li>
</ul>
<div id="btns">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
</div>
</div>
</div>
</div>
<!-- scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
I would love to have similar action to this image,
Can someone offer a snippet suggestion or what should I use to implement such action?

Updated - move hidden items to dropdown menu
First, make changes on css:
apply display: flex to #navbar.
calculate the maximum height of #list manually and set max-height & overflow: hidden property to it. In this case, the maximum height of #list would be 73px but not 80px. (the height of .item 65px + top margin of .item 4px + bottom margin of .item 4px = 73px) If the max-height is not correct, #list may not hide the .items properly.
set display: inline-block for .items.
`
#navbar{
width: fit-content;
background-color: #dbdbdb;
box-shadow: 2px 2px 2px #999;
border-radius: 10px;
padding: 10px;
/*Flex layout*/
display:flex;
flex-direction:row;
align-items:center;
}
#list{
margin: 0;
padding: 0;
/*Calculate the max-height and set overflow hidden*/
overflow:hidden;
max-height:73px;
}
.item{
color: #333;
font-size: 30px;
font-weight: bold;
background-color: #f5f5f5;
display: inline-block;
padding: 10px 30px;
border-radius: 5px;
box-shadow: 2px 2px 2px #888;
margin: 4px 2px;
list-style-type: none;
/*Move text-align center to here*/
text-align: center;
/*Remove flex layout & add display inline-block*/
display: inline-block;
}
.dropdown-menu{
width: 200px;
padding: 0 20px;
}
`
Then, update the $(window).resize() function.
The below code will check if the item is being moved to a hidden area. Moreover, use .html() to refresh the dropdown menu.
let list = $("#list");
let listItems = $("#list .item");
let dropdownMenu = $("#btns .dropdown-menu");
$(window).resize(function() {
let listPosition = list.position().top;
let hiddenItems = listItems.filter(function(){
return $(this).position().top - listPosition > 0;
}).clone();
dropdownMenu.html(hiddenItems);
});

I see you're using bootstrap. You still can do this without any JS if a collapsible menu on mobile devices is what you need.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

My nav toggle will work only on two pages but not on the home page

So it works on mobile view for two of the pages - My Profile and My Reservation. However, it does not close again when I click on the toggle on the main home page.
<nav class="navbar navbar-default navbar-top">
<div class="container" style="max-width: 1140px;">
<div>
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="logo">
<a href="/Default.aspx" class="navbar-brand">
<img src="/images/logo.png" style="width: 85px; margin-top: 16px; float: left;">
</a>
</div>
<div class="logo_mobile" style="display: none;">
<a class="navbar-brand" href="#">
<img src="/images/logo.png">
</a>
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" data-target=".navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><font>Home</font></li>
<%--<li><font>Services</font></li>--%>
<%--<li runat="server" id="btn_map"><font>Search</font></li>--%>
<li runat="server" id="btn_contactUs"><font>Contact Us</font></li>
<li runat="server" id="btn_myaccount"><font>My Profile</font></li>
<li runat="server" id="btn_myreservation"><font>My Reservation</font></li>
<li runat="server" id="btn_signup"><font>Sign Up</font></li>
<li runat="server" id="btn_login"><font>Log In</font></li>
<li runat="server" id="btn_signout"><font>Log Out</font></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</div>
</nav>
I'm not sure if it's the CSS issue though.
.navbar-header {
float: left;
}
}
.navbar-collapse {
max-height: 340px;
padding-right: 15px;
padding-left: 15px;
overflow-x: visible;
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
-webkit-overflow-scrolling: touch;
}
.navbar-collapse:before,
.navbar-collapse:after {
display: table;
content: " ";
}
.navbar-collapse:after {
clear: both;
}
.navbar-collapse:before,
.navbar-collapse:after {
display: table;
content: " ";
}
.navbar-collapse:after {
clear: both;
}
.navbar-collapse.in {
overflow-y: auto;
}
#media (min-width: 768px) {
.navbar-collapse {
width: auto;
border-top: 0;
box-shadow: none;
}
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navbar-collapse.in {
overflow-y: auto;
}
.navbar-collapse .navbar-nav.navbar-left:first-child {
margin-left: -15px;
}
.navbar-collapse .navbar-nav.navbar-right:last-child {
margin-right: -15px;
}
.navbar-collapse .navbar-text:last-child {
margin-right: 0;
}
I've even tried JQuery but it won't budge. I also looked at the source code for the main page that it's not working on, and I cannot seem to detect any problems there because I actually use an another page for the header/nav to apply for all the pages.

Bootstrap Dropdown Make Dropdown arrow change Direction

I am looking for a way to make the bootstraps dropdown menu arrow change directions from facing up when menu is closed and down when menu is open.
This is my html code:
<!-- Navigation -->
<nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
<!-- Container makes the navbar extend across the whole screen, removing the default curved sides -->
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project Pandora</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<% if defined?(Devise) %>
<% if user_signed_in? %>
<li class="dropdown">
Account <b class="caret"></b>
<ul class="dropdown-menu">
<li><%= link_to "Edit Account", edit_user_registration_path %></li>
<li>Do Something</li>
<li class="divider"></li>
<li><%= link_to "Sign Out", destroy_user_session_path, method: :delete %></li>
</ul>
</li>
<% else %>
<li><%= link_to "Login", new_user_session_path %></li>
<li><%= link_to "Sign Up", new_user_registration_path %></li>
<% end %>
<% end %>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- container-collapse -->
</nav>
I think it would be easiest to do in js.
Here is my jsfiddle code: https://jsfiddle.net/Pabi/RxguB/75/
Thank you.

I just encountered the same issue. I wanted to make the caret icon look up when dropdown was active, and normal (down) when it was not. This is my solution:
<style>
.caretup {
transform: rotate(180deg);
}
</style>
<script>
$(function(){
$(".dropdown").on("show.bs.dropdown hide.bs.dropdown", function(){
$(this).find(".caret").toggleClass("caretup");
});
});
</script>
That's it!

Try this code.
<!-- Navigation -->
<nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
<!-- Container makes the navbar extend across the whole screen, removing the default curved sides -->
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project Pandora</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Account <b class='caret' id='menu-caret'></b>
<ul class="dropdown-menu">
<li><%= link_to "Edit Account", edit_user_registration_path %></li>
<li>Do Something</li>
<li class="divider"></li>
<li>Sign Out</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- container-collapse -->
</nav>
and add script
<script>
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(0).fadeIn();
$('#menu-caret').addClass('glyphicon glyphicon-chevron-up');
$('#menu-caret').removeClass('caret');
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(0).fadeOut();
$('#menu-caret').addClass('caret');
$('#menu-caret').removeClass('glyphicon glyphicon-chevron-up');
});
</script>
remove onhover css in ur CSS
refer this fiddle http://jsfiddle.net/7o8sLhgf/

Solution using jQuery and some minor CSS.
$(function() {
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).stop(true, true).fadeIn("fast");
$(this).toggleClass('open');
$('span', this).toggleClass("caret caret-up");
},
function() {
$('.dropdown-menu', this).stop(true, true).fadeOut("fast");
$(this).toggleClass('open');
$('span', this).toggleClass("caret caret-up");
});
});
/*TODO Check what makes the hover items dark blue*/
.navbar {
text-transform: uppercase;
margin-bottom: 0px;
}
.navbar-inverse {
padding-bottom: 70px;
padding-top: 70px;
}
.navbar-inverse .navbar-nav > li > a {
color: white;
}
.navbar-brand {
font-weight: 700;
font-size: 20px;
letter-spacing: 2px;
}
.navbar-inverse .navbar-toggle {
border-color: transparent;
}
.navbar-trans {
background-color: #279ddd;
color: #fff;
border-bottom-width: 1px;
border-color: #fff;
}
.navbar-trans li>a:hover,
.navbar-trans li>a:focus,
.navbar-trans li.active {
background-color: #38afef;
}
.navbar-trans a {
color: #fefefe;
}
/*Drop down menu styling*/
ul.dropdown-menu {
background-color: #279ddd;
}
ul.dropdown-menu {
background-color: #279ddd;
}
ul.dropdown-menu li a {
color: white;
}
/*Dropdown on Hover*/
.sidebar-nav {
padding: 9px 0;
}
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
visibility: visible;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.nav-tabs .dropdown-menu,
.nav-pills .dropdown-menu,
.navbar .dropdown-menu {
margin-top: 0;
}
.navbar .sub-menu:before {
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .sub-menu:after {
border-top: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
left: 10px;
top: 11px;
left: -6px;
}
.caret-up {
width: 0;
height: 0;
border-left: 4px solid rgba(0, 0, 0, 0);
border-right: 4px solid rgba(0, 0, 0, 0);
border-bottom: 4px solid;
display: inline-block;
margin-left: 2px;
vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<!-- Navigation -->
<nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
<!-- Container makes the navbar extend across the whole screen, removing the default curved sides -->
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Project Pandora</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav"></ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"> Account <span class='caret' id='#menu-caret'></span>
<ul class="dropdown-menu">
<li> Do Something
</li>
<li>Do Something
</li>
<li class="divider"></li>
<li>Sign Out
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- container-collapse -->
</nav>