Menu Hiding Under Top Bar

Dear Support Team,

I hope this email finds you well. I am reaching out to you regarding an issue that I am experiencing on a website that I have recently built for a client.

The client requested that I insert some buttons on the top of the page, and I used the Top Hook area to insert the buttons. However, I am now experiencing an issue where the menu on the website hides the logo and burger menu icon when you scroll back up to the top of the page.

I have tried various settings, such as the z-index, but none of them seem to fix the issue. I have tested the website, and you can find it at this URL: 67.43.11.138/yrb.ca. Please note that you will have to alter your hosts file to view it because it is not technically live yet.

I have also added some custom CSS code to the website to style the buttons and their container. Please find the CSS code below:

<style>

.button-container {

display: flex;

flex-direction: row;

justify-content: center;

position: relative;

z-index: 9999;

}

.button-container .button {

display: inline-block;

background-color: #dd9933;

border: none;

color: white;

padding: 20px 20px;

text-align: center;

text-decoration: none;

font-size: 21px;

font-weight: bold;

margin: 4px 2px;

cursor: pointer;

border-radius: 8px;

-webkit-transition-duration: 0.4s;

transition-duration: 0.4s;

text-transform: uppercase;

color: white;

}

.button-container .button:hover {

background-color: #b97722;

}

.button-container .button .button-icon {

display: inline-block;

font-size: 21px;

margin-right: 5px;

}

.button-container .button .button-text {

display: inline-block;

vertical-align: middle;

}

.navigation {

position: fixed;

top: 100px;

width: 100%;

margin-top: 50px;

}

</style>

<div class="navigation">

<!-- your navigation menu code here -->

</div>

<div class="button-container">

<a href="http://yrb.ca/report-a-problem" class="button">

<i class="fas fa-exclamation-triangle button-icon"></i>

<span class="button-text">Report a Problem</span>

</a>

<a href="http://yrb.ca/emergency-contact-numbers" class="button">

<i class="fas fa-phone-alt button-icon"></i>

<span class="button-text">Emergency Contacts</span>

</a>

</div>

I would greatly appreciate it if you could provide me with some guidance on how to fix this issue. Please let me know if you require any additional information from me to assist with the troubleshooting process.

Thank you for your help in this matter. I look forward to hearing from you soon.

Best regards,

Ian Fraser