Best would be to see the site it concerns. because i do not know how you placed the image in the footer.
Is it an image widget or a text with implemented image ?

And to what direction the search-input field should open?
Where does the ajax search results should toggle?
What happend to the scroll to top button?

This in child-theme functions.php will place the magnifier icon in the menu3 of enfold:

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

          $items .= '<li id="menu-item-search3" class="noMobile menu-item menu-item-search-dropdown menu-item-avia-special">
                 <a href="?s=" data-avia-search-tooltip="'.$form.'" '.av_icon_string('search').'>
                  <span class="avia_hidden_link_text">'.__('Search','avia_framework').'</span>
                 </a>
               </li>';
      }
      return $items;
}
add_filter( 'wp_nav_menu_items', 'avia_append_search_nav3', 10, 2 );

but i do not know how to get the ajax search results to show

https://webers-testseite.de/gallery/

.category-allgemein .av-masonry-entry-title {
  color: red;
}

.category-grafik .av-masonry-entry-title {
  color: green;
}

wait – there is a sub-menu – ok i look …

yes : change in the css code above ( inside the mediaquery – not as an addition – a substitue) :

#main > div:not(.av-submenu-container) {
    z-index: 3;
    position: relative !important;
}

so that there is only: https://kriesi.at/support/topic/fixed-background-color-section-doesnt-work/#post-1235469

The not rule excludes the submenu container from that.

only this:
corrected code including the fix for the submenu

@media only screen and (min-width: 768px){
  #wrap_all {
      padding-bottom: 400px;
  }

#main > div:not(.av-submenu-container) {
    z-index: 3;
    position: relative !important;
}

  #main #vidde {
      position: fixed !important;
      bottom: 0;
      z-index: 0 !important;
      height: 400px;
      width: 100%;
  }
}

there is two ID’s on that rule:

  #main #vidde {
      position: fixed !important;
      bottom: 0;
      z-index: 0 !important;
      height: 400px;
      width: 100%;
  }

The reason is: #main > div is a rule with one ID and an additonal element
so it is more specific than a rule with only one ID – because #vidde is a #main > div ( it is a div that follows directly the #main container) – the postion : fixed could not overwrite the #main > div rule.
If an element fullfills more than one selector – the more specific will win that run !

See here f.e. a specifity calculator: https://specificity.keegan.st/

Cancel all said above and look to this solution:

here we go with your example page: https://tuddal.one/

put this to your quick css:

@media only screen and (min-width: 768px){
  #wrap_all {
      padding-bottom: 400px;
  }

  #main > div {
      z-index: 3;
      position: relative !important;
  }

  #main #vidde {
      position: fixed !important;
      bottom: 0;
      z-index: 0 !important;
      height: 400px;
      width: 100%;
  }
}

But
there are parts of the content ( grid rows ) where you have set to non full width – but there is a better way to have that – because you leave the space left and right to the grid row : transparent.

If i use a grid-row and does not want to have a full-width grid-row – i have a little snippet on that !
( So remove your settings for those grid-rows f.e.: #av-grid-custom-width ) and put this to your child-theme functions.php )
and give to those grid-rows that should not be a fullwidth one the custom-class: grid-notfull

/******** Gridlayout not fullsize - give a custom-class to the grid-row element:  "grid-notfull" *********/
/**** adopt the 1310px to your setting on enfold - general Layout - dimensions ****/
function grid_layout_notfull(){
?>
<script>
(function($){
    $('.av-layout-grid-container.grid-notfull' ).wrap( '<div class="main_color notfullsize color1"></div>');
    $('.notfullsize').css({"clear": "both", "width": "100%" , "float": "left" , "position": "static" , "min-height": "100px" });
    $('.grid-notfull').css({"max-width": "1310px", "margin": "0 auto" , "padding": "0 50px"});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'grid_layout_notfull');

you see what the code above does: it will give the grid-row itself the styling of a .main-color .container and wrap it with a fullwidth container with styling of a color-section.

i did that with a child-theme footer.php
that is fast done .

see here what i have done with footer i shifted the end main div to the top
see on top the extra container
and the commment at line 275

pastebin

the extra container gives me the possiblity to fill the gap that a fixed footer would create as fixed container.
It is like a spacer with variable calculated height – because we had to react to the variable footer/socket height.

function add_curtain_footer_effect(){	
?>
<script type="text/javascript">
(function($) {
$(window).bind("load resize", function() {
	setTimeout( function() {
		var socketh = $('#socket').outerHeight();
		var footerh = $('#footer').outerHeight();
		var spacerh = socketh + footerh - 5 ;

		$('#distance').css('height', spacerh );
		$('#footer').css('bottom' , socketh);
	}, 150)	
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_curtain_footer_effect');

i did this only for home page on that example

/********* curtain effect***********/

.home #main > div  {
    z-index: 3 !important;
    position: relative !important;
}

.home #footer { 
    left: 0;
    width: 100%;
    z-index: 2;
   position: fixed
}

.home #socket {
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    position: fixed
}

.home #main #distance  {
    clear: both;
    z-index: 0 !important;
}

the clearing on #distance is very important.
so this is then the Structure:

and the #distance height is calculated on load and resize

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

For better instructions it would be nice to see the page. There are too many styling options on blog grid – that the selectors might be a bit different.

i have had a similar problem – the thing why this is not as easy as it seems to be is that the read-more link is part of the excerpt.
So i wrote this little script to rearange the DOM Structure
This comes to child-theme functions.php:

function wrap_read_more_link(){ 
?>
<script type="text/javascript">
(function($) {
    $(window).load(function(){
        $('.read-more-link').each(function() {
            $(this).parent().parent().append($(this));
        });
        $('.slide-entry').each( function() {
            $(this).find('.slide-content .entry-content-header').append($(this).find('.entry-footer'));
            $(this).find('.more-link' ).wrapInner('<span class="more"></span>');
        }); 
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'wrap_read_more_link');

( i wrapped the more-link in a span to have more styling options)
After that the read-more link is last div in slide-content and could be placed absolute in the surrounding container:
this for quick css:

.read-more-link {
	position: absolute;
	bottom: 10px;
	right: 10px;
}
.avia-content-slider .slide-entry-excerpt {
    padding-bottom: 40px;
}

Resultspage: https://webers-testseite.de/blog-posts-in-list-view/

i now go and have a look if it is better to edit the alb element for that DOM Structure.

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

https://kriesi.at/support/topic/4-7-6-update-adding-quotations-under-slider/#post-1232550
from: July 23 ;) just use the search function ;)

it will not be a good solution if you have a fixed and sticky header even on mobile view when in responsive case the next line is created.
if this will be the case we had to find a different solution. This works til iphone5 (320px screenwidth)

Well there is a solution to put those two containers as siblings to #main – inside warp_all.
You only have to edit footer.php and load it as child-theme footer. And a bit of jQuery in functions.php.

See result ( in this case only for home page ): https://webers-testseite.de/pureinstall/
if this is what you like to have – i will show you how.

the problem stays the same as footer or as a different containter – fixed Elements does not leave a gap in the page where it would normally have been located. this “Gap” had to be there that the page could scroll this amount to show the overlaped fixed container.

did you change something in footer.php to get rid of kriesi backlink info?
you only need to insert to footer copyright info field at the end: [nolink]

or redefine this little function via child-theme functions.php to have your own backlink.

function new_nolink(){
$kriesi_at_backlink = "<a href='https://webers-webdesign.de'>Webers WordPress Webdesign</a>";
return $kriesi_at_backlink;
}
add_filter("kriesi_backlink","new_nolink");