this is a not so complex Logo – why don’t you make a svg from it. The advantage is – that it is a vector based Graphic. So it is always sharp.
The font is, i guess Trade Gothic – so only the branding is to create:

Download it from here – and forget about sub logo text etc.

https://webers-testseite.de/wp-content/uploads/IVEY-logo.svg

You can contact me again in five years. ;)

PS: if you like to have different colors – then open the svg with a good text editor (notepad ++ or sublime text) – you will see that the groups are ID’s and different colours are classes: – so it is easy to recolorise it:

first – what kind of box ( enfold ) a column or a icon-box etc. here is an example with columns:
i gave a custom class to those columns : hoverstyle.
https://webers-testseite.de/aussie/

Wegen etwas höherer Browser Kompatibilität (so war es jedenfalls mal bei Safari und clamp) nutze ich für fluide font-size Definitionen die min/max Methode.
Siehe Link in Enfold Typography Sektion: https://spencermortensen.com/articles/typographic-scale/ wählte ich die musikalische Skala – und zwar einmal mit Faktor 2 und dann 3 ergeben sich folgende font-size Größen:
40-60, 36-50, 32-42, 28-34, 25-29, 22-24
was zu folgenden fluid Werten führt (ausgehend von einem viewport von 320px bis 1500px (Fluid-Font Calculator)
____
Due to slightly higher browser compatibility, I use the min/max method for fluid font-size definitions.
See link in Enfold Typography section: https://spencermortensen.com/articles/typographic-scale/ I chose the musical scale – once with factor 2 and then 3 the following font-size sizes result:
40-60, 36-50, 32-42, 28-34, 25-29, 22-24
which leads to the following fluid values (based on a viewport of 320px to 1500px (Fluid-Font Calculator)

da Enfold selbst mit CSS Variablen arbeitet:
as Enfold itself works with CSS variables:

:root {
  --enfold-font-size-theme-content: 13px;
  --enfold-font-size-theme-h1: 34px;
  --enfold-font-size-theme-h2: 28px;
  --enfold-font-size-theme-h3: 20px;
  --enfold-font-size-theme-h4: 18px;
  --enfold-font-size-theme-h5: 16px;
  --enfold-font-size-theme-h6: 14px;
}

könnte man die mittels Filter überschreiben:
you could overwrite them using a filter:

function my_avf_dynamic_css_after_vars( $output = '' ){
  $output .= "\n";
  $output .= ":root {\n";
  $output .=    "--enfold-font-size-theme-h1: min(max(40px, calc(2.5rem + (60 - 40) * ((100vw - 320px) / (1500 - 320)))), 60px);\n";
  $output .=    "--enfold-font-size-theme-h2: min(max(36px, calc(2.25rem + (50 - 36) * ((100vw - 320px) / (1500 - 320)))), 50px);\n";
  $output .=    "--enfold-font-size-theme-h3: min(max(32px, calc(2rem + (42 - 32) * ((100vw - 320px) / (1500 - 320)))), 42px);\n";
  $output .=    "--enfold-font-size-theme-h4: min(max(28px, calc(1.75rem + (34 - 28) * ((100vw - 320px) / (1500 - 320)))), 34px);\n";
  $output .=    "--enfold-font-size-theme-h5: min(max(25px, calc(1.5625rem + (29 - 25) * ((100vw - 320px) / (1500 - 320)))), 29px);\n";
  $output .=    "--enfold-font-size-theme-h6: min(max(22px, calc(1.375rem + (24 - 22) * ((100vw - 320px) / (1500 - 320)))), 24px);\n";
  $output .=    "--enfold-font-size-theme-content: min(max(16px, calc(1rem + (20 - 16) * ((100vw - 320px) / (1500 - 320)))), 20px);\n";  // p-tags  
  $output .= "}\n";

  return $output;
}
add_filter( 'avf_dynamic_css_after_vars', 'my_avf_dynamic_css_after_vars', 10, 1 );

ich behielt mal die long-hand Version der min-max schreibweise – so wird deutlich wie die font-sizes berechnet werden.
I kept the long-hand version of the min-max notation – this makes it clear how the font sizes are calculated.

um es dann global durchzusetzen dies in die quick css:
to then globally enforce this here in the quick css:

body {font-size: var(--enfold-font-size-theme-content);}
#top h1 {font-size: var(--enfold-font-size-theme-h1);  }
#top h2 {font-size: var(--enfold-font-size-theme-h2); }
#top h3 {font-size: var(--enfold-font-size-theme-h3);  }
#top h4 {font-size: var(--enfold-font-size-theme-h4); }
#top h5 {font-size: var(--enfold-font-size-theme-h5);  }
#top h6 {font-size: var(--enfold-font-size-theme-h6);  }

btw: on Layout Builder – Typography Input Fields – you can activate that switch to have:
“Activate to replace predefined selectboxes with font sizes with text fields to use custom units. Only recommended for experienced users who know, what they are doing. This is in active beta (since 5.0.1).”
– you then can insert those fluid values to that input field. e.g. for extremly big h1 headings (80-120px) etc.

I would create an external format in my image processing program and then place the images there so that they have the height and width corresponds to the true proportions. Here, unfortunately, we come to the probable fact that such a can will look lost next to the barrel.

see here : i put all images in the same outer image dimensions ( 400 x 600 )
and then inserted the individual images in the image program according to their size. As a result, the png’s all have the same size, but the contents are proportional to each other.

download them here: https://webers-testseite.de/Kelly.zip

see – with code on the example page: https://webers-testseite.de/lunar-kitten/

if the place is too narrow the grids will autoflow – if you like to flow only to a 2/2 grid then we had to set a media query.
i set the image background to a color – so you can see that the images got the same outer dimensions.

• This reply was modified 7 months, 1 week ago by Guenni007.

or try instead :

.avia_textblock.bottomlined  {
  display: table;
}

  .avia_textblock.bottomlined > div {
    min-width: 80px;
    display: table-cell;
    float: none;
    border: none;
    padding-right: 10px !important;
  }

#top #footer {
  padding: 5px 0 ;
}

#top #footer .widget {
  margin: 10px 0 ;
}

#top #socket .container {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

The labeling there for the Enfold header options is misleading. Enfold sets the header to position : fixed when this option is selected.

position : sticky and position: fixed are not equivalent

i can see on your page that this is set on enfold child css – the default setting is by enfold in layout.css:
so that was my question

Also, I added the CSS you wrote under the Enfold Child Theme Options—General Styling—Quick CSS section, but it is still not working. Your suggestions may have confused me, so if you could please verify, that would be great. Thanks!

Thats why i told you to remove that setting from quick css
and it is placed twice – remove that (both):

can i see the page?

Otherwise, make it a competition! Anyone who wants to should send in a demo. The content is already known. Maybe a few hints on what new features should be emphasised.
PS: The news about 6.0.7 has already been sent out, but you can still download the old version from Envato.

if you really want to change only on mobile devices – there is a wp_is_mobile( )

f.e:

function av_change_mobile_logo($logo){
    if(wp_is_mobile()){
      $logo = "/wp-content/uploads/your-mobile-logo.png";
    }
    return $logo;
}
add_filter('avf_logo','av_change_mobile_logo');

on Advanced tab of the Element : under Performance – choose : “Do not use Responsive Images”
if you do not have that choice: put this to your child-theme functions.php:

add_theme_support('avia_show_alb_responsive_image_option');

then the webp will do their job. For some reason, the images from the srcset are superimposed.

so i can see your search input field. You like to center it now – that this box will have the same alignment than the other nav items?

so remove the display options first for that menu-item:

#menu-item-3327 {
  height: 90px;
  display: flex;
  align-items: center;
}

it is important to use the navigation as flex container:
( have a look if this is better)

#avia-menu {
  display: flex !important;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}

#menu-item-3327 {
  margin-right: 10px;
}

.dgwt-wcas-search-input {
  height: 35px !important;
}

.dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
  height: 35px;
  background-color: #22689e !important;
}

.dgwt-wcas-sf-wrapp .dgwt-wcas-ico-magnifier{
  overflow: visible
}

.dgwt-wcas-sf-wrapp .dgwt-wcas-ico-magnifier path {
  fill: #FFF !important;
  stroke: #FFF;
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit::before {
  display: none;
}

the crux is – if you have links on your images – they will interfere with prev – next navigation.
If no links are assigned to the images, then it is possible to have left side prev – right side next.

if you got no additional links on the images but buttons inside the slide we can have next slide for image click.

und du hast absichtlich das mega-div so gestaltet, daß immer eine neue Zeile aufgemacht wird?
Denn eigentich ist so ein Menu prädestiniert für ein multi-column mega-div.

Trotzdem mal so: du weißt besser wie hoch dein Header inclusive Nav und Breadcrumb maximal ist, das sollte dann mindestens unten abgezogen werden:

#header .avia_mega_div {
  overflow: auto;
  height: calc(100vh - 200px);
  width: 400px !important;  /*** eventuell auch etwas verbreitern - das gibt dann weniger Umbrüche ***/
}

eventuell verkleinerst Du aber auch noch die Abstände:

#top #header .avia_mega_div > .sub-menu {
  padding: 10px 15px 10px;
}

on pastebin – this is the already edited footer.php. You can download it there.
If you place it to your child-theme root directory ( just besides style.css, functions.php and screenshot.png) it will automatically work.
you can see the changings because they are commented in that file. i just shifted the closing div of #main to the top.
it seems to work as long as you do not need the curtanin effect footer – with footer-page it works too – see example pages
https://enfold.webers-webdesign.de/enfold-consulting/
or
https://enfold.webers-webdesign.de/enfold-photography-portfolio/

on those two pages i aditionally added:

.responsive #top #footer .container, 
.responsive #top #socket .container,
.responsive #top #footer-page .container {
  max-width: 95vw;
}