I have been searching for a solution to make my sticky-top navbar work without placing it inside another div with a fixed height. Here is the code I am currently using:
<body <?php body_class(); ?>>
<div class="container">
<header class="header-container text-center">
<div class="social-menu" style="height: 20%">
<h3><i class="fa fa-facebook-square"> </i> <i class="fa fa-instagram"> </i> <i class="fa fa-twitter-square"> </i> <i class="fa fa-youtube-square"></i></h3>
</div>
<div class="header-content table" style="height: 60%">
<div class="table-cell">
<div class="logo-image"></div>
<h1 class="site-title"><span class="d-none"><?php bloginfo('name'); ?></span></h1>
<!-- add hidden title for SEO -->
<h2>Španski Metar</h2>
</div>
</div>
<div class="nav-container">
<nav class="navbar sticky-top navbar-expand-lg is-sticky navbar-light navbar-spanski">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="<?php esc_html_e( 'Toggle Navigation', 'spanski_metar' ); ?>">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbar-content">
<?php
wp_nav_menu([
'menu' => 'main_menu',
'theme_location' => 'main_menu',
'menu_id' => false,
'menu_class' => 'navbar-nav mr-auto',
'depth' => 2,
'fallback_cb' => 'nav_walker::fallback',
'walker' => new nav_walker()
]);
?>
<!-- <div id="navsearch">
<form class="form-inline my-2 my-lg-0">
<input class="form-control-sm" style="padding-left:5px; border-style: solid; border-width: 1px;" type="search" placeholder="Pretraga" aria-label="Search">
<button class="btn my-2 my-sm-0" type="submit"><i class="fa fa-search"></i></button>
</form>
</div> -->
</div>
</nav>
<div style="height: 1000px"></div>
</div><!-- .nav-container -->
</header>
</div>
I've noticed that the only way the sticky-top feature works is by putting an extra div with a set height of 1000px inside the nav-container div. However, this goes against what I believe is best practice. Can anyone suggest a solution to keep the navbar sticky-top while maintaining its position within the header?
Thank you in advance for any insights or advice.