Linking a Wordpress submenu to a specific section of a page

I am utilizing a Wordpress menu to act as the primary navigation for my website. Each main item in this menu is a Page Type that redirects to other existing pages, with one of them containing submenus made up of custom links.

These custom links' URLs are div IDs from their parent page, creating a structured hierarchy within the menu.

For example:

  • About Us
    • Who we are
    • What we do
    • How we do

The issue I am facing is that when I am on the About Us page, these submenu links function correctly by scrolling to the designated sections. However, if I am on another page (such as the Homepage), the links do not redirect properly because there are no corresponding div sections on that page.

Any suggestions for how I can modify these URLs to address this problem? Your help is greatly appreciated.

htmlcsswordpressmenu

Answer №1

In order to make it function properly, you need to include the id tags in the URL (otherwise it will be seen as a relative link).

For instance:

  • Main page:
  • Section URL:

Answer №2

Imagine the URL for your about us page is "www.yoursite.com/about-us".

To directly navigate to a specific section of this page from an external site, you will need to include an anchor tag like this:

<a href='http://www.yoursite.com/about-us#who-we-are'/>

Therefore, when creating a custom link, you should use the full URL "" instead of just "#who-we-are".

Click on the link and observe the address bar.

Wordpress submenu link to a section of page

Answer №3

To achieve this, you will need to link the ids with specific sections on the pages you want to redirect to.

For instance, if your home page is http://www.example.com/

You can pass the id like this: http://www.example.com/about/#mission

                           http://www.example.com/about/#vision

These should correspond to the ids of the divs on the about page.

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

Struggling to get my layout perfectly centered

I've spent the last 35 minutes scouring this site, and I know the answer is probably right in front of me but I can't seem to figure out how to center my layout. It's a straightforward setup with a container div, left div for the menu, and ...

csshtml

Instructions for integrating a select query within another select query in Codeigniter

I have a question regarding two tables shown below: /* questionnaire table */ | q_id | q_title | | ------- | ---------------------- | | 1 | What is your name? | | ------- | ---------------------- | | 2 | What is your gend ...

phphtmlcodeigniterselect

What steps do I need to take in order for my web controls to show up on top of an activex

I'm currently facing a challenge in designing a website with activex reports. Even though I recommended switching to another reporting tool or technology, we're still using activex for now. I've noticed that graphical activex objects displa ...

htmlactivexz-index

IE11 adds additional spacing around list elements

I am encountering a peculiar issue with how Internet Explorer 11 handles unordered lists, unlike other browsers. Below is a comparison of how the ul appears in IE11: And here is how it looks in Chrome and other browsers: .iconImgBA { max-width: 2.4r ...

htmlgoogle-chromelesshtml-listsinternet-explorer-11

Setting the width of an SVG element to match the width of the <text> element inside it

Within this JSFiddle project - https://jsfiddle.net/xtxd6r8t/ - there is an <svg> element containing text inside a <text> tag. Upon inspection of the <svg> and delving into the <text> element, it's noticeable that the width of ...

htmlcsssvg

Dynamic Motion of HTML Elements

I'm facing a challenge where the elements on my website do not stay in place within their designated sections when I zoom out. Despite my efforts to inspect and adjust the properties of these elements, I can't seem to pinpoint the root cause of t ...

htmlcss

Unable to retrieve file on Linux system through PHP

<?php // Ensuring that an ID is provided include('include/function.php'); if(isset($_GET['id'])) { // Retrieving the ID $id = intval($_GET['id']); // Validating the ID if($id <= 0) { die('Th ...

javascriptphphtmlmysqlcss

Checking for the Existence of a Class Element within a String using JavaScript

Within my web project, there is a scenario where if a user has been logged out in one browser tab, they will automatically be redirected to the login page in any other browser tab after interacting with that page (such as clicking on a link). However, this ...

javascriptjqueryhtmlajax

Fullscreen images stop from getting stretched

I am facing an issue with making images full-screen without them stretching on larger screen sizes. Is there a technique to keep the image size consistent regardless of the screen dimensions? I am aware of how background images can be made fullscreen usi ...

htmlcss

Adjusting the height of a div according to the changing heights of other divs

The sidebar contains a search field, two lists, and a text div. The height of the search field and text div always remains constant, while the heights of the two lists vary dynamically. I am exploring the possibility of using only CSS to make the height o ...

htmlcss

Is there a way to enable text selection on a jQuery draggable div?

I utilized jQuery to make a specific div draggable, but I've encountered an issue. Inside this draggable box, there is some important text that I need to be able to copy and paste. However, whenever I click on the box, it triggers the dragging action ...

javascriptjqueryhtml

Overlaying images with cropped elements

When uploading an image on a webpage, I want to display a preview of the image. I am looking to create an overlay that showcases the image in a rectangle at the center, surrounded by a semi-transparent background outside the rectangle. Something resemblin ...

javascriptcss

Issues with Django image display in media despite proper configuration settings

I'm having an issue uploading images from a form and displaying them on another template because the images in media are not being found. Model Definition class Upload(models.Model): image = models.ImageField(upload_to='images/') View ...

pythonhtmldjango

Tips on modifying the background color of a read-only field in an edit form

Changing the background color of a readonly field in the edit form of Free jqgrid can be a challenge. One potential solution involves specifying a style: .jqgrid-readonlycolumn { background-color: #FFFFDD; } This style is then used in the colmodel e ...

jqueryhtmlcssjqgridfree-jqgrid

Issue with Spyscroll functionality

Having some trouble getting Spyscroll to work. Can anyone help me identify the issue? I've been at it all day... I've attempted both the javascript and html+css setups, but neither seem to be functioning correctly. Manually adding the "active" c ...

jqueryhtmlcsstwitter-bootstrap

What is the best way to showcase just 5 photos while also incorporating a "load more" function with

Is there a way to display only 5 images from a list on the first load, and then show all images when the user clicks on "load more"? Here is the code I have: $('.photos-list').hide(); $('.photos-list').slice(1, 5).show(); $ ...

javascripthtmljquerycss

Adjust the vertical alignment of an HTML element

I've been trying to make an image move using the variable counter, but for some reason, it's not working. If I set document.getElementById("movee").style.top directly to a number, it works fine. Combining it with the counter variable should theor ...

javascripthtml

Align two divs to the left and the other one to the right

Here is the current structure of my code: <div style="height: 100px; Width: 200px;"> <!-- Container --> <div style="float: left; height: 50px; Width: 100px; background-color: ...

htmlcss

Incorporating CSS animations into Vue.js while an API call is being made

When a specific icon is clicked, an API call is triggered: <i class="fas fa-sync" @click.prevent="updateCart(item.id, item.amount)"></i> I am looking to add an animation to rotate the icon until the API call is complete or ...

cssapivue.jsvuejs2vue-component

User information in the realm of website creation

Can someone provide insight on where user data such as photos, videos, and posts is stored? I doubt it is saved in an SQL database or any similar system. ...

javascripthtmlmysqlnode.jsdatabase