Forum Support

Shape 5
April 19, 2021, 01:50:20 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Anchor problem main menu interfering?  (Read 585 times)
YieldMan
Jr. Member
**
Offline Offline

Posts: 14



« on: 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
Code:
<li><span style="font-size: 12pt;"><a href="#payment" rel="alternate">What payment does our station accept?</a></span></li>

Anchor
Code:
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>
« Last Edit: August 03, 2016, 06:04:55 AM by YieldMan » Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #1 on: 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.
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
YieldMan
Jr. Member
**
Offline Offline

Posts: 14



« Reply #2 on: August 03, 2016, 08:00:49 AM »

Here is what I did to fix the problem.
Code:
<a href="#test">Test</a>

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

I then added this to the css file
Code:
.anchor{
  display: block;
  height: 130px;
  margin-top: -130px;
  visibility: hidden;
}
Logged
YieldMan
Jr. Member
**
Offline Offline

Posts: 14



« Reply #3 on: 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?
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #4 on: 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,
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.