Hi,

Please go to Appearance > Menus, click the Screen Options on the top right corner, check the CSS Classes option, expand the menu item you’d like to edit, and give it a custom CSS class ( https://imgur.com/a/tfeRy5S ).

Then, go to the Enfold theme options > General Styling > Quick CSS, and add the following code:

#top #header .av-main-nav li.custom-menu-color > a { color: red; }

Regards,
Yigit

Hi,

Last thing, on mobile view, how can I get space between the images? (see attached)

Please update the previous css code:

#top #bc-custom-section div .flex_column {
    width: 46% !important;
    margin-left: 3% !important;
    border-radius: 30px;
}

Best regards,
Ismael

Hi,

Thanks for the screenshot.

The css code above should have worked. Please try this again:

#top #bc-custom-section div .flex_column img {
    border-radius: 30px;
}

Best regards,
Ismael

Hey bemodesign,

Thank you for the inquiry.

You can add this css code to adjust the height of the cell on mobile view and display its background image:

@media only screen and (max-width: 768px) {

  /* Add your Mobile Styles here */
  #top #wrap_all .flex_cell.av-f5wo1-1367a8c1921d7a80e238c520d3239660 {
    min-height: 700px;
  }
}

Best regards,
Ismael

Hi,
You still have the old css:

#top.page-id-502 #av_section_1 .flex_column.av_one_half {
	border: 1px solid #cccccc;
}

and not this new one:

#top.page-id-502 #av_section_1 .flex_column.av_one_half:not(.avia-builder-el-9) {
	border: 1px solid #cccccc;
}

please check again

Best regards,
Mike

Hi,
I assume you mean the “SELF CONTAINED” at the top of the page, you can use this css:

#top #wrap_all .all_colors h1 {
	font-weight: bold;
}

but your font doesn’t seem to support “bolder”

Best regards,
Mike

Hi,
#1: has an extra divs around the text that none of the other do, I assume this is an error, check your code in the text block in the “text” tab in instead of “visual”

all of the other ones are two H2 tags like this:

#2: this is a div column like all of the others, only it has no text block in it, I assume you will be adding one?
If not use this css instead to exclude it:

#top.page-id-502 #av_section_1 .flex_column.av_one_half:not(.avia-builder-el-9) {
	border: 1px solid #cccccc;
}

Best regards,
Mike

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

#top.page-id-502 #av_section_1 .flex_column.av_one_half {
	border: 2px solid;
}
#top.page-id-502 #av_section_1 .flex_column.av_one_half h2:nth-child(2) {
padding-right: 20px;
}

you may need to adjust the image in the middle one, it is adding white space, perhaps the image is not wide enough? All of the other images look good.

Best regards,
Mike

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

#footer-title {
font-size: 38px;
font-weight: bold;
font-family: arial;
color: #222;
float: right;
top: -38px;
position: relative;
left: -10%;
}

Then add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_script() { ?>
  <script>
document.addEventListener("DOMContentLoaded", function() {
    var titleText = document.querySelector("h1.av-special-heading-tag").textContent;
    var footerTitleDiv = document.createElement("div");
    footerTitleDiv.id = "footer-title";
    footerTitleDiv.textContent = titleText;
    document.getElementById("socket").appendChild(footerTitleDiv);
});
</script>
  <?php
}
add_action( 'wp_footer', 'custom_script', 99 );

This is the expected result:

Best regards,
Mike

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

.blue-info .av-image-caption-overlay {
    border-top: 0px;
    border-bottom: 0px;
}
#top .blue-info .avia-image-overlay-wrap .av-caption-image-overlay-bg {
  opacity: 1 !important;
  background-color: #c8ebf8 !important;
}

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

Best regards,
Mike

Hi,
Seems to work when I try:

see the link below. But see Guenni007 post about using Transfonter here where he points out that the Font Kit Generator from FontSquirrel does not support the font family option.

Best regards,
Mike

Hi,
Typically you would drag the elements into the LayerSlider where you want to see them, try checking the free LayerSlider templates for one similar to what you want to achieve:

Also note that typically you will need to create two sliders, one for desktop and one for mobile because the desktop screen is landscape and the mobile screen is portrait.

Best regards,
Mike

Hi,
To add a border radius to the images in #bc-custom-section for bothe desktop and mobile, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #bc-custom-section div .flex_column a.avia_image {
	border-radius: 30px;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey bemodesign,
It is not clear what code you added, perhaps you added this:

#top.single-product .product_meta {
    visibility: hidden;
}

but you should have used:

#top.single-product .product_meta {
display: none;
}
#top div.product .woocommerce-tabs {
    padding: 0;
}

I added this for you, please check.

Best regards,
Mike

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard