Centered rounded Logo in Navbar?

Question

I am new to bootstrap and I want to create a customized navbar in which the round logo cross it in the middle :

finding that it's complicated , I tried to search for a similar solution and I found this. But applying that navbar didn't give me the expected look :

so do you have a suggestion on how I can create this navbar or fix the existing one ?

Answer 1

You can fix this with CSS. You need to create a nav element with the logo and two unordered list on either side. You then add the position:absolute to the image and change the top value to center it. Here's the HTML structure and CSS code you need to apply:

HTML:

        <nav>
            <ul>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
            </ul>
            <div>
                <img src="https://via.placeholder.com/150" alt="">
            </div>
            <ul>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
            </ul>
        </nav>

CSS:

       nav {
           width: 100vw;
           height: 50px;
           margin-top: 30px;
           display: flex;
           flex-flow: row nowrap;
       }
       ul {
           height: inherit;
           display: flex;
           flex-flow: row nowrap;
           list-style: none;
           margin-left: 50px;
       }
       li {
           padding: 20px;
       }
       div {
           position: relative;
       }
       img {
           position: absolute;
           height: 100px;
           width: 100px;
           top: -20px;
       }