How to Add top left navigation bar?

Anvil Q&A
1

What I’m trying to do:
For a specific design request, I was asked to add a top left navigation bar next to the title of an application using the Material Design template. This navigation bar would have 2 menu links. (I have beginner understanding of HTML)

What I’ve tried and what’s not working:
Here is how my original app looks like:

Screenshot (63)
Screenshot (63)1920×164 21.3 KB

And I’d like to add 2 menus in this location:

Screenshot (63)_LI
Screenshot (63)_LI1920×164 32.9 KB

I tried copying the code for the top right navigation bar, to this:

    <div class="nav-left" anvil-drop-redirect=".nav-elt">
      <div anvil-slot-repeat="nav-left" class="nav-elt">
        <div anvil-drop-here class="drop-here"></div>
        <div class='topnav-left-element'></div>
      </div>
      <div class="nav-elt placeholder anvil-designer-only" anvil-drop-slot="nav-right">

.nav-left{
    float: left;
    color: #333;
    display: inline;
    font-size: 20px;
    margin-right: 40px;
    margin-top: 12px;
    text-align: center;
}
  
.nav-left.topnav-left-element {
  padding-left:30px;
  padding-right:30px;
  margin-left:30px;
  margin-right:30px;

}

.nav-elt {
    display: inline-block;
    vertical-align: top;
    margin-left: 10px;
    position: relative;
}

Unfortunately, it came out like this:

Screenshot (65)
Screenshot (65)1920×900 175 KB

So the title is now completely separated from the rest of the webpage, and the right navigation bar also disappeared. I tried putting the script at different locations but none worked.