-
Posts
-
hello there,
i’m using a ONE PAGE layout for my Home page. however … i have ONE LINK in my main menu that does take the user to a separate page.
here is my problem:
i am using ANCHORS to move freely throughout the one-page home page, without having to cause the page to reload with every link click.
this issue is … on the one separate page (i have it called episodes – a block page) … the anchors do not work. of course. because the anchors are relative to the HOME page.
IS THERE A WAY TO MANIPULATE THE MAIN MENU LINKS ON PAGES OUTSIDE OF THE HOME PAGE? SO THESE LINKS CAN BE DIRECT LINKS BACK TO THE HOME PAGE WITH ANCHOR?
links are included in private section.
thanks,
chris
Hi chris,
I am getting all these errors in JavaScript, so that even the anchor navigation did not work. You might wan tot address these first.
Best regards,
Victoriathanks … i have no clue what you’re talking about. my site loads up fine on my mac via safari, firefox, and chrome. i don’t get a single error.
are you able to expound?
chris
OKAY, I THINK THERE WAS A MISUNDERSTANDING.
i know the anchor links DO NOT work on the Episodes (Blog) page … that is why i am asking this question.
the anchors ONLY work on the HOME page … because that’s where the anchors are! Obviously, the anchors are not going to work on the Episodes/Blog page if it’s a separate page and the anchors are on the home page.
now that we’ve gotten that out the way…
IS THERE A WAY TO CHANGE THE MAIN MENU LINKS ON NON-HOME PAGES? (i.e., create a different main menu for non-home pages?) SO THESE LINKS CAN BE DIRECT LINKS BACK TO THE HOME PAGE WITH ANCHOR?
thanks,
chris
any help please???
there’s got to be an answer to this.
i use relative anchors on the home page. i have a separate blog page. HOW do i make the MAIN MENU links as “external” links with anchors to go back to the home page?
am i the only one that needs this feature? OR is there a better way of getting around that i haven’t thought of?
thanks,
chris
You have a menu with say three buttons.
Button one anchors to a section on the home page with id of one (ie #one)
Button two anchors to a section on the home page with id two (ie #two)
Button three goes to a new page (ie http://www.site.com/new-page)All works fine and dandy on the home page but when you click button one on the new page it is looking for the anchor #one
That doesn’t exist so button doesn’t work.Correct?
On the button rather than setting the link as #one try http://www.site.com/home-page/#one
So you will be putting whatever your home page url is with #one at the endThat means no matter page you are on clicking button one will load the home page and go to anchor one.
If you are only anchoring to something on a page from that page #one works fine. If you want to anchor from another page to a page you have to use the page url then the anchor
Hope that helps
TJ
hey there, jt. thanks for chiming in on this one! i appreciate you.
you are correct in what my problem is with the anchors.
putting in the direct links with anchors is what i tried first. believe me, i was hoping this would work. while it DOES work, it re-loads the home page each time you click on the menu link (direct links with anchors). it doesn’t smoothly transition and scroll nicely around the one-page. so, that isn’t really an option for me.
i was hoping to be able to modify the menu … ONLY on the separate page to bring you back to the one-page with direct links followed by anchors.
if that isn’t possible, i can try and look for another solution. hmmm.
thanks!
chris
Hmm I’ve done the full url and anchor before and it has scrolled nicely. So many factors can result in jerky scroll. If it isn’t an option lets move on…
How about having two sets of buttons in the same menu. One set for use on home page with anchors and one set for use on other page with whatever links you like.
Then use css to show / hide a set depending what page you are on?Thoughts?
TJ
sounds like that will work for me!
i assume you know this code to use on home page … and the on the second page … to enable/disable buttons via css depending on which page you’re on?
thanks for the idea! you’re a genius!
chris
of course….
You need two things
1) The page id of both pages
2) The menu id’s of the buttons.you then use something like….
.page-id-xxx #menu-item-xx {display:none;}
You don’t need to worry about setting an item to display as that’s the menu standardRinse and repeat for each menu item.
Working on a live page is way easier… hint hint ;)
TJ
thanks tj!
okay, i’m going to sound pretty dumb here.
where do i get the page id and menu id from?
is the page id the title of the page? and do i put in a title attribute in for the menu buttons? OR is there an id number given to each page and menu element?
sorry, i’m relatively new to wordpress. did web design YEARS ago…
thanks!
chris
If you are using chrome you can right click on a page and inspect any element.
A new window will open with the html structure on the left and css on the right.
You can live edit a page, check resources, console errors etcIE and firefox it’s called inspect element but works the same way
Image below looks complicated but isn’t really.
Long red box shows page-id t’other red box show menu-idTJ
wow! learning all kinds of good things from you!
WELL … IT WORKED!! i was able to successfully take out a menu item on the home page.
ONLY ISSUE … menu formatting. the logo is typically far left. and all social icons / menu is typically far right.
when i put the css in to remove the menu item, everything joins together in the center.
almost there! :) any ideas?
chris
actually … it squeezed in the site a little more to make it a little skinnier. ha.
also, the special headings/titles changed font. so crazy.
The logo and menu items sit in different divs so making a change in one shouldn’t affect the other.
So long as you are attacking the top level menu item id it should work perfectly.
TJ
Usually errors like that are due to something missing from the css. You haven’t closed off a tag or missed a semi colon somewhere.
that’s what i would think! :)
funny … the only line i’m added to the quick css is:
.page-id-206 #menu-item-3262 {display:none;)
makes no sense that it would mess with the formatting of the menu. and change the font of the headings throughout the rest of the page.
odd.
well, thanks again for helping!
i’ve got to move on to other work items today.
be blessed,
chris
The last bracket of the code should be a } not a )
That is causing the css to go haywire.
My bad as it was in my original post.TJ
ha!! that was it!! i can’t believe that … just the little )
dude, you’re awesome. thanks so much!
chris
TJ, thank you for helping me to solve this problem! I can mark this one off my list.
TJ, would you mind checking out ONE MORE item that I have? I would greatly appreciate your input, friend!
Moderators, this “Anchors” question has been solved by TJ. You can close it.
Thanks,
Chris
- The topic ‘One Page Home Layout with ONE LINK in Main Menu to Separate Page – Anchors?’ is closed to new replies.