Customise the target for the Skip to Content Link

How To
1

I’m a Bricks newbie :slight_smile: and struggling to find an answer to the below question I have…

Is it possible to edit the target for the Skip to Content link, to bypass the hero section (which has a menu overlay) and instead focus on the following section that has the actual ‘content’?

2

This is my question too. If there was a filter, that would’ve been great.
I think we have to build our own skip link and put it in our header or something. Inside header template add a code element and add this:

<a class="skip-link" href="#brx-content" aria-label="Skip to main content">Skip to main content</a>

Change “#brx-content” to the selector you want.
And this is the CSS for it:

.skip-link{background:#000;border-bottom-right-radius:8px;color:#fff;font-weight:700;left:0;padding:5px 10px;position:fixed;top:0;transform:translateY(-102%);transition:transform .3s;z-index:9999}.skip-link:focus{transform:translateY(0)}
1 Like
4

@WeLoVeBricKs thank you so much for you help :slightly_smiling_face:

This is the work-around that I used to skip to my content below the hero banner:

  1. Added the following custom code to the Body (header) scripts in the Settings section of Bricks Skip to main content

  2. I did not add any custom CSS for the styling, as that is already styled by default by Bricks

  3. On the home page with the hero header overlay, I then edited the ID of section containing the actual content, and saved it as hero-content (to match the href above)

That seems to have done the trick!

5

Hi, stuck on this, where’s the code you mention? I need skip link to go elsewhere.
Thanks