Desired output: Achieve two rows with a .container div, centered in the viewport and aligned with each other. The second row should contain the navbar within a .container. Additionally, add a non-collapsing dropdown at the end of the navbar row, outside the .container, at the edge of the viewport without affecting the center alignment.
Current output: The additional dropdown causes the .container with the navbar to be pushed to the left, losing alignment with the header container above.
This customization is needed for a product transitioning to Bootstrap 5, where the content is enclosed in a .container.
/* Show .container left and right boundaries */
#branding-container {
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}
#navbar-container {
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}
#branding-area {
background-color: #CE1126;
font-size: 20px;
}
#djc-navbar-area {
background-color: #333;
border-top: 2px solid #fff;
color: #fff;
font-family: ariel, helvitica, verdana;
font-size: 20px;
}
#djc-navbar-area a {
color: #fff;
font-family: ariel, helvitica, verdana;
font-size: 20px;
}
#djc-help {
border-radius: 0;
}
/* Space that contains links */
.right_bar {
float: right;
font-family: CaeciliaCom-75Bold, cambria, Palatino Linotype, Book Antiqua, Palatino, serif;
color: #fff;
font-size: 16px;
text-align: center;
padding-top: 10px;
margin-right: 25px;
display: inline-block;
background-color: none;
color: #fff;
}
.right_bar_item, .right_bar_item a {
display: inline-block;
color: #fff;
margin-left: 10px;
}
.navbar {
min-height: 50px;
margin-bottom: 0px;
border: 1px solid transparent;
padding: 0;
}