Why position:sticky is not working when the element is wrapped inside another one?
position:sticky
consider the parent element to behave as it should be. In your case the parent element has its height defined by the sticky element so there is no room for the element to have a sticky behavior
Add border to better see the issue:
.nav-wrapper {
position: absolute;
bottom: 0;
border: 2px solid;
}
.nav-wrapper nav {
position: sticky;
top: 0;
}
body {
min-height:200vh;
}
<div class="nav-wrapper">
<nav>
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>About</li>
</a>
</nav>
</div>
Why position sticky is not working in my code?
Its because you have overflow-x-hidden in parent . sticky doesn't work if parent overflow is hidden.
{!categorySearch && (
<div className="max-w-2xl mx-auto z-40 relative font-metropolis_semibold">
<div className="sticky top-0">
<div className=" z-40 bg-white w-full transition-all">
<div
id="logo"
className={
logo
? "px-md mt-10 font-medium"
: "px-md mt-10 font-medium animate"
}
>
<div className="overflow-x-hidden ">
<img
src={settings.logo_intro_image_url}
alt={settings.name}
className="max-w-full object-contain company-logo"
style={{ height: settings.logo_height }}
id="company-logo"
/>
</div>
</div>
<div
className={`${
logo
? "shadow-none border-none"
: "border-b-2 border-gray-200"
}`}
>
<TopOptions
showOption={showOption}
setShowOption={setShowOption}
addBorder={logo}
outlets={outlets}
languageLabels={languageLabels}
settings={selectedOutlet.settings}
/>
</div>
</div>
{Object.keys(bannerArray).length === 1 ? (
<div className="w-full px-md border-b-8 border-banner pb-md">
{bannerArray &&
bannerArray.map((banner, index) => {
return (
<>
<PosterSlider
key={index}
image={banner.image}
loadingBanners={loadingBanners}
isSingle={Object.keys(bannerArray).length === 1}
/>
</>
);
})}
</div>
) : (
<div className="max-h-full h-19.7 hide-scroll px-md flex overflow-x-auto gap-5p border-b-8 border-light-bg-gray">
{bannerArray &&
bannerArray.map((banner, index) => {
return (
<PosterSlider
key={index}
image={banner.image}
loadingBanners={loadingBanners}
isSingle={Object.keys(bannerArray).length === 1}
/>
);
})}
</div>
)}
<div className="flex flex-row justify-between items-center px-md my-25p">
<p className="font-metropolis_regular text-sm break-words">
{languageLabels.like_to_order}
</p>
<img
src={Search}
alt="search"
onClick={() => setCategorySearch(true)}
/>
</div>
<div className="grid grid-flow-row w-full grid-cols-2 place-items-center gap-10p px-md pb-20">
{categoryList.map((category) => {
// console.log(category);
return (
<Dishes
key={category.category_id}
category={category}
languageLabels={languageLabels}
loading={loadingCategories}
/>
);
})}
</div>
<BottomNavigation
languageLabels={languageLabels}
isLoyalty={settings.enable_reward_points_functionality}
/>
</div>
</div>
)}
Position sticky not taking effect
The sticky element in your fiddle has no height setting - use a set height
to avoid that, then the sticky position works:
https://jsfiddle.net/rocz5nL1/
Why position sticky is not working on my nav?
when an element with a position: sticky
style is wrapped, and it is the only element inside the wrapper element, this element, which was defined position: sticky
will not stick. Instead of .header__div-nav
please add position: sticky
to your header
#header {
position: sticky;
top: 0;
}
CSS Sticky attribute is not working in this demo
Position sticky is related to closest parent - in your example to element with height 300px and thats working fine :)
Related Topics
Maintain the Aspect Ratio of a Div With Css
Center One and Right/Left Align Other Flexbox Element
Css Margin Terror; Margin Adds Space Outside Parent Element
How to Make a Div 100% Height of the Browser Window
Why Is Percentage Height Not Working on My Div
Why Does This CSS Margin-Top Style Not Work
Understanding CSS Selector Priority/Specificity
How to Disable Browser Autocomplete on Web Form Field/Input Tags
Max Parallel Http Connections in a Browser
How to Style a Checkbox Using Css
Why Doesn't the Height of a Container Element Increase If It Contains Floated Elements
How to Overlay One Div Over Another Div