Shape 5

Joomla Templates => New Vision - Club => : YieldMan August 03, 2016, 04:53:14 AM


: Anchor problem main menu interfering?
: YieldMan August 03, 2016, 04:53:14 AM
I am in the process of making a large single article and have decided to go the route of using anchor points. So I started small and began testing with a pc. When I click the link to the anchor point it seems to go past the point i had specified. While using a cellphone on the page the anchors work perfectly. Here is a page I am working on http://macomm.net/index.php/features-mainmenu-47
It is probably actually going to the right place but the logo and menu end up interfering I believe.
Any help would be great!

Link
:
<li><span style="font-size: 12pt;"><a href="#payment" rel="alternate">What payment does our station accept?</a></span></li>

Anchor
:
p style="text-align: center;"><span style="text-decoration: underline;"><strong>
<span style="font-size: 16px;"><a id="payment"></a>Payments</span></strong></span></p>

: Re: Anchor problem main menu interfering?
: mikek August 03, 2016, 07:38:27 AM
Hello,

I checked the #payment anchor and it went right to it for me. Keep in mind that anchors put that ID right at the top of the page, and you have the floating menu enabled which will cover some of that. That is entirely controlled by the browser, and I am not aware of a way to offset that.

: Re: Anchor problem main menu interfering?
: YieldMan August 03, 2016, 08:00:49 AM
Here is what I did to fix the problem.
:
<a href="#test">Test</a>

:
<span class="anchor" id="test"></span>
<div class="section">Test</div>

I then added this to the css file
:
.anchor{
  display: block;
  height: 130px; 
  margin-top: -130px; 
  visibility: hidden;
}

: Re: Anchor problem main menu interfering?
: YieldMan August 03, 2016, 08:16:55 AM
Only problem I see now is that on mobile view its being pushed down 130px to far. I may be able to live with this unless there is a better solution?

: Re: Anchor problem main menu interfering?
: mikenicoll August 03, 2016, 10:31:38 PM
Hello,

You could try getting more specific with your CSS for mobile triggers. Look up @mediascreen values on Goggle and you can specifiy specific resolution triggers for CSS.

Regards,