Навигация написана внутри тега заголовка, но отображается под заголовком

Question

Итак, у меня возникли проблемы с созданием адаптивной панели навигации с помощью Gatsby. Спустя 2 недели мне, наконец, удалось заставить его работать, но есть одна последняя проблема.

Я поместил свою навигацию в свой заголовок по причинам logi c. Обычно панель навигации скрыта, но когда вы касаетесь или щелкаете гамбургер-меню, навигация видна, но суть в следующем:

Мой заголовок представляет собой тег P вместе с элементом div Icon. При переключении навигация осуществляется принудительно внутри заголовка, но я хочу, чтобы моя навигация отображалась НИЖЕ заголовка.

Есть какие-нибудь способы сделать это? Это мой код для шапки

import React, { useState } from 'react'
import Navbar from '../navbar/navbar'


const Header = () => {
const [toggleNav, setToggleNav]=useState(false);

const showNav = () => setToggleNav(!toggleNav);


    return(
       <header>
         <div className="topbar ">         
            <p>STIJN REYGAERTS</p>
                  <div className='Icon' onClick={showNav}>
                     <div></div>
                     <div></div>
                     <div></div>          
                   </div>
               </div>    
            <div className={`${toggleNav ? 'NavigationVisible': 'Navigation' }`}><Navbar /></div>       
       </header>    
    )
}

export default Header