Hey Emanon,
Thanks for the link to your site I’m not sure why your arrow font would change but it is now:
content: “\E803”;
font-family: ‘fontello’;
and the font-family: ‘friendly’; is a globe

so I fixed your css for you so on your blog your arrows show:

but on your homepage you have added html to your special heading title field, which is not recommend:

but since you already have this in place I added this css to override them and add the arrow:

.red-arrow-title .av-icon-char:after {
  color: #EB5847;
 content: "\E803";
font-family: 'fontello';
  font-size: 16px;
  position: absolute;
  margin-left: 5px;
}
.red-arrow-title .av-icon-char:before {
  display: none;
}

now now they show the arrows:

please clear your browser cache and check.

Best regards,
Mike

Hey weblines,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.html_av-overlay-side-classic #top .av-burger-overlay li li .avia-bullet {
	height: 0px;
	width: 0px;
	opacity: 1;
}

.html_av-overlay-side-classic #top .av-burger-overlay li li .avia-bullet:before {
  content:'•';
  padding-right: 5px;
  color:#000 !important;
  font-size: 20px;
  top: -8px;
  position: relative;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thank you for your patience and the link to your site, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 450px) { 
	.phone-info {
		font-size: 9px;
	}
}

Feel free to adjust to suit.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,

Thank you for the info.

Try to set the initial height of the link to zero, then set it back to default on focus.

.jsf-skip-link {
    opacity: 0;
    font-size: 0;
    height: 0;
}

.jsf-skip-link:focus {
    opacity: 1;
    font-size: inherit;
    height: 20px;
}

If that didn’t work, try to pull the body element 20px upwards initially then bring it back to default when the skip link has been focused.

.jsf-skip-link + body {
    margin-top: -20px;
}

.jsf-skip-link:focus + body {
    margin-top: 0;
}

Best regards,
Ismael

Hi,

But there is a black gap at the top of each page, where the skp-link appears. Could this be removed?

This is why you have to move the skip link out of the div container. The black gap should not appear once the div has been removed.

To adjust the style of the skip link, edit the css rule above and add your own properties to it.

.jsf-skip-link:focus {
    opacity: 1;
    font-size: inherit;
}

Best regards,
Ismael

Hi,

Please try this CSS instead:

.smallheading h2 {
  font-size: 29px;
}

Best regards,
Rikard

Hi,

Thank you for the update.

The following css code should work, but you have to take the link out of the div element.

.jsf-skip-link {
    opacity: 0;
    font-size: 0;
}

.jsf-skip-link:focus {
    opacity: 1;
    font-size: inherit;
}

Best regards,
Ismael

Hi,

Thank you for the update.

Upon checking, it appears that the options in the General Styling > Typography panel are still set to their default or standard values. To address this, please adjust the settings according to your preferences. Additionally, you can modify the font size of the Special Heading element for different screen sizes by adjusting the options in the Styling > Font Sizes toggle.

Best regards,
Ismael