Recently, I came across a document containing Bootstrap 4 code like the following:
<div className="container">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand active" aria-current="true" href="/">
<img src="/assets/logo.gif">
</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse order-3 collapse" id="navbar" style="">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link gray large1" aria-current="false" id="Products" href="/products">PRODUCTS</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link gray dropdown-toggle large1 active" href="#" id="navbarKnow-How" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">KNOW-HOW</a>
<div class="dropdown-menu" aria-labelledby="navbarKnow-How">
<a class="dropdown-item" aria-current="false" id="Know-How.Innovation" href="/knowhow#innovation">Innovation</a>
<a class="dropdown-item" aria-current="false" id="Know-How.Quality" href="/knowhow#quality">Quality</a>
<a class="dropdown-item" aria-current="false" id="Know-How.Logistical Expertise" href="/knowhow#expertise">Logistical Expertise</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link gray large1" aria-current="false" id="Contact" href="/contact">CONTACT</a>
</li>
</ul>
</div>
</nav>
<div className="article">
<nav id="sections" class="navbar nav-pills flex-column">
<a class="nav-link" href="#innovation">Innovation</a>
<a class="nav-link" href="#quality">Quality</a>
<a class="nav-link" href="#expertise">Expertise</a>
</nav>
<div className="content" data-spy="scroll" data-target="#sections" data-offset="0"><h1 id="innovation">Innovation</h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pulvinar dictum ullamcorper. Proin libero tellus, ultricies eget turpis vitae, elementum pulvinar mi. Aliquam ullamcorper metus sed nunc varius ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra lorem ac nibh fringilla, eget mattis magna dignissim. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam volutpat tortor lorem,eget finibus est imperdiet id. Suspendisse vehicula lobortis urna, nec malesuada arcu posuere ut. Integer at velit non tortor
<h1 id="quality">Quality</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pulvinar dictum ullamcorper. Proin libero tellus, ultricies eget turpis vitae, elementum pulvinar mi. Aliquam ullamcorper metus sed nunc varius ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra lorem ac nibh fringilla, eget mattis magna dignissim.
</div>
</div>
</div>Within this structure, my screen is divided into two vertical sections, namely the <nav> section and the <div article> section. The <div> itself is vertically divided into the <nav> and <div className="content"/> sections.
The issue arises when I utilize the scrollintoview() function on the <div content>, causing the entire screen to scroll up and hide the navbar.
I have attempted using position:absolute, but this resulted in the navbar overlapping with the <div article> section.
Now, the question remains: How can I ensure that the navbar remains visible on the screen at all times?
If you wish to observe this behavior in action, you can visit https://getbootstrap.com/docs/4.0/components/scrollspy and click on any section to witness the screen scrolling up and hiding the navbar.
I am starting to suspect that the issue is not with Bootstrap itself, but rather with the DOM commands. Even a simple $('#quality').scrollIntoView() or using bookmarks like
<a href="#quality">Quality</a>Therefore, I believe the root of the problem lies within the CSS, as I have not applied any additional CSS apart from the Bootstrap framework.