Tips for aligning the elements in the navigation bar in the center

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>
        &nbsp;
        <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>
        &nbsp;
        <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>
        &nbsp;
        <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>
&nbsp;            <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.

Answer №1

To adjust the margin of ul, simply switch from ml-auto to mx-auto. Check out the code snippet below:

<ul class="navbar-nav mx-auto">

Answer №2

Consider using the following CSS snippet:

.navbar-nav.mr-auto {
  margin-left:auto;
  margin-right:auto;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Session availability extends to subdomains, even though it may not be visible in a physical

Currently in the process of building a website Red Sec using a single account for all subdomains: Latest Updates Community Forum Personal Blog News Feed Support Us All pages share the same layout with different content by linking them to . Below i ...

Can you find a method to retrieve the current page on a dashTable?

I am facing a challenge with my dashtable which contains over 5000 records and is paginated to load faster. However, I have noticed that when I set the page size to 5000, the loading speed decreases significantly. I have implemented a function that retriev ...

Multiple hover highlighting techniques

Recently, I came up with an interesting concept for providing user feedback. My idea is to have a menu where hovering over it highlights an image that corresponds to the menu item, or vice versa - hovering over an image will highlight the corresponding men ...

The nested div escapes from its parent div despite the application of clearfix and the correct positioning of relative and absolute elements

Hey there, I have a question about using relative and absolute positioning along with applying clearfix to the main container in my code. The layout is quite simple - a nav-bar with a drop-down menu at the top, followed by a hero image spanning the screen, ...

The Owl-Carousel's MouseWheel functionality elegantly navigates in a singular, seamless direction

Issue at Hand: Greetings, I am facing a challenge in constructing a carousel using Owl-Carousel 2.3.4. My goal is to enable the ability to scroll through my images using the mousewheel option. Code Implementation: Incorporating HTML code : <div style ...

Dynamic Mat-select-trigger that automatically adjusts its size to fit the content

Currently, I am experimenting with an Angular Mat-Select that allows multiple selections. To display the selected values in the value field, I have implemented a custom Mat-Select-Trigger. My goal is to enable automatic resizing of the value field (similar ...

Tips for modifying style.display using JavaScript

On my website, the menu is structured like this: <nav id="menu"> <label for="tm" id="toggle-menu">Menu <span class="drop-icon">▾</span></label> <input type="checkbo ...

Occasionally experiencing issues with Vue data not displaying properly, yet occasionally it does work as expected –

Currently, I am using laravel 6.0 along with vue components in my project. After running npm run dev and refreshing the page, sometimes the 'name' data on the component fails to display. Interestingly, after a few more refreshes, it suddenly show ...

`Finding the appropriate place to define a variable within a React Component`

When attempting to declare the variable images within the component, I encountered an error. See the screenshot for more information: here. ...

Unusual issue in IE causing rendering problems in reporting services

Currently, I am creating a report using Reporting Services 2008, MVC 2, and Ajax as my development technologies. When I generate the report, everything displays perfectly if there is data present. However, if there is no data, the report body gets cut off ...

Header Dropdown Problems

Hey there, I have a question regarding my header setup. I currently have two headers in place: Whenever I click the notification button, the dropdown menu seems to disrupt the layout of the header. Here is a screenshot for reference: Below is the CSS cod ...

Change the color of specific elements in an SVG using React

Can I change the dynamic primary color from ReactJS to a specific class in an SVG file? If yes, how can it be done? Error.svg <!-- Generator: Adobe Illustrator 26.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1&qu ...

Guide on Updating the ColModel Dynamically in JAVASCRIPT/HTML using clearGridData, setGridParam, and reloadGrid Functions

I am trying to figure out how to dynamically change the colmodel of my grid using a function that is called by a SELECT. The reason for this is because my grid has different periods and needs to display either cost or tons based on user selection. Below i ...

Navigating Through Siblings with Http Agility Pack

When it comes to working with the HTML Agility Pack, it's easy to extract descendants and entire tables. However, how can you utilize this tool in a unique situation like the example below? ...Html Code above... <dl> <dt>Location:</dt ...

An issue occurred during the building of the module (from ./node_modules/sass-loader/dist/cjs.js) and resulted in

Within the app directory, I've created a new folder called styles > custom > loader.scss. In the styles.scss file, I included the following import: @import "styles/custom/loader.scss"; However, upon doing so, an error message appeared ...

CSS selector targeting an element based on the value of its table border

Is there a way to target a table on a webpage using a CSS selector? The table structure looks like this: <table border="1" width="560" cellspacing="0"> <tr> <td height="28" colspan="3" bgcolor="#FFFFF...> </tr> </table ...

How to disable scrolling for React components with CSS styling

When incorporating a React component into my HTML, I follow this pattern: <html> <body> <div id=app>${appHtml}</div> <script src="/bundle.js"></script> </body> </html> Within my application, th ...

How do I go about transferring a file using PHP?

I'm working on file uploads and saving them in a directory. However, I'm facing an issue: when a file is denied it needs to be deleted from the directory. This part is sorted out. But what if the file is approved? Should I use rename() or move_up ...

"Font Awesome appears to be malfunctioning on all versions of Internet Explorer and Microsoft Edge

Having trouble with Font Awesome icons and their compatibility with Internet Explorer. The icons display correctly on all other browsers, but on IE or Edge, there is a blank space where the icon should be. I noticed differences in styling when comparing ...

Ways to display the page's content within a div container utilizing Jquery

I am attempting to display the content of a URL page (such as ) within a <div> using JQuery, but so far I have been unsuccessful. Here is an example of what I am trying to achieve: <div id="contUrl"> .. content of google.fr page </div> ...