Please help: anchors dont work

I would appreciate some assistance.

site: www.threeco.de

The “pg”-anchors only work on front page navigation. As soon as you are on a sub-page or e. g. on a post-page they dont lead to the right “pg”-anchor back to front page. Any ideas?

Thank you!

Hello there,

Thank you for getting in touch. In order to make us easier to experience that situation, could you please post your URL here? So, we might able to provide a better assistance then.

Warmest regards,
Kharis

Hello there,

Please ignore my previous reply. I would like to apologize in advance for I didn’t see your site URL has been posted already.

Warmest regards,
Kharis

Hello there,

This problem might occur because the following elements height are detected after the jQuery script is completely loaded.

* #pg-220-0
* #pg-220-7
* #pg-220-6
* #pg-220-10
* #pg-220-11

Yet the target element of the anchor is detected once the page get loaded at the first. So it makes the top edge of the respective element doesn’t visible on the screen, forced by the another elements height.

As a solution, we should need to set default height for the elements I mentioned above. Try to add the following CSS code through the Simple Custom CSS plugin.

@media only screen and (min-width: 1025px){

  #slideshow{
    height: 702px !important;
  }

  #pg-220-9{
    height: 740px !important;
  }

  #pg-220-6{
    height: 364px !important;
  }

  #pg-220-2{
    height: 522px !important;
  }

}

@media only screen and (max-width: 1024px){

  #pg-220-6{
    height: 405px !important;
  }

  #pg-220-9{
    height: 859px !important;
  }

  
}

@media only screen and (max-width: 600px){

  #pg-220-2{
    height: 564px !important;
  }

  #pg-220-6{
    height: 580px !important;
  }

  #pg-220-9{
    height: 990px !important;
  }
  
}

@media only screen and (max-width: 400px){

  #pg-220-9{
    height: 1300px !important;
  }
  
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis

Hello Kharis! Thank you very much, it works almost perfectly.

does not work at all: coming from sub-page and choose “Angebotsportfolio” in navigation I do not end up at “Angebotsportfolio” (pg 220-0) but at “Home”.

does not work properly: coming from sub-page and choose “Kontakt” (pg 220-10) in navigation I end up in the last third of the “Kontakt”-section (not at the beginning) as well as I end up in the last third of the “Kontakt”-section when I choose “News” (pg 220-11) in navigation.

by the way: coming from sub-page and choose “Team” in navigation works perfectly!

Would appreciate if you could settle this, too.

Thank you very much for you help and impressive knowledge!

Beate

Me again: Obviously the “does not work at all”-problem is a mozilla reload problem. it works in internet explorer andin my laptop firefox. BUT: same problem here with ending up at wrong position. the top of the fonts are cropped or cut off. THX!

Dear Beate,

It might happen because the header area takes the top space of the current section which is being visible on the screen. I thought we should reduce its height once the page gets scrolled down by applying the following CSS code.

#masthead.site-header.float-header{
  padding-top: 0;
  padding-bottom: 0;
}

#masthead.site-header.float-header img{
  max-width: 80px;
}  

Let me know how it works for you.

I’ll wait to hear back from you regarding your stats.

Warmest regards,
Kharis

Hello Kharis!

The problem with the “Angebotsportfolio” (pg 220-0) now is solved. It works perfectly. Thank you very much.

But the other problem is still existing.:

>>does not work properly: coming from sub-page and choose “Kontakt” (pg 220-10) in navigation I end up in the last third of the “Kontakt”-section (not at the beginning) as well as I end up in the last third of the “Kontakt”-section when I choose “News” (pg 220-11) in navigation.>>

Perhaps you should look for yourself?

I made a screenshot at which point I end up when choosing “Kontakt” or “News” coming from a sub-page:

Sorry, obviously to place a picture does not seem to work. Is there a way I can place a picture here or could send you by mail?

By the way: Because of the changes in css the last section “3Co. Social Media” is totally lost (background with smartphone). Only the background is left, the heading and the icons are gone now.

Its complicated, isnt it?

Thank you!

Beate

No, forget about it, my fault. Social media section is back. Sorry for the inconvenience. Beate

Dear Beate,

Thank you for reporting.

> Sorry, obviously to place a picture does not seem to work. Is there a way I can place a picture here or could send you by mail?

You can post it here http://postimage.org/ (postimage.org)

Warmest regards,
Kharis

http://s19.postimg.org/unbzfxkhv/anchor_problem.png

Further testing resulted in different problems on laptop screen. There the “Kontakt” and “News” anchor from sub-page navigation to front page both leading to the news section on front page. I think the problem has something to do with screen size. But I am not able to test any screen size.

Thank you very much!!!

Beate

http://postimg.org/gallery/2rw5ldfw0/

this is the screenshot mentioned above.

THX. Beate

Dear Beate,

I’m afraid I can’t replicate the same issue on my 1440 x 900 screen resolution.

What screen resolution was that? You might need to check it here http://www.whatismyscreenresolution.com

Warmest regards,
Kharis

Dear Kharis,

first: Thank you very very much for your patience and caring! I would be totally lost without you. Honestly.

second: well, I think this is the right problem. I can test on 3 different resoulutions: 1920x1080 (pc with monitor 1), 1600x900 (pc with monitor 2) and 1366x768 (laptop). I end up in different sections of the page by using 3 different resolutions. But I wonder why on every of these 3 resolutions

sub-page to anchor pg-220-0 (“Angebotsportfolio”) is working well and
sub-page to anchor pg-220-6 (“3Co. Team”) is working well, too.

Contrary:

resolution 1366x768 sub-page navigation called “Kontakt” end up on front-page in the news section (pg 220-11)
screenshot res1366x768: http://s19.postimg.org/sgvmrgw03/res1366x768_anchor_problem.png

resolution 1600x900 sub-page navigation called “Kontakt”, as well as it is for “News”, both end up on front-page in the last third of the “Kontakt” section (pg 220-10).
screenshot res1600x900:http://s19.postimg.org/6iz5xogzn/res1600x900_anchor_problem.png

resolution 1920x1080 quite the same problem as res 1600x900
screenshot res 1920x1080: http://s19.postimg.org/yx4lhk4jn/res1920x1080_anchor_problem.png

And: I think it does not solve the problem to write a css statement for each existing resolution because I simply cannot test it and it is not important that the whole thing works on MY computer, it should work on every computer, tablet, mac, smartphone etc. of our costumers. In case of it would necessary to state a single css statement for each existing resolution I would be absolutely overstrained.

I really hope, that you can find a solution for this problem. A lot of work have been gone into the whole thing by myself (and by sydney programmers, too).

Ah, well. Any idea?

Warmest regards from icecold berlin,
Beate

Dear Beate,

I would like to apologize in advance for the delayed respond.

I thought we should need to improve it by using custom jQuery script.

Could you please try to do the following?

  1. Install and activate the Header and Footer Scripts plugin
  2. Go to Settings > Header and Footer Scripts panel
  3. Paste the following code into the “Scripts in footer:”
<script>
  
;(function($) {

  $(window).load(function () {

    var currentElem = $('#' + window.location.hash.replace('#', ''));

    if(currentElem) {
        $('html,body').animate({
          scrollTop: currentElem.offset().top
        }, 1000);
    }

  });

})(jQuery);
</script>
  1. Save settings

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Warmest regards,
Kharis

Hello Kharis!

Wow, I think you almost managed it! Now each redirection from a sub page to any front page section is working on each tested screen resolution. There is a little problem left. Each link ends up with fonts being cut off on top.

Have a look for yourself:
http://s19.postimg.org/d45yl454z/cut_off_fonts.png

I think this is again a css-problem but I can’t locate it and don’t want to do anything wrong with the css. I am sure you know!

Thank you very much indeed! You save my life.

Kindest regards, Beate

Dear Beate,

Thank you for updating me.

I thought we should add more top margin to the title of the target element. Could you please try to add the following CSS code?

#pg-220-0 .widget-title,
#pg-220-7 .widget-title,
#pg-220-6 .widget-title,
#pg-220-10 .widget-title,
#pg-220-11 .widget-title{
  margin-top: 30px;
}

You might need to adjust the value accordingly.

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Warmest regards,
Kharis

Well, fortunately you solved the problem. Great work Kharis!!! I am very happy and thankful for your excellent assistance.

May I ask you a further question that aroused yesterday? If not, please state.

My question: Is it possible to change “mainnav-mobi” into “mainnav” with 768x1024 (landscape and portrait) resolution? Although this is a tablet resolution it is big enough to use the ‘normal’ mainnav. I would appreciate this.

Thank you very much for solving the problem and answering my question in advance.

Kindest regards, Beate (fed up with boring christmas time in Germany)

Dear Beate,

Glad to know that the problem has been completely resolved.

> Is it possible to change “mainnav-mobi” into “mainnav” with 768×1024 (landscape and portrait) resolution?

Could you please try to add the following CSS code?

@media only screen and (min-width: 768px){
  #masthead .col-md-4.col-sm-8.col-xs-12{
    width: 30%;
  }
  #masthead .col-md-8.col-sm-4.col-xs-12{
    width: 70%;
  }
  .btn-menu{
    display: none;
  }
  #mainnav{
    display: block;
  }
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Warmest regards,
Kharis