Sticky menu covers horizontal thecomplete screen instead of boxed layout

[Seven1969]

Hi
I want to adjust the sticky menu lay out. Out of the box it covers horizontal the complete browser. I just want to have it aswide as the box is

Here is the link to the development page (template Zero);
Test Paderkinderleben

Boxed layout:

Standard stick menu:

Sticky menu customizes (custom code in templalte)

css in custom Code:
.astroid-header-section .astroid-header-sticky {
position: fixed;
top: 0;
left: auto;
width: 1140px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
z-index: 1020;
-webkit-animation-duration: 0.7s;
animation-duration: 0.7s;
}

There is always the padding and the fixed width. I have no idea to get it done (no padding and flexible width)
Any idea or help is welcome.
Many Thanks, Tim

[Giorgi625]

.container, .container-fluid, .container-sm, .container-md, .container-lg, .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;
}
--bs-gutter-x << this is the reason of padding in sticky header. So if you are able to add custom class to sticky header add it and overwrite style for that attribute with 0 value.

[sonvnn]

.astroid-header-section .astroid-header-sticky {
position: fixed;
top: 0;
left: auto;
width: 1140px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
z-index: 1020;
-webkit-animation-duration: 0.7s;
animation-duration: 0.7s;
--bs-gutter-x: 1.5rem;
margin-left: calc(-0.5* var(--bs-gutter-x));
}

@Seven1969 You can use this custom css. Hope it help.

[Seven1969]

Hi Sonvnn,
perfect many thanks, padding/margin issue is solved.

So only the fixed width is a still not solved: original width is 100% which leads to

So i need a css which adopts the width to the current "box" width. So max-width has to be calculated and set in the above section

1. tried: max-width: fit-content; --> to small
2. in @media defined max-width is not taken in account here - unable to change that :-(

many thanks
Tim

[sonvnn]

You can use

@media (min-width: 1140px) {
  .astroid-header-section .astroid-header-sticky {
    position: fixed;
    top: 0;
    left: auto;
    width: 1140px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    z-index: 1020;
    -webkit-animation-duration: 0.7s;
    animation-duration: 0.7s;
    --bs-gutter-x: 1.5rem;
    margin-left: calc(-0.5* var(--bs-gutter-x));
  }
}

[Seven1969]

Hi Sonvnn,
thats it, many thanks for your support, I have learned a lot.
Kind regards Tim