I am faced with a dilemma regarding my navbar design. Here is an image of my current navbar layout:
I am attempting to align the components within the navbar to resemble the following design:
Here is the HTML code I am using:
<!-- Navbar -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar">
<div style="text-align: center; list-style: inside;" class="container-fluid">
<!-- Brand -->
<a class="navbar-brand" href="index.html">
<img src="assets/img/logo.png" width="135px" alt="">
</a>
<!-- Collapse -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Links -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left -->
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a style="font-family: 'Tajawal', sans-serif; font-size:18px; color: #0f3832; font-weight: bold;" class="nav-link border-bottom border-dark rounded-left" href="#howtocon" target="_blank">طريقة المشاركة</a>
</li>
<li class="nav-item">
<a style="font-family: 'Tajawal', sans-serif; font-size:18px; color: #0f3832; font-weight: bold;" class="nav-link border-bottom border-dark" href="#branchess" target="_blank">فروع الجائزة</a>
</li>
<li class="nav-item">
<a style="font-family: 'Tajawal', sans-serif; font-size:18px; color: #0f3832; font-weight: bold;" class="nav-link border-bottom border-dark" href="#about" target="_blank">عن الجائزة</a>
</li>
<li class="nav-item">
<a style="font-family: 'Tajawal', sans-serif; font-size:18px; color: #0f3832; font-weight: bold;" class="nav-link border-bottom border-dark rounded-right" href="#headerstart">الرئيسية
<span class="sr-only">(current)</span>
</a>
</li>
</ul>
<!-- Right -->
<ul class="navbar-nav nav-flex-icons">
<li class="nav-item">
<a style="background-color: #0f3832;font-family: 'Tajawal', sans-serif; font-size:18px; color: #fff; font-weight: bold;" href="/login" class="nav-link border border-dark rounded"
>
<i class="mr-2"></i> تسجيل الدخول
</a>
</li>
<li class="nav-item">
<a style="background-color: #0f3832;font-family: 'Tajawal', sans-serif; font-size:18px; color: #fff; font-weight: bold;" href="/register" class="nav-link border border-dark rounded"
>
<i class="mr-2"></i>تسجيل جديد
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
I am striving to achieve this design layout:
Despite my efforts, I have been unable to achieve the desired outcome. Would appreciate any helpful suggestions or solutions. Thank you.