JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  <a href="#">Ссылка</a>
  <a href="#" class="menu2-click">Ссылка открывающая доп. меню</a>
  <div class="menu2">
  <a href="#">Ссылка</a>
  <a href="#">И еще куча возможных ссылок</a>
  </div>
</header>

<div>
Контент
</div>

CSS

body {
  transition: padding-top .15s;
}

header {
  min-height: 50px;
  position: fixed;
  top:0;
  left:0;
  right:0;
  background: #fff
}

header a {
  line-height: 60px;
  padding:0 15px;
}

.menu2 {
  display: none;
}
.menu2 a {
  display: block;
}

JavaScript

$(document).ready(function(){
	
  setPadding();
  
	$('.menu2-click').click(function(){
		$('.menu2').slideToggle(setPadding);
	});

});

function setPadding() {
    var headerHeight = $('header').outerHeight();
    $('body').css({ paddingTop: headerHeight });
}