Изображение логотипа Materializecss nav с двумя горизонтальными списками меню

#html #css #materialize

#HTML #css #материализовать

Вопрос:

Я хочу создать два горизонтальных навигационных меню, одно рядом с изображением логотипа слева, а другое справа, используя materializecss framework, но изображение логотипа перекрывается с первым меню.

 .nav-logo {
    width: 6.5rem;
}
 
  <nav class="transparent">  
        <div class="container">
                <a href="#" class="brand-logo"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Adyen_Corporate_Logo.svg/1024px-Adyen_Corporate_Logo.svg.png" alt=""
                    class="responsive-img nav-logo"></a>
            <ul>
                <li><a href="#" class="grey-text text-darken-2">Our solution</a></li>
                <li><a href="#" class="grey-text text-darken-2">Customers</a></li>
                <li><a href="#" class="grey-text text-darken-2">About us</a></li>
                <li><a href="#" class="grey-text text-darken-2">Documentation</a></li>
            </ul>
            <ul id="nav-mobile" class="right">
                <li><a href="sass.html"><i class="material-icons left grey-text text-darken-2 center-align">search</i></a></li>
                <li><a href="" class="grey-text text-darken-2">Contatc us</a></li>
                <li><a href="" class="grey-text text-darken-2">Log in</a></li>
                <li><a href="" class="white-text btn wave-effect waves-light greenish bold">create an account</a>
                </li>
            </ul>
        </div>

   </nav>