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

Hi,

Did you try setting a font size for all screen sizes for the H2 element under Enfold->General Styling->Typography?

Best regards,
Rikard

Hey Klaus-Peter,

You can change the general font sizes under Enfold->General Styling->Typography. If you need more specific settings then you can check under Enfold->Advanced Styling.

Best regards,
Rikard

Hey woogie07,

Thank you for the inquiry.

You can add this css code to adjust the style of the accordion element.

.av-elegant-toggle .toggle_icon {
    left: 20px;
    right: auto;
}

.js_active .av-elegant-toggle .toggler, .avia-admin-preview-container .av-elegant-toggle .toggler {
    padding: 35px 35px 30px 55px;
    font-size: 17px;
}

Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings in order to ensure that the changes take effect.

Best regards,
Ismael

Hey CJGVD,

Thank you for the inquiry.

You can now customize the font size for various screen sizes in the Enfold > General Styling > Typography panel. If you enable the Default Content Font Size toggle for example, you will have access to different dropdown menus for adjusting the font size on desktop, medium, small, and very small screen sizes. Let us know if this help.

Best regards,
Ismael

Hi,

Thanks for the update. You can set the default font size under Enfold->General Styling->Typography. If you need more advanced settings than the ones available there, then you can go to Enfold->Advanced Styling.

Best regards,
Rikard

Hi,

Thank you for the update.

The css files are currently compressed which is probably why the modifications are not taking effect. Please toggle or temporarily disable the Enfold > Performance > File Compression settings. By disabling the file compression settings, you will be able to make the necessary adjustments and updates without any conflicts. Once you have made the required modifications, you can re-enable the file compression settings to optimize the performance of your website.

If the css code above is still not working after disabling the file compression, please replace it with this css code before re-enabling the file compression.

#top .title_container .main-title {
    font-size: 30px;
}

Best regards,
Ismael

Hi,

Thank you for the update.

Do you know why the new theme has caused the top bar and the text size to display differently?

This issue is likely caused by modifications made in the header.php file. It is possible that the previous developer edited the template, and those changes were lost when you replaced it with the current version.

To adjust the text size, please modify the settings in Enfold > General Styling > Fonts or make changes to the element styles in the Advanced Styling panel.

Best regards,
Ismael