Tips for personalizing the WordPress menu options located in the header

After creating a WordPress menu and displaying it in the header with a total of 6 pages or menu items, I now want to split the menu so that 3 items appear on the left side and the other 3 on the right. However, my lack of knowledge in stylesheet styling is hindering me from achieving this division. Below is the code for the header:

<nav class="navbar navbar-expand-lg" style="background: #00C9C9;padding: 20px;">
    <div class="container">
 <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>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">

<?php
wp_nav_menu( array( 
'theme_location' => 'my-custom-menu', 
 'depth'             => 2,
            'container'         => 'div',
            'menu_class'        => 'navbar-nav mr-auto',
            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
              'list_item_class'  => 'nav-item',
'link_class'   => 'nav-link m-2 menu-item nav-active'
            )
);

?>
</ul>
</div>
</div>
</nav>

Answer №1

If you prefer to use two separate menus, that would be ideal. However, if for any reason you are unable to do so, here is a workaround using the CSS property margin-left: auto;

ul {
display: flex;
align-items: center;
justify-content: flex-start;
list-style: none;
width: 600px;
background-color: red;
padding-left: 0;
}

li {
margin: 0 15px;
}

li:nth-child(4) {
margin-left: auto;
}
<ul>
<li> Link 1 </li> 
<li> Link 2 </li> 
<li> Link 3 </li> 
<li> Link 4 </li> 
<li> Link 5 </li> 
<li> Link 6 </li> 
</ul>

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

React Router is failing to identify a correct path and is displaying a NotFound error

I am currently in the process of developing a lyrics fetcher application using ReactJS, Redux, and React router. The app features a landing page where it displays the top 10 tracks for the user's country, along with a search form to find specific trac ...

What are some best practices for integrating mavon-editor as a markdown editor in your Vue3.js applications?

I attempted to integrate mavonEditor as a markdown editor in my most recent vue3.js application while using Vite for building Vue.js apps. Initially, I followed the mavonEditor documentation but encountered an issue where the mavon component was not define ...

Handling synchronous reception with Socket.io

Dealing with socket.io has been quite frustrating lately. I've spent about an hour trying to tackle this issue, but there isn't much helpful information available online. Due to JavaScript's synchronous nature, finding relevant details on th ...

Retrieve all records from a table using Prisma client

I need to retrieve all data from a table using Prisma. How can I achieve this? (SELECT * FROM application) const applications = prisma.application.findMany({ // Retrieves all fields for the user include: { posts: { ...

Is it possible for a parent element to inherit the margin of a child element in HTML and

strong text It's puzzling to me why my header shifts downward when I add a margin-top to its child element (.navigation). When I apply padding, the header remains at the top. Can someone please explain why this happens? I've read that setting ov ...

Tips on sending image information from node.js to an HTML5 canvas?

Currently in the process of developing a demo featuring a node.js C++ plugin, I encounter an issue with the conversion of an ARGB bitmap to RGBA format for HTML5 canvas integration. The performance of this conversion process is exceedingly slow, prompting ...

Does the Error page in Next JS 13 fail to properly manage fetch API errors?

After referencing the documentation for Next.js with app router, I followed the instructions to create an error.tsx page within my app folder (app/[lang]/error.tsx). This file contains the code provided in the docs. Additionally, I included some API calls ...

Using jQuery's toggle function with a double click event to change the display to none

A div I created has the ability to expand to full screen upon double click, and I now wish to implement a toggle function so it can return to its original size when double clicked again. Initially, the code successfully increased the size of the div. Howe ...

Fixing AngularJS $routeProvider JSHint issues

I need help with this angular script (function() { 'use strict'; var myApp = angular.module('MyApp', [ 'ngRoute', 'MyApp.controllers.Main' ]); myApp .con ...

Remove a Row from a Table by Clicking a Button with Ajax

I currently have an HTML table with 4 columns: SKU Group, Group_ID, Edit button, and Delete button. My focus at the moment is on implementing the delete functionality. I want it so that when the delete button is clicked, a confirmation box appears. If "OK" ...

Discovering the element's class within an each loop

I am currently working on a dynamic menu system that changes the style of the active page item in the menu. My approach involves utilizing separate body classes for each page and then iterating through the li elements in the menu to find a match with the b ...

Conceal dynamically generated div elements created with ngIf

I am currently working on initializing this div using ngOnInit in Angular ngOnInit(): void { let optTemp = ''; for (let data of arrOption) { optTemp = optTemp + '<option>' + data.trim() + '</option> ...

Looking to swap out an image on a bootstrap carousel with a click event?

I have a bootstrap carousel featuring 3 images, each with a caption. My goal is to make it so that when you click on the caption of the first carousel image, the image will change to a gif. I've attempted to achieve this using basic JavaScript, but so ...

Can anyone recommend a high-quality jQuery lightbox replica?

Key Features Needed: Customizable with CSS Capable of handling forms, not just images Extensively documented Please provide any recommendations and suggestions for suitable options. Thank you in advance ...

Guide to incorporating CSS styles into DataPager

Seeking guidance on customizing a ListView with a DataPager control. Currently using a plain numeric based layout, wondering if I can apply CSS styles to the numbers like adding a 1px solid border around each number. Any suggestions or tips would be highl ...

Exploring the differences between server-side rendering and client-side rendering in Express using Pug

I find myself in a state of confusion when it comes to distinguishing between what is considered client-side and server-side. Currently, as I develop a website using Pug for my HTML pages without any external files being loaded into the client's brows ...

Tips on turning a javascript file into an executable .exe file

After researching online, I found various responses about converting a JavaScript file into an exe with arguments passing into it. However, I only have the JavaScript file and need to use it in my automation framework alongside C# and Selenium (I am new to ...

Error message: When attempting to access firebase data in our app, an uncaught TypeError is thrown, stating that it is unable to read properties of undefined while trying to access '

While using Firebase 9 and Vue3, I encountered an error when trying to access data from a document. Even though the data was correctly logged in the console, it was showing up as undefined. Additionally, I made sure that the data was loaded before attempti ...

Tips for properly setting parameters in a datetime picker function

I have a datetimepicker function and an array of dates that I need to iterate through. Depending on certain conditions, I need to add 15 minutes or 20 minutes to each date in the array. My question is, how can I pass the values (dates) from the array to t ...

Encounter an Internal Server Error while using Laravel 5.4

I am encountering an issue while attempting to implement ajax search in my laravel project. I have included the controller and JavaScript code related to this problem below. Can you please take a look and let me know what may be causing the error? pu ...