Breadcrumbs and cart display under navbar - html

Question

I would like to add two elements under my navbar. On the right side the cart of which you can see the content by clicking on it and on the other side, the breadcrumbs both aligned on a same row. cf. pic related
The whole thing would be dynamic also. I spent the whole day trying to find solutions without success. What would be the best way to do it? Flex display?
Thank you in advance for your help. Here is my code:
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.breadcrumbs ul{
list-style-type: none;
}
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
.flex-container {
display: flex;
flex-direction: row;
font-size: 30px;
text-align: center;
}
.flex-item-left {
background-color: #f1f1f1;
padding: 10px;
flex: 50%;
}
.flex-item-right {
background-color: dodgerblue;
padding: 10px;
flex: 50%;
}
/* Responsive layout - makes a one column-layout instead of two-column layout */
#media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}
<div class="flex-container">
<div class="flex-item-left">
<div class="breadcrumbs">
<ul>
<li>
Home
</li>
<li>
<a></a>
</li>
</ul>
</div>
</div>
<div class="flex-item-right">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Cart</button>
<div id="myDropdown" class="dropdown-content">
<span>Cart item</span>
</div>
</div>
</div>
</div>

Answer 1

Two solutions come to mind.
Use margin: left on the button to push it to the further point available.
Use flex-grow: 1 or flex: 1 on the breadcrumb bar so that it uses all the available space except for that used by your button.
Working Codepen example here

Answer 2

Well, you are already doing it correctly, you just have to replace the <span>Cart Item</span> with your actual items, as of the formatting you don't really need to use flex since every item will be block scoped div here's what you will have to do to generate the dynamic content:
<div class="flex-item-right">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Cart</button>
<div id="myDropdown" class="dropdown-content">
<?php
foreach($items as $item) {
?>
<div>
<?php $item['name'].' '.$item['quantity'].'x'; ?>
</div>
<?php
}
?>
</div>
</div>
</div>
and similarly you can add the total amount and go to cart button after the loop ends.
UPDATE
I think I got the question wrong, you want your cart button to go extreme right and let the right side take whole space, here's what you should do:
<div class="flex-container">
<div class="flex-item-left flex-grow-1">
...
</div>
<div class="flex-item-right">
...
</div>
</div>
Add ``flex-grow``` property to your stylesheet as:
.flex-grow-1 {
flex-grow:1;
}
and change the existing styles:
.flex-item-left {
background-color: #f1f1f1;
padding: 10px;
}
.flex-item-right {
background-color: dodgerblue;
padding: 10px;
}
UPDATE <800px
Simply make your .flex-container block scoped and it will center automatically:
#media (max-width: 800px) {
.flex-container {
display:block;
}
Working Code Snippet
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.breadcrumbs ul{
list-style-type: none;
}
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
.flex-container {
display: flex;
flex-direction: row;
font-size: 30px;
text-align: center;
}
.flex-item-left {
background-color: #f1f1f1;
padding: 10px;
}
.flex-item-right {
background-color: dodgerblue;
padding: 10px;
}
.flex-grow-1{
flex-grow:1;
}
/* Responsive layout - makes a one column-layout instead of two-column layout */
#media (max-width: 800px) {
.flex-container {
display:block;
}
}
<div class="flex-container">
<div class="flex-item-left flex-grow-1">
<div class="breadcrumbs">
<ul>
<li>
Home
</li>
<li>
<a></a>
</li>
</ul>
</div>
</div>
<div class="flex-item-right">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Cart</button>
<div id="myDropdown" class="dropdown-content">
<span>Cart item</span>
</div>
</div>
</div>
</div>