How to affix/align text to (hamburger) icon

Site URL: http://www.dolphinbottles.co.uk

Hi,

Here is my current header:

^This is how I want it to look, however when I change the screen size it moves, which will be obvious as to why when you see the code I am using. I am just not pro enough to know how to fix it.

^Here is how it looks full screen

Header Code Injection:

<h1 class="menu">Menu</h1>

CSS:

.menu {
position: absolute;
  top: 5.5%;
  left: 3.2%;
  z-index: 99999;
background: none;
color: black;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
}

How can I make my 'menu' text anchor to the hamburger menu icon?

password: dolphin

🙂Thanks to anyone who could help

.burger-box:before {
  content: 'Start Your\AJourney Here';
  padding-bottom: 1em;
  width: auto;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  white-space: pre;
  line-height: 1 !important;
  transform: translateX(0);
  transform: translateY(-100%);
}

6 hours ago, rwp said:

.burger-box:before {
  content: 'Start Your\AJourney Here';
  padding-bottom: 1em;
  width: auto;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  white-space: pre;
  line-height: 1 !important;
  transform: translateX(0);
  transform: translateY(-100%);
}

Thanks so much, works perfectly!