• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Appfinite

Appfinite

Premium WordPress Themes for The Genesis Framework

  • Themes
  • Blog
  • Tutorials and Resources
  • Forums
  • Contact Us

In-page anchors obscured by menu on desktop

Home › Community Forums › Aspire Theme Support › In-page anchors obscured by menu on desktop

Tagged: anchors menu space

  • This topic has 5 replies, 2 voices, and was last updated 4 years, 8 months ago by Wes.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 6, 2017 at 4:36 am #22006
    dave
    Customer

    Hi – I’ve had to add the following code to the anchors to get them to show up properly in a browser, but this obviously means too much space when viewing on a mobile.

    “
    <br />  
    <h2>Example heading</h2>”
    (without the “<br /> ”  I can’t see the heading)

    You can see an example of this in action on:
    http://axis-finance.com/sipps/

    Not sure if this is a Genesis issue or an Aspire issue, but it’s causing us some difficulty.

    Yours
    David

    October 7, 2017 at 3:40 pm #22010
    Wes
    Moderator
    <h2>Example heading</h2>”
    (without the “ ”  I can’t see the heading)

    Which part of the page are you referring to? Are you saying the heading can’t be seen at all without adding a break? If so, can you give me an example?

    The only thing I see are a lot of breaks in between some of the sections. There’s probably too many showing up. I would handle those parts a bit different by adding a div with it’s own custom Class. Then the div spacing can be adjusted for mobile and desktop browsers depending where it’s being viewed from.

    October 16, 2017 at 10:24 am #22025
    dave
    Customer

    Hi Wes – thanks for looking at this for me.

    I’m actually referring to any of the anchors on the page. If I use the following code I don’t see the heading “The Self Invested Personal Pension (SIPP)” below the menu bar as it is obscured by the menu bar itself:

    <ol>
     	<li><a href="#1">The Self Invested Personal Pension (SIPP)</a></li>
     	<li><a href="#2">International SIPPs</a></li>
    </ol>
    <a name="1"></a>
    <h2>1. The Self Invested Personal Pension (SIPP)</h2>

    but if I add the following code, then I do see the heading below the menu bar:

    <ol>
     	<li><a href="#1">The Self Invested Personal Pension (SIPP)</a></li>
     	<li><a href="#2">International SIPPs</a></li>
    </ol>
    <a name="1"></a>
    <br />&nbsp;
    <h2>1. The Self Invested Personal Pension (SIPP)</h2>

    I was hoping that the addition of something like a margin-top= in the css would resolve this, but I’m loathe to play about too much as I don’t want to break other things.

    If you let me know where I should be adding the div classes, I’ll happily do so.

    October 19, 2017 at 2:42 am #22041
    Wes
    Moderator

    Ah, ok now I see what you mean.

    This is an issue that all developers go through when using a site with a Sticky Menu that also has anchors inside the content.

    It’s an easy fix if you have separate sections with plenty of space in between like the 1st and second widget on the SquareOne theme (click the arrow/circle) – http://demo.appfinite.net/squareone/ Notice the arrow links to the 2nd Blue widget area and there’s already enough space in between the title and widget.

    Since you’re needing this to work with just Text by itself, it’s a bit different. Here’s some code I came up with that seems to work –

    <a name="1"></a>
    <h1 class="anchor-space">Your Anchor Title</h1>
    <p>Your regular paragraph text goes here. Your regular paragraph text goes here. Your regular paragraph text goes here.</p>

    I added the above code to the HTML, and then I added this to the CSS –

    .anchor-space {
        margin-top: -110px;
        padding-top: 110px;
    }

    This is the result once I click the anchor/link – https://i.imgur.com/PoxXwbJ.png

    Keep in mind, the Sticky Menu won’t show up on Mobile devices, so you won’t have to worry about this issue on Mobile Phones or tablets. I would just focus on decreasing some of the space if there’s too much when viewed on mobile.

    Let me know if that works.

    October 19, 2017 at 3:44 pm #22045
    dave
    Customer

    Hi – I’ve just tried implementing this but it doesn’t seem to have changed anything. I’ve probably put the code in the wrong file or some such thing. What I did was update /wp-content/themes/aspire-pro/style.css as follows:

    /* ## Headings
    --------------------------------------------- */
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
    	font-family: 'Open Sans', sans-serif;
    	font-weight: 300;
    	line-height: 1.2;
    	margin: 0 0 20px;
    }
    
    h1 {
    	font-size: 36px;
    	font-size: 3.6rem;
    }
    
    .anchor-space {
    	margin-top: -110px;
    	padding-top: 110px;
    }
    
    h2 {
    	font-size: 30px;
    	font-size: 3rem;
    }
    
    .anchor-space {
    	margin-top: -110px;
    	padding-top: 110px;
    }
    
    .image-section h2,
    .solid-section h2 {
    	font-size: 54px;
    }

    and made the anchor sections look as follows:

    <a name="1"></a>
    <h2 class="anchor-space">1.  QROPS definition</h2>

    Have I updated the wrong css file?

    Thanks again for all your help.

    October 19, 2017 at 8:34 pm #22047
    Wes
    Moderator

    I just tested again and it works perfectly for me. You can add the CSS wherever you want. I usually either add it to the style.css or the Custom CSS page in the Customizer.

    I would make sure that your code is consistent and organized or it won’t show up properly.

    Here’s exactly what I added –

    
    <a name="1"></a>
    <h1 class="anchor-space">Your Anchor Title 1</h1>
    <p>Your regular paragraph text goes here. Your regular paragraph text goes here. Your regular paragraph text goes here.</p>
    
    <a name="2"></a>
    <h1 class="anchor-space">Your Anchor Title 2</h1>
    <p>Your regular paragraph text goes here. Your regular paragraph text goes here. Your regular paragraph text goes here.</p>
    
    <a name="3"></a>
    <h1 class="anchor-space">Your Anchor Title 3</h1>
    <p>Your regular paragraph text goes here. Your regular paragraph text goes here. Your regular paragraph text goes here.</p>

    …and then this was added to the CSS –

    .anchor-space {
        margin-top: -110px;
        padding-top: 110px;
    }

    Give that a try, and if it works then go back and reorder your code so it looks similar. Or you can wrap each section in their own div to be more organized.

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.
Log In

Primary Sidebar

Search Forums

Affiliate Program

Looking to earn some money? Join our Affiliate program and earn 35% of every sale you refer. Top referrers earn 40-50%.

Join Now →

The Genesis Framework

All of our themes are designed for the Genesis Framework. You will need to purchase Genesis in order to use any of our themes.

Purchase Genesis

Hire a Web Developer

Need help setting up or customizing your website?

Contact Us →

Search Full Site

  • Buy Genesis!
  • Shopping Cart
  • Themes
  • My Account
  • Support Forums
  • Tutorials and Resources
  • Privacy Policy
  • Contact Us
  • Follow Us on Twitter

Copyright © 2022 · Appfinite · Built With The Genesis Framework