CSS

Outside Link Icon Remover (CSS)


a[href*="//"]:not(:has([data-entity-embed-display=media_image])):after {
    display: none;
}

Applying this CSS to a page will remove the outside link icon that appears after a link.

Back to Top Button

CSS:
<style type="text/css">@media only screen and (max-width: 894px) {
#btn-btt div.button-item.btn-ucr div a {
    background-color: rgba(255,255,255,0.0);
    color: #0979d0;
    position: fixed;
    bottom: 0em;
    z-index: 1000;
    border-radius: 4px;
    float: right;
    right: 0%;
    font-size: 72px;
    padding: 10px;
    
}


#btn-btt div.button-item.btn-ucr div a:hover {
    color: #0d8cee;
    
}
}

@media only screen and (min-width: 895px) {
#btn-btt div.button-item.btn-ucr div a {
    display: none;
    
}
}
</style>

HTML:
<div id="btn-btt">
<div class="grid-container full">
<div class="button-bar btn-justified-100">
<div class="grid-x grid-padding-x grid-padding-y small-up-1 medium-up-1 text-center align-center" data-e="4pa7jx-e" data-equalize-by-row="true" data-equalize-on="medium" data-equalizer="" data-events="resize" data-mutate="xydiwa-eq" data-resize="cfqgjv-eq">
<div class="paragraph paragraph--type--button-bar paragraph--view-mode--default cell align-center-middle">
<div class="button-item btn-ucr thingtohide" data-equalizer-watch="" style="height: auto;">
<div><a href="#top" target="_self">&nbsp;<span class="mdi mdi-arrow-up-bold-circle">&nbsp;</span></a></div>
</div>
</div>
</div>
</div>
</div>
</div>

Place this CSS anywhere on the page inside a custom block. This CSS is set up with a media query. So the button shows up on screen widths less than 894 pixels. However, if you want, you can remove the media query portion out.

Also place the button (HTML) anywhere on a page. The CSS tells the button's position to be fixed. So it doesn't matter where you place it. It also doesn't matter if you place it in a full-width region or centered width. You may also change the MDI icon to be what ever you want it to be.

Adjusting #Anchor Placement
on a page with Header Nav

#name-anchor {
display: block;

height: 250px;

margin: -250px 0 0;
}

Place this CSS anywhere on the page inside a custom block.

Add a name-anchor in the conventional way to your page blocks. You can compensate for the Mega-nav header space amount by adjusting height and margin numbers. Note, since anchors are relational to page, you may need to fine-tune space amounts depending how far down the page the anchor appears.

Outside Link Icon Remover (CSS)

Back to Top Button

Adjusting #Anchor Placement on a page with Header Nav

Adjusting #Anchor Placement
on a page with Header Nav