Long story (hopefully) short, I have a div that is a "sticky header" with several components inside of it, the "main" two of which are a container for a "breadcrumbs" element and one for the navigation element (each of which has child elements inside).
My issue is that when the breadcrumb element on the left starts to grow, rather than push the navigation element to the right, where there is ample screen real estate, it instead moves itself off-screen to the left, like this...
"Normal breadcrumb"
"Breadcrumb with one more value"
I want the navigation menu (starts with "Home", "Government", etc...) to move to the right when the breadcrumbs grow, and take up some of this space shown here:
I am not skilled enough with CSS to run this issue down to its root, though I really have tried. Here is what I hope is all of the information that will be helpful in helping me:
Elements on page:
<div class="sticky-header">
<div class="col-lg-6 d-none d-xl-block">
<nav class="desktop-nav">
<div class="container-lg">
<div class="breadcrumb-section" padding-bottom="50px">
<ul class="breadcrumbs">
<!-- breadcrumb items -->
</ul>
</div>
</div>
<!-- nav items -->
</nav>
</div>
</div>
"sticky-header" definition:
/* HEADER SECTION | NAVIGATION */
.sticky-header {
/* To make the header sticky */
position: sticky;
top: 0px;
background-color: #F0F0F0;
padding: 0px 0px;
height: 60px;
z-index: 1000;
white-space: nowrap;
border: none;
.content {
height: 200vh;
}
/* To center the navigation container */
display: flex;
justify-content: center;
align-items: center;
align-content: center;
}
"col-lg-6" definition:
.col-lg-5,
.col-lg-6 {
flex: 0 0 auto;
width: 41.66666667%
}
.col-lg-6 {
width: 50%
}
"d-none" definition:
.d-none {
display: none !important
}
"d-xl-block" definition:
.d-xl-block {
display: block !important
}
"desktop-nav" definition:
.desktop-nav {
display: flex;
align-items: top;
justify-content: center
}
"container-lg" definition:
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
width: 100%;
padding-right: calc(var(--bs-gutter-x)*.5);
padding-left: calc(var(--bs-gutter-x)*.5);
margin-right: auto;
margin-left: auto
}
"breadcrumb-section" definition:
.breadcrumb-section {
padding: 5px 0px 12px;
display: flex;
align-items: center;
justify-content: center;
}
Any assistance would be infinitely apprecated!
Right now as I can see, your breadcrumb section has its content justified in the center, that's why the content won't grow to the right, but on both sides. You might consider changing to this code, making the content start on the beginning of the container:
.breadcrumb-section {
padding: 5px 0px 12px;
display: flex;
align-items: center;
justify-content: start;
}
Also the column width might be too small and all your content won't fit, so it could be good to increase it.
.col-lg-6 {
width: 90%
}
Hope this will help you.