Jump to content
Sign in to follow this  
Heather G

Custom Menu Not Linking to Anchor

Recommended Posts

Hi. I need some advice. I have a one page website. I have made anchor links for different sections of the site using the following code

 

<a href="http://www.google.com"><div>Some content here</div></a>

 

I typed in the website instead of google and the page section name instead of some content here

I then went to the custom menu and keyed in the web address followed by /#NameofPageSection

 

The menu will not work. I have tried different combinations of name id and div for marking the anchor. Anybody have any ideas? Please help.

  • Like 1

Share this post


Link to post
Share on other sites

You are building anchor links within a page right?

 

On the place in the page where you want the anchor to be put this:

<a href="#nameofanchor"></a>

 

Then to link to this location use this (remove the spaces in the URL first):

<a href="http:// yoursite. com/#nameofanchor">LinkText</a>

or

<a href="http:// yoursite .com/specficpage#nameofanchor">LinkText</a>

 

Jodie "Raisin cookies that look like chocolate chip cookies are the main reason I have trust issues" Burdette

  • Like 2

Share this post


Link to post
Share on other sites

Thank you Jodie for the fast response. I tried that and it didn't work. However, when I went back to my menu it is deleting the url info i keyed in. I can key it in and hit enter or key it in and hit save menu and it still deletes it.

 

I am at a loss as to why it automatically deletes the url info.

  • Like 1

Share this post


Link to post
Share on other sites

Researched the problem and found it isn't uncommon. https://wordpress.org/support/topic/custom-menu-is-deleting-itself Other people have had success just deleting the custom menus and starting from scratch again. I deleted the custom menu and redid it. It accepted each one but when i saved the menu and went to view my changes sure enough it had deleted the menu url again.

 

Any advice would be awesome!! I have tried for three days to figure this out and nothing is working. Thanks in advance.

Share this post


Link to post
Share on other sites

Hi Heather,

 

Sorry to hear about the problem you are having. If I'm correct, you have a one page website and want the menu to scroll down to the element in the relevant section?

 

First Step is to setup your menu with an anchor Tag within the menu itself. Let's assume you want to call the anchor "services":

 

services-anchor.png

 

Second you need to go into text edit mode on your editor and add the html to support this anchor. Whatever element you want to add the anchor to, you need to put an id attribute with a value of "services" or whatever anchor name you are using.

 

services-id.png

 

In this case, I used a div and put the id inside the tags to support the anchor.

 

This should cause the menu to skip jump to that section. Note your theme will need extra script support for a smooth scroll. If you are using a one page theme, it probably has this built in.

services-id.png

services-anchor.png

  • Like 3

Share this post


Link to post
Share on other sites

this is what is keyed in for the anchor link

 

http://<a href="#799CrystalSpringDrive"></a>

 

 

this is the code in text editor

 

href="http://<a href="#799CrystalSpringDrive"></a>">799 Crystal Spring Drive $179,500</a>

 

 

this is the url I keyed into the custom menu

 

<a href="http://mountainlandvirginia.com/#799CrystalSpringDrive">LinkText</a>

 

 

when i save the menu and go back to look at it the custom menu url is automatically deleted.

 

i keyed in the following code in text editor

post-38006-0-05501400-1462689729.png

href="http://<a href="#799CrystalSpringDrive"></a>">799 Crystal Spring Drive $179,500</a></strong></span></h4>
<div id="799CrystalSpringDrive> <h1>799CrystalSpringDrive</h1></div>

 

I have infinite scroll on my theme which is one column theme

still automatically deletes the custom menu

 

Am i missing or overlooking something?

 

 

thank you

Share this post


Link to post
Share on other sites

Hi Heather,

This could be a WP bug, but we should rule a few things out. I created a little video for you to show you how to an anchor with a custom menu should work. You can see it here: https://www.youtube.com/watch?v=fkutDw2jCrU.

 

Please note: 1) ignore class="pink" (e.g. <div id="anchor" class="pink">ANCHOR</div>). I added that so we could see the text easier. 2) my website has a fixed menu header, so when the anchor scrolls to the top, it goes under the menu header. Which is why in the vid I have to scroll down just a tad to see the ANCHOR.

 

If everything looks the same on your site as in the video, then try these next steps

1) make sure WP is up-to-date

2) Switch to the twenty-fifteen theme and see if you get the same results. If that works, then you know it's a theme conflict.

3) Deactivate all of your plugins and see if you get the same results. If it works, then activate the plugins one at a time to find the conflicting plugin.

 

Let me know how it works out

 

Good luck

  • Like 4

Share this post


Link to post
Share on other sites

hi I changed the theme to twenty fifteen. Tried all different variations with no luck. Then today there was a message that said the latest update didn't install correctly So I reinstalled the update. Have tried different variations again with no luck.

 

saw this info and not sure if it would really work putting it in the Text editor

 

So, we can do away with the empty anchor element at the top of our pages and instead do this:

<body id="www-domain-tld">...<p><a href="#www-domain-tld">- Back to Top -</a></p>...</body>

Trying to be all kinds of accessible with the “Jump to Content” link? Try this:

<p>	<a href="#content">- Jump to Content -</a></p>...<div id="content">	<p>Neat, huh?</p></div>

However, the good news is that now the menu link will work enough to send you to a 404 Error Page. lol

 

Thanks for all the advice

Share this post


Link to post
Share on other sites

function twentyfifteen_nav_description( $item_output, $item, $depth, $args ) {
if ( 'primary' == $args->theme_location && $item->description ) {
$item_output = str_replace( $args->link_after . '</a>', '<div class="menu-item-description">' . $item->description . '</div>' . $args->link_after . '</a>', $item_output );
}

return $item_output;
}

 

since the above code is in my themes php is there another possible way of wording the code that might work?

Share this post


Link to post
Share on other sites

Update

 

Menu is now working. Thank the Lord!

 

After reinstalling the latest update of wordpress after switching to the twenty fifteen theme. Deleting every plugin I had installed recently.

 

This is the coding that I had to use.

 

Anchor Link: http://<div id=”Crystal”class=”divstyle”

 

Text Editor Code: <h3 id="Crystal"><span style="color: #0000ff;"><a style="color: #0000ff;" href="http://<div id=”Crystal”class=”divstyle”">799 Crystal Spring Drive $179,500</a></span></h3>

 

Custom Menu URL: http://www.mountainlandvirginia.com/#Crystal

 

Thank you everyone for the help and advice! I really appreciate it! Have an awesome day!

  • Like 1

Share this post


Link to post
Share on other sites

I greatly apologize for this. When I was trying different things originally i added this step but didn't think it actually did anything since the menu didn't work.

 

Until today. When I needed to add another item to the menu

In the custom menu box

Under Link Relationship (XFN)

Key in the following

 

m_PageScroll2id

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Want to Become a VA?
    Invest in The VAC!
    How Do YOU Startup A

    Virtual Assistant Organization Association
    Upgrade Your FREE Account & Receive Today...
    * Access to Our Bus JOB Board *
    * Group Coaching & Training*
    *Training Tracks*
    * Private Mastermind Area *
    * Business Templates *
    * Contracts & Forms*
    * Plus VAinsider Perks! *
    UPGRADE HERE


    Virtual Assistant Organization Association

    Virtual Assistant Organization Association







    HootSuite - Social Media Dashboard




×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use.