if you let the background-image determine the height of the color-section (yes this is possible) you will have troubles on small screens to have all content in that color-section. ( that is the reason why the content normaly determines the section height)

see here – i gave to the color section a custom-class: responsive-container

and did this to quick css:

.responsive-container {
    background-size: contain;
    padding-top: 56.25vw;
    width: 100vw;
    height: 56.25vw !important;
}
.responsive #top #wrap_all .responsive-container .container {
    margin-top: -56.25vw
}

see result here – and see for smaller screens what i mean with troubles: https://webers-testseite.de/responsive-colorsection/

so better is to have background-images which could be cropped or to have interesting gradients

ja und nimm die Original Bilder: Slideshow Image and Video Size : no scaling

wenn du möchtest, dass die Bilder oben unten nicht über den Screen gehen. kann man das erzwingen:
gib der full-width slideshow eine Custom Class. ich habe das mal mit zweien deiner Bilder gemacht, und der Slideshow die klasse: vollehoehe
gegeben.

dann habe ich ins quick css folgendes eingegeben:

.vollehoehe img {
    max-height: calc(100vh - 170px);
}

die minus 170px sind dem Header-bereich geschuldet. Da kannst du noch ein wenig dran drehen.
https://webers-testseite.de/slide-show/

wenn du es gesehen hast – nehme ich die Bilder wieder raus.

Wenn du es nur auf der startseite hast kannst du es auch so selectieren:

.home .avia-slideshow img {
    max-height: calc(100vh - 170px);
}

sure :lol

video

2a) and to have the images not full-width you can do that for smaller screens:

@media only screen and (max-width: 767px) {
.av_one_fourth img {
    width: 50vw;
    float: left;
}
}

PPS: what kind of plugin is it on your image gallery? – very nice !

hey Ismael i think you misunderstood him – he is concerning to 768 til 989px 2b
and he likes to have the 4th entry not on 24% but as all the other on 48%

the result is caused by an old “bug” of maybe wpautop function.
on the source i see that there is a <p></p> construct inserted between the flex-columns.:

if you like to show your site as iframe a lot of Boards only allows to show in a lightbox:

https://gorgeconnect.com/
this you can have with url-parameter iframe=true
( depends on how many and the postion if it is added to the url by ? or & )

it is not so hard to insert that little icon for search on that place but to have the direct form there is a bit more complex.

don’t know why$form = (ob_get_clean()) ; has to be and not $form = htmlspecialchars(ob_get_clean()) ; stays a miracle :lol

so try ismaels code without that htmlspecialchars

add_filter( 'wp_nav_menu_items', 'avia_append_search_nav', 10, 2 );
add_filter( 'avf_fallback_menu_items', 'avia_append_search_nav', 10, 2 );

function avia_append_search_nav ( $items, $args )
{	
        if ((is_object($args) && $args->theme_location == 'avia2') || (is_string($args) && $args = "fallback_menu"))
	{
		global $avia_config;
		ob_start();
		get_search_form();
		$form =  (ob_get_clean()) ;

		$items .= '<li id="menu-item-search2" class="noMobile menu-item menu-item-search-dropdown">'.$form.'</span> ';
	}
	return $items;
}

add this to your quick css:

#avia2-menu #menu-item-search2 {
    vertical-align: top !important;
    position: relative;
    top: -12px;
}

but the uggliest thing is that the created ajax search will resize the header meta
edit:

#top #searchform .ajax_search_response {
    position: absolute;
    background-color: #fff;
    box-shadow: 2px 2px 6px #333;
}

• This reply was modified 6 years, 11 months ago by Guenni007.

here is the method mentioned above :

register a new social_bookmark via functions.php of your child theme
here i take the lock but find a different icon on enfold

function avia_add_custom_icon($icons) {
    $icons['register']  = array( 'font' =>'entypo-fontello', 'icon' => 'ue825');
    return $icons;
}
add_filter('avf_default_icons','avia_add_custom_icon', 10, 1);

function avia_add_custom_social_icon($icons) {
    $icons['Register'] = 'register';
    return $icons;
}
add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);

goto your Enfold options and add that newly added “social media” (it is at the end of the list) and insert your desired link

this turns the social_media to the left of hamburger menu – put it in functions.php of your child theme too

function change_menu_position() { 
?>
<script>
(function($){
	$('.main_menu ul.social_bookmarks').insertBefore($('.main_menu div.avia-menu'));
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'change_menu_position');

now style your newly social media button!:

/*** this is for the new button not to have same behavior as social_bookmarks buttons ***/
.social_bookmarks_register.av-social-link-register {
    margin: 0 15px;
    width: auto !important;
    padding: 0 15px !important;
    background-color: #42ab96 !important;
}

#top .social_bookmarks li.social_bookmarks_register a {
    width: auto !important;
    color: #fff;
}

.social_bookmarks_register .avia_hidden_link_text {
    display: inline !important;
    padding-left: 10px;
    text-decoration : none !important
}

#top #wrap_all .av-social-link-register:hover  {
    color: #fff;
    background-color: #BD5469 !important;
}

/*** rules for the left-hand social_bookmarks buttons ***/
#top nav .social_bookmarks { margin-top: -20px !important; overflow: visible !important; height: 40px !important }
.avia-menu.av_menu_icon_beside { padding-right: 0; margin-right: 0; border-right-width: 0; border-right-style: none }
.social_bookmarks li a { height: 40px !important; line-height: 40px !important; width: 40px !important }
#top .social_bookmarks li { width: 40px; height: auto !important }
#top .av-logo-container .social_bookmarks li a {  border-radius: 50% }
.av_header_transparency .social_bookmarks li a { color: #969696 !important;}

I think this will be the better and better understanding way:
Result – same as above: https://webers-testseite.de/cynthia/

https://kriesi.at/support/topic/change-the-order-of-the-social-bookmarks-icon/#post-986302

is it this you like to obtain?

the whole function can be used for more replacements – just add a new line – semicolon separated

replaceElementTag('.slideshow_caption h2.avia-caption-title', '<h1></h1>');
replaceElementTag('#footer h3.widgettitle', '<h2></h2>');  

etc.pp

take a fullwidth-slideshow.
you can add to the image on caption a manual link (choose apply link to image) – add to the video link at the end a &iframe=true f.e.:

https://player.vimeo.com/video/262210925?autoplay=1&loop=1&title=0&byline=0&portrait=0&iframe=true

see here: https://webers-testseite.de/huawei/

to pimp the whole thing a bit you can give to the hover effect some scalings – (get rid of the overlay white)

i loaded the fa from maxcdn and the styles from the link ismael gave:

add_action( 'wp_enqueue_scripts', 'enqueue_awesome' );
function enqueue_awesome() {
  wp_enqueue_style( 'prefix-font-awesome', 'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', array(), '4.7.0' );
  wp_enqueue_style( 'font-awesome-styles', 'https://unpkg.com/@coreui/coreui/dist/css/coreui.min.css', array(), '1.0' );
}

the only thing to correct was in quick css a bit:

.btn { font-weight: 600 !important}
.btn-brand i { font-size: 22px }
.btn-brand i { margin: -.375rem .75rem -.375rem -.75rem }

and don’t make line-breaks in text-field:
<button class="btn btn-brand btn-youtube" type="button"><i class="fa fa-youtube"></i>Youtube</button>

Edit : i removed the code above from my test-page now – because It does not meet the requirements of the GDPR

the function above is a general tag replacement function under preventing every attribut set on the original tag
the lines of replacement are only separated by semicolon. so for example if you like to switch in the footer from h3 headings to h2 headings only add in the function:

replaceElementTag('h3.widgettitle', '<h2></h2>');

this solution ( you can get rid of the if is_page when you want to be active on all sites) will work.
On future Projects you can use my edited alb elements where you have the choice to set the h-tag as you like!
https://webers-testseite.de/edited-enfold-alb-elements/#sliders

If you have no concerns about GDPR, you can enqueue the styles of Fontawesome via CDN.
So you can use it manual – but problem would be that these sources need the newest jQuery – not that common one that Enfold uses !
You can do it via functions.php of your child-theme:

add_action( 'wp_enqueue_scripts', 'enqueue_awesome' );
function enqueue_awesome() {
  wp_enqueue_style( 'prefix-font-awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', array(), '4.7.0' );
}

So my Advice is to use fontello fontawesome – import that to Enfold and use it with Enfold buttons.
To style the buttons a bit more you can do that: https://webers-testseite.de/buttons/

these are Enfold Buttons Alb with light-transparent layout and a bit of css