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

Hi,
It looks like the slider min height is 630px, try changing your image height to this instead of 430 so it won’t be stretched on desktop.

Best regards,
Mike

Hey steveorrmedia,
Thank you for your patience and the links, so based on your description for the first three issues, that are all for heading text being cut off at screen sizes below 480px, while it is possible to break the words with a hyphen, I don’t think this will look good so a better option is to reduce the font size for small screens.
The Special Heading element that you are using on these three pages has an option to do this, please go to the styling tab and look for Heading Font Sizes then click the icon for the small device screen and adjust the font size to about 37px.

You could also adjust the Subheading Font Sizes if you wish. I did this for your /message-development/ page special heading, and now the text fits at the smallest screen sizes, please clear your browser cache and check, and then try this for your other pages.
Fot your last issue with the logos being too close together on small mobile when they are in a single column, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 479px) { 
	#top .avia-logo-element-container .slide-entry {
    padding: 10px;
	}
}

and feel free to adjust the 10px to suit if it is not enough
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

Hi,
If I am understanding correctly you want to line up the logo with the left margin and padding starting at 768px

but doing this makes the logo over lap your menu items because the white space of the logo is so large, try trimming down the logo so it has no white space:

then I think this css will work:

@media only screen and (min-width: 768px) { 
.html_header_top #top .av_header_stretch .container {
	width: 90%;
	padding: 0px 50px;
}
}

Best regards,
Mike

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

#top #header.av_header_transparency #header_meta {
    border-bottom: none;
}

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

Best regards,
Mike

Hey Henning,

Please try the following in Quick CSS under Enfold->General Styling:

.html_elegant-blog #top .post-entry .post-meta-infos {
    width: 40em;
    float: none;
    max-width: 40em;
}

Best regards,
Rikard

Hi,
Thank you for your patience, I wanted to let you know that I have investigated this and couldn’t find a cause for this, so I asked the rest of the team for advice. I disabled the css that I recommended above so the team could easily see the issue, please retain the admin access above and reply so this thread stays on top in our list view, I just wanted you to know we are investigating. Thank you for your patience.

Best regards,
Mike

Hey,

To change the border color, please use the following code:

#top .av-fields-with-error {
  border-color: green !important;
}

The error text is white at the moment ( https://i.imgur.com/bh09vMG.png ). If this isn’t what you meant, please elaborate.

Cheers!
Yigit

Hey,

Editing the Font Hover Color of the Menu Links in overlay/slide out in Enfold theme options > Advanced Styling should change the hover color. It doesn’t seem to be working at the moment. We’ll fix it in the upcoming version.

For now, please add the following code to the bottom of the Quick CSS field and adjust the color as needed:

.html_av-overlay-side #top #wrap_all div .av-burger-overlay-scroll #av-burger-menu-ul li:hover a, #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a:hover {
   color: #ff0000;
}

Cheers!
Yigit

Hey gb,

Thank you for the inquiry.

This should be possible with a Fullwidth Submenu element. Please add the element in the page, go to the Advanced > Developer Settings panel, then add the class name “av-floating-sub-menu” in the Custom CSS Class field. Afterwards, add the following css code to make the submenu float at the bottom of the page.

#top .av-floating-sub-menu {
    position: fixed !important;
    bottom: 50px;
    width: 70%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50px;
    top: auto !important;
}

If you want the submenu to display on all pages without manually adding it in the editor, extract the shortcode of the element by enabling the debug mode, then use template hooks such as ava_after_content_templatebuilder_page.

add_action('ava_after_content_templatebuilder_page', function() {
  // place the submenu shortcode here 
}, 10);

To enable the debug mode, please check the documentation below.

// https://kriesi.at/documentation/enfold/intro-to-layout-builder/#debug-mode

Best regards,
Ismael

Hey ricedean,

Thank you for the inquiry.

That is the default border color of the valid input fields. You can adjust the border by adding this css code.

#top #wrap_all .valid .text_input, #top #wrap_all .valid .text_area, #top #wrap_all .valid .select {
    border: 1px solid #7296cd;
}

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

Best regards,
Ismael

Hey suthernstrawberry,

Thank you for the inquiry.

You can add this css code to keep the top Header Secondary Menu visible on scroll.

.html_header_top.html_header_sticky #header {
    margin-top: 0 !important;
}

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

Hi,

Thank you for the info.

The css modification is not getting applied because it gets overridden by the rules in the posts css file. To fix the issue, please add this code in the functions.php file.

function ava_enqueue_child_styles() {
    wp_enqueue_style( 'av-child-posts-css', get_stylesheet_directory_uri() . '/av-child-posts.css' );
}

add_action( 'wp_head', 'ava_enqueue_child_styles', 10 );

After that, create a file called “av-child-posts.css” in the child theme directory, then add this css code.

@media only screen and (min-width: 1201px) {

  /* Add your Desktop Styles here */
  .responsive #top #wrap_all .flex_cell.av-irwte-402a46cb11dcc3db2b5c85605d88b8cc {
    padding: 80px 300px 80px 80px !important;
  }
}

This should override the default posts css styles and increase the padding of the cell on larger screens.

Best regards,
Ismael

Hi,

Thank you for the update.

What is the screen resolution of your monitor? In your screenshot, looks like you have a high-resolution monitor or have zoomed out the page. If you want to increase the padding for monitors with a screen resolution higher than 1920x1080px, try to add this css code.

@media only screen and (min-width: 1920px) {

  /* Add your Desktop Styles here */
  .responsive #top #wrap_all .flex_cell.av-irwte-402a46cb11dcc3db2b5c85605d88b8cc {
    padding: 80px 300px 80px 80px !important;
  }
}

Best regards,
Ismael

Hey Gabriele-Marie,

Thank you for the inquiry.

We can use some filters in the functions.php file to add a new icon. Please check the thread below for an example.

// https://kriesi.at/support/topic/tripadvisor-as-social-share-icon/#post-1286736

Related threads:

// https://kriesi.at/support/topic/telegram-in-social-share-button/#post-1358871
// https://kriesi.at/support/topic/changement-couleur-et-police-ne-fonctionne-pas/#post-1344998

Best regards,
Ismael

Hi,
Sorry my example may have been confusing, I checked your base site and see your language menu:

so this is good if you want to show the language menu in the topbar, to do so choose the menu location:

and then choose to show it in the theme settings:

Or you can add the language menu items to the main menu:

in this case you might wish to add a folder called “lang” or anything you wish to hold all of your language links, this is what I had in mind in my other screenshot

I hope this explains better.

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

Hey,

You can change the code I posted above to the following one:

#top .custom-class { font-weight: bold; margin-bottom: 40px; }

Cheers!
Yigit

Hey,

Do you want to adjust the background color of the mobile menu? If so, I already replied to your thread here: https://kriesi.at/support/topic/setting-background-overlay/.

Regards,
Yigit