I’m having problems with getting the layout right for the navbar I’m working with.

I want the navbar to have 3 sections like described in the title, for the first section at the left there’s an img and a simulating a button that needs to be in the same row no matter the width.

For the second section at center, just a h1 on top of a h2 with text-center.

And for the third one at the far right, it needs to be sectioned in a 2×3 grid, the first column there’s gonna be a button that covers the 2 rows, in the second one two buttons in each row, and the third column needs to be a button with an img inside that covers the 2 rows like the first one but with more space to cover width-wise compared to the other ones (like a 25%, 25%, 50% respectively)

Here’s what I have at the moment.

        <nav class="navbar navbar-expand-lg navbar-toggleable navbar-light bg-light border-bottom text-black">
            
            <ul class="navbar-nav mx-auto flex-shrink">
                <li class="nav-item active row">
                    <a class="nav-link col-auto" href="">
                        <img src="~/archivos/logo.jpg" class="rounded" width="90" height="90" />
                    </a>
                    <a class="nav-link collapse navbar-collapse btn-warning border rounded d-flex justify-content-center col-6" asp-area="" asp-controller="Home" asp-action="Index">
                        <i class="fa-solid fa-left-long text-white" style="font-size:3vw;"></i>
                    </a>

                </li>
            </ul>

            <ul class="navbar-nav mx-auto flex-shrink">
                <li class="nav-item text-center justify-content-center">
                    <div>
                        <h4 class="h1">Analysis tools</h4>
                        <small class="h2 text-warning">SPC Tool</small>
                    </div>
                </li>
            </ul>

            <ul class="navbar-nav mx-auto flex-shrink">
                <li class="nav-item">
                    <div class="row">
                        <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="padding:0px">
                            <div class="short-div">
                                <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Logs">
                                    <div class="btn btn-success">
                                        <i class="fa-solid fa-table"></i>
                                    </div>

                                </a>
                            </div>
                            <div class="short-div">
                                <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Login">
                                    <div class="btn btn-dark">
                                        <i class="fa-solid fa-key"></i>
                                    </div>

                                </a>
                            </div>
                        </div>
                        <div class="col-lg-5 col-md-2 col-sm-3 col-xs-2">
                            <a class="navbar-link" href="">
                                <img class="w-100 h-100" src="~/Archivos/pren.png" />
                            </a>
                        </div>
                    </div>
                    
                </li>
            </ul>
            
            
        </nav>

And here’s the layout that I’m aiming for.
The expected layout

I’m kind of new with asking at the forum so i apologize if I’m ignoring any redacting/formatting rules.

I tried many examples around my searches (the one that I’m using right now for testing comes from a forum), and the ones that bootstrap has in their documentation but can’t get it just right, sometimes the navbar leans to the left without me modifying the margin or padding.

And I’ve tried the solutions from the forums in SO but the size and behavior of the elements inside the navbar items that I require to fit into the navbar layout seems to hold them together incorrectly.

EDIT: Here’s the codepen https://codepen.io/Daniel_ISC/pen/ExzQvyK