Why Is This Page Layout Breaking When an Anchor Link Is Used

Why is this page layout breaking when an anchor link is used

half content appears to shift upwards because the .panel
its contained within is set to overflow:hidden & has content that is being clipped as a result.

When the browser attempts to identify the element in the named anchor it sees thats its within a container that can clip its content & so scrolls that element to the top to ensure its visible.

For example if you were to add any elements within contentInner but above the named h3, then they would not be visible on the page when the named anchor was used as half content is scrolled such that h3 is at the top. (The same result as if overflow:scroll were applied; the named anchor causes the scrollbar to position itself in line with the top of the named element)

Flexbox - a tag breaks layout

An element with display: flex arranges it's children in a flexible box layout.

The only child of the <article> is the <a> so that is the only element being laid out in the flex box.

Put the link around the article instead. Then the div elements will be the article's children.

Fixed page header overlaps in-page anchors

I had the same problem.
I solved it by adding a class to the anchor element with the topbar height as the padding-top value.

<h1><a class="anchor" name="barlink">Bar</a></h1>

I used this CSS:

.anchor { padding-top: 90px; }

Anchor links within ul stopped working

I have tracked down a solution for the same problem with a wordpress site. The solution came from

    https://sridharkatakam.com/fix-jump-links-agency-pro/

It is to do with old themes and old versions of jquery.scrollTo.js or jquery.scrollTo.mins.js not working with latest Chrome update.

Step 1
Connect to your site’s server via FTP and navigate to theme’s js directory inside the child theme.

Step 2
Delete jquery.localScroll.min.js and jquery.scrollTo.min.js.

Step 3
Download jquery.localScroll.min.js and jquery.scrollTo.min.js.

Upload both the files to js directory.

In my case the client did not have a child theme - files are located in wp-content/themes/(your active theme folder)/js
I only needed to replace one file jquery.scrollTo.js - I downloaded the jquery.scrollTo.min.js and renamed it to jquery.scrollTo.js before replacing the old version.

Lots of people are having this issue - took me a few hours to find this solution.

Good luck

Broken anchor tag caused by pseudo image background absolute positioning - how to fix?

Try, this:

.btn {
  cursor: pointer;
  color: #fffafa;
  z-index: 5;
  position:relative
}

---

Related Topics