How can I get my logo sticky in a div while using bootstrap?-CodePudding

I'm trying to get my logo stick to the top of the page but I can't manage to do that. I've tried with:

#logo {
position: sticky; 
top:0
}

I also check if there's an overflow property but I've found nothing, I'm also using bootstrap framework version 5.

This is the part where I've put logo:

<div  id="header">
    <div >
        <div >
            <img src="../media/logos/mb-logo.png" id="logo"  alt="logo">
        </div>
        <div  id="menu_mobile">
            <div >
                <div >
                    <span >about me</span>
                </div>
                <div >
                    <span >competencies</span>
                </div>
                <div >
                    <span >portfolio</span>
                </div>
                <div >
                    <span >contact</span>
                </div>
            </div>
        </div>
        <div  id="menu_desk">
            <span >about me</span>
            <span >competencies</span>
            <span >portfolio</span>
            <span >contact</span>

        </div>
    </div>
</div>

Can someone help me?

edit: after trying the solution posted by @Fork:

<div  id="header">
    <div >
        <div  >
            <img src="../media/logos/mb-logo.png" id="logo"  alt="logo">
        </div>

The logo stay in position while I scroll down but other element changed of disposition. I managed to fix them adding some paddings and margin

CodePudding user response：

#header {position: sticky;top: 0px;}

CodePudding user response：

Not sure why you just want the position: sticky; just on the logo rather than the whole navigation bar, but if you want to go that route, I would suggest using position: fixed; instead. Additionally, apply it to the div that's surrounding your image. Like so:

<div >
 <img src="../media/logos/mb-logo.png" id="logo"  alt="logo">
</div>

Hope this helps :)

CodePudding user response：

As far as I know the problem is, that for some constructions, like a bootstrap carousel, if you want to display it on a fullscreen, bootstrap requires the height of html to be set to 100%. For position: sticky it is required to have no height set. You could try making the nav sticky with JS:

    const nav = document.querySelector('#nav');
let navTop = nav.offsetTop;

function fixedNav() {
  if (window.scrollY >= navTop) {    
    nav.classList.add('fixed');
  } else {
    nav.classList.remove('fixed');    
  }
}

window.addEventListener('scroll', fixedNav);

and the CSS for the activated navbar:

#nav.fixed {
  position: fixed;
  box-shadow: 5px 5px 19px 0px rgba(0, 0, 0, 0.5);
}
#nav.fixed ul li img {
  height: 36px;
}
#nav.fixed ul li a {
  font-size: 14px;
}