Issue with WordPress navigation menu bug

On my website, I have implemented WP nav menu and it seems to be functioning correctly. However, I am facing an issue with the sub link under the home link. The screenshot shows the problem clearly.

In the provided image, the "support our work" sub link appears to be displaying properly. On the other hand, the Home sub link is not showing up as expected. I would like for "News, Calendar, Like Us On FaceB" to be listed under the HOME link in the same way as "Support our work". It seems that the Home Page is not accepting the sub links.

csswordpresshtml

Answer №1

If you want to set a static page as your home page, it is completely doable.

To accomplish this, navigate to Settings, Reading, Front page displays. From there, select your designated "Front page," which will then be showcased in the menu as the primary link for your homepage.

Additionally, within the functions.php file of your theme, include the following code:

function my_page_menu_args( $args ) {
    $args['show_home'] = false; // Exclude the 'home' link from displaying in the menu.
    return $args;
}
add_filter('wp_page_menu_args', 'my_page_menu_args', 1000);

Upon implementation, the submenu items associated with the chosen page will now appear as subpage links within the menu.

Answer №2

Consider incorporating theme_location => 'secondary'

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

The banner <div> appears in Chrome but is not visible in IE9

I'm facing an issue with a banner div under my navigation. It seems to show up in Google Chrome but doesn't appear in IE9. Below is the HTML and CSS code: HTML: <div class="content"> <div class="slide-banner"></div> ...

csshtmlinternet-explorer-9

The sluggish rendering speed of AngularJS is causing a delay in displaying the loader

Within my application, I have tabs that load a form in each tab with varying numbers of controls. Some tabs may contain a large number of controls while others may have fewer. My goal is to display a loader while the contents are being rendered into the HT ...

javascriptjqueryhtmlangularjs

Retrieve the text content and identification value from each list item

I've found myself in a frustrating situation where I have an unordered list structured like this: var liList = $("#first").find("li"); var append = ""; for(var i =0; i< liList.length; i++){ var item = $(liList); append += "<option value ...

javascriptjqueryhtml

Enhance Your Navbar in Bootstrap 3 by Creating Vertically Expanding Links Relative to Brand Image Dimensions

To best illustrate my issue, I will begin with a screenshot of the problem and then explain what I aim to achieve. Here is the current state of my navbar: Currently, the text of the links on the right side is positioned at the top. Additionally, this is h ...

htmlcsstwitter-bootstrap

One DataTable cell with a unique feature: two buttons of varying sizes

Currently, I am working with a DataTable that contains a column with two Bootstrap-styled buttons. Strangely, the button on the right appears slightly smaller than the one on the left. Picture illustrating the issue Here is the code snippet: <div cla ...

htmlbuttonbootstrap-4

CSS - spacing anomaly among inline-block items

I am facing a strange issue with the arrangement of elements in my container div. I have set them to display: inline-block, and they are supposed to expand horizontally if the contents exceed the device width. However, there is an unexpected margin between ...

csshtml

Preventing JavaScript from refreshing the page when using location.replace for the second time with the identical URL

I've encountered an issue while using location.replace to reload a page that relies on GET variables for displaying a success message. The problem arises when the URL specified in the location.replace call is identical to the current one, causing the ...

phpjavascriptjqueryhtmlajax

What is the best way to eliminate the appearance of the blue square that shows up when the button is clicked on smaller screens?

When testing my project on different screen sizes in Chrome dev tools or on my phone, I noticed a blue square briefly appearing around the button when it is clicked. I attempted to remove this by setting outline: none or outline: 0 on various pseudo-classe ...

htmlcssbuttonclickoutline

Creating a Vertical Navbar Dropdown in Bootstrap 3.0 Without Appending to the Last List Item Only

Currently, I'm in the process of creating a panel layout that features an elegant vertical navbar. Although everything seems to be aligned correctly and I've managed to implement a dropdown menu in a vertical layout, it keeps appending to the las ...

javascriptjqueryhtmlcsstwitter-bootstrap

The height of the footer element is gradually dwindling

Have you ever wondered why a footer element mysteriously shrinks in height when the browser window is resized? I attempted to create a fiddle with my code, but unfortunately, it's not replicable on JSFiddle so I won't be sharing it. This is how ...

htmlcss

Encircling a particular group of cells with a border

I have completed the component with a table layout. My current challenge is figuring out how to surround a range of selected cells with a border, similar to the first cell in the group shown below: https://i.stack.imgur.com/5Euht.png I attempted using d ...

javascripthtmlcss

Issues encountered in loading JavaScript with jQuery script

I am facing an issue with my jQuery script not loading correctly. When I click on the calculate button, nothing happens as expected. I made sure to copy and paste jQuery directly into the file for offline use, and also created a personal console due to res ...

javascriptjqueryhtmlcss

converting an entire HTML layout into a PDF using JavaScript

I am attempting to convert an HTML design to PDF using the following script: <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>. I have designed a table to my liking, here is how it looks in HTML: https://i. ...

htmlangularjsjspdf

Display an image from a Google image search when hovering over a specified data attribute

My goal is to add a code snippet that will assign a class of "hoverme" to a table cell. When a user hovers over that cell, an ajax query will be triggered using the data attribute containing information stored there to perform a Google search. Below is a ...

phpjqueryhtmlmysqlajax

Use jQuery to retrieve HTML content excluding comments

Take a look at the code snippet below. HTML: <div> <p>sdfsdfsfsf</p> <!--<p>testing</p>--> </div> JQUERY $(document).ready(function(){ alert($("div").html()); }); OUTPUT <p>sdfsdfsfsf</p> & ...

jqueryhtmlcss

In PHP, what is the best way to close the HTML tags found in this array?

I am struggling with an array that contains HTML tags and I need to create a formatted output using a PHP function. However, I am having trouble closing the tags correctly and would appreciate some assistance. The existing array is structured line by line ...

phphtmlarraystagsoutput

How can we adjust the flex values to ensure the label displays properly on a narrow container width?

The labels in the left column of the form are initially sized correctly, but shrink when there is not enough room. However, there's a discrepancy in label size between rows with 2 items and rows with 3 items. body { font-family: Arial; font-siz ...

htmlcssflexbox

What is the process for creating a duplicate element within the target div after the original element has been dropped?

Imagine a scenario where the "HI" div is dragged into the "DRAG HERE" div, causing the "HI" div to be removed from its original location. What if, instead of disappearing, dragging the "HI" div to another location generated a new "HI" div? /** * Fu ...

javascripthtml

Add Text to Bootstrap Modal Window

The bootstrap modal body is not containing all of my content and some of it is overflowing. <div class="modal fade" tabindex="-1" role="dialog" id= "blockModel"> <div class="modal-dialog"> <div class="modal-content"> < ...

jqueryhtmlcssbootstrap-modal

Saving user-generated inputs within a React.js component's state, focusing on securely handling passwords

Curious about forms in React.js? I don't have any issues, but I'm wondering if there are potential flaws in my approach. I've set up a basic form with two inputs for email and password: <input type="email" name="email" value= ...

javascripthtmlreactjs