here are you logos a bit styled inside svg: https://webers-testseite.de/AltCare.zip
If you do it this way described above ( the white one to transparency options input field – the black one to normal logo input field.
i styled your logo inside – you see some groupings with ids – each of them can be selected separatly now. The underlined “preserve…” is for shrink behavior of the svg – now it shrinks in y-direction to the middle but on x-axis to the left

This is only possible with that plugin mentioned on top.
But if you see this page : https://webers-testseite.de/cynthia/alt-care/
you see what you can do with real inline svg files.

so with inline svg i can colorize only the Alt/Care on scrolled state etc. pp

Info : Enfold sets for transparency header state a class to header: av_header_transparency
on shrinking header the classes comes to header : header-scrolled and header-scrolled-full

All comes to child-theme functions.php
just for WordPress Things

// Remove unneeded WP image sizes
add_filter( 'intermediate_image_sizes_advanced', 'prefix_remove_default_images' );
// Remove default image sizes here. 
function prefix_remove_default_images( $sizes ) {
// do NOT remove small and medium sizes, they are used in backend Media Library!
// unset( $sizes['small']); // 150px
// unset( $sizes['medium']); // 300px
 unset( $sizes['large']); // 1024px
 unset( $sizes['medium_large']); // 768px
 return $sizes;
}

here for Enfold Sizes:

// Disable loads of Enfold & WP image sizes upon upload
// do image sizes manually, double-size with high compression for retina screens
// use Photoshop to set exact double size and quality between Q30 and Q40
add_action('init', 'remove_enfold_image_sizes');
function remove_enfold_image_sizes() {
// do NOT remove widget size, is used in backend portfolio items!
// remove_image_size('widget');
  remove_image_size('square');
  remove_image_size('featured');
  remove_image_size('featured_large');
  remove_image_size('portfolio');
  remove_image_size('portfolio_small');
  remove_image_size('gallery');
  remove_image_size('magazine');
  remove_image_size('masonry');
  remove_image_size('entry_without_sidebar');
  remove_image_size('entry_with_sidebar');
  remove_image_size('shop_thumbnail');
  remove_image_size('shop_catalog');
  remove_image_size('shop_single'); 
  remove_image_size('shop_gallery_thumbnail');
}

This is better to be done before making Content.
If you will make it later – you had to use some plugins like force regenerate thumbnails

PS : comment out the image sizes you like to hold on your installation

This wish I can only send back. Thank you very much.

I’d recommend a little plugin: https://en-gb.wordpress.org/plugins/svg-support/
Besides the advantages of using svg like imgs, it also has the advantage that you can see previews of svg files in the media library.
Furthermore you could also use the svg you use inline; i.e. if an img src encounters an svg, the img tag is exchanged with the svg. etc. pp

Using an inline svg file could have a lot of advantages. f.e. you can influence the classes in the svg by css.
See here – and scroll down. The “Bonn” has in the svg a given class and i set the opacity to zero on header-scrolled.
Or on hove fill it red etc. : https://webers-testseite.de/cynthia/

All entries of the lightbox popups ( in Masonry and Gallery ) get their content from image attributes. These Attributes comes from Media Library – so they are globally set. If this should be a usefull feature it has to be a source input field that could be set individually on the inserted images.
F.e:
This input field may only be set for this image in this particular gallery.

On image ALB we can create an additional Input Field on customising the image.php a bit. But for gallery or masonry i did not find a way to do that.

This could be used to have an individual link in the lightbox with given link-target.

But that is a lot of customisation …
On that last image you can see how i prepared the image.php for that. If there is a lightbox link choosed – the additional input-field is shown and will end in:

don’t know if it happens only caused by enfold. https://wordpress.org/support/topic/php-7-4-support-deprecated-unparenthesized/
Some plugins will cause this too.

try this :

#custom_html-4 {
  margin: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

#top .textwidget form {
  margin-bottom: 0;
}

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

Sprungmarken werden über IDs gesetzt. Eine ID muss daher eineindeutig sein – also einmalig und als ID vorhanden sein.
Dein #praesentation ist in dem Quellcode nicht zu finden – stattdessen sehe ich : <a name="”praesentation”"></a>

IDs kann man natürlich so vergeben wie du es gemacht hast innerhalb eines Textblockes – wobei dann id="praesentation" benutzt werden sollte
Das ID wird dann durch das #-Symbol im element ausgedrückt wird – also zB. <div id="main" …> wird dann kurz zB im css mit #main abgekürzt angesprochen.
Enfold bietet aber bei vielen seiner Elemente die Möglichkeit an IDs direkt über die ALB Elemente zu vergeben.
Dazu musst du das allerdings in den Enfold Optionen aktiviert haben.:

Wenn du diese Option gesetzt hast, dann hast du bei den meisten Enfold ALB Elementen ( headings, text-block, columns etc. pp) einen weiteren Reiter “Developer” – dort kann man eine ID vergeben ( bitte hier nur den Text eingeben ohne #)

PS: für manuelle Anker siehe mal auch hier oder google nach manuelle Sprungmarken setzen : https://www.geldthemen.de/webmaster-und-blogger-base/webseiten-technik-cms-php-html-css/html-anker-setzen-ohne-plugin/

Sorry, that was my mistake – I only replaced the transform code and not the webkit-transform code.

@media only screen and (min-width:990px) {
 .av-section-bottom-logo.header_color {
  position: absolute;
  z-index: 5;
  left: 50%;
  -webkit-transform: translate(-50%, 30px);  /*** only translate not translateX because here are x,y values ***/
  transform: translate(-50%, 30px);   /*** only translate not translateX because here are x,y values ***/
  background: rgba(255,255,255,0) !important;
 }
}

@Mike : yes that was my first looking too – maybe i was on that page before and have something in my cache.
Erasing my cache was the solution.

you are running Enfold 4.2.6 on this Version the option fields are not present.

But your example page from above: https://www.moneyprodigy.com/allowance-for-kids/ is something different. Isn’t it a blog page or a page which shows Portfolios etc. in a list? – or is it a handmade entry?
Do you use for “blog entries” a plugin? i see some classes that are not generated by enfold ez-…
Open that page on an editor and see what is the layout for it.

________
But nevertheless:
On my old fashioned webdesigner mind it is not nice to have more than One h1 on each page visible;
( Maybe in a slider with different h1 captions it is ok )
even if Google sees it differently by now, I once learned that this way. A h1 should be something special and should appear only once on a page. Therefore the choice of Enfold is logical to assign a h2 to these headlines.

just use the css from above only for your non responsive case:

@media only screen and (min-width:990px) {
	.av-section-bottom-logo.header_color {
		 position:absolute;
		 z-index:5;
		 left:50%;
		 -webkit-transform:translateX(-50%);
		 transform:translateX(-50%);
		 background:rgba(255,255,255,0.0) !important
	}
}

you had to style the header logo for 768px to 990px – because i think you would like to have logo too on left side as it is on 768px and smaller.
It comes from that rule ( don’t know where it is from because you have allready merged the css):

.html_header_top.html_logo_center .logo {
left:50%; 
-webkit-transform:translate(-50%,0); 
-ms-transform:translate(-50%,0);
transform:translate(-50%,0)
}

so maybe you use another media querry for it:

@media only screen and (min-width:768px) and (max-width:989px) {
	.html_header_top.html_logo_center .logo {
		left: 0;
		-webkit-transform: none; 
		-ms-transform: none;
		transform: none
	}
}

maybe an !important is necessary – we will see

Well you can have classes on menu list points each – so create a main-menu
the one that should be displayed on desktop devices got then a different class then the mobile devices menu list points.

the red arrows on menu page shows how to activate the menu-item classes field – open first on top “Screen Options” Flyout- then mark “CSS classes”.
that littel arrow besides each menu list point – click it – then you can set a custom-class for each Menu Listpoint.

The rest is quick css with display:none

By the way – Enfold sets on default :
desktop devices got on html a custom class : avia_desktop
and mobile devices got: avia_mobile

so for example: ( see image above)

.avia_mobile .only-desktop {display: none}
.avia_desktop .only-mobile {display: none}

or if it is not meant for devices but for screen-width do it with mediaquerries.

you mean a different hamburger menu?

We don’t have an official way to do this, and I’m not sure of any issues it may cause, but if you thoroughly test this before trying this on a production site, you may find this works for you:

Try this in your child-theme functions.php:

function my_text_strings( $translated_text, $text, $domain ){
switch ( $translated_text ){
    case 'Advanced Layout Builder':  $translated_text = __( 'Guennis Great Builder', $domain );
    break;
    case 'Avia Layout Builder':  $translated_text = __( 'Guennis Great Builder', $domain );
    break;
    case 'Advanced Layout Editor':  $translated_text = __( 'Guennis Great Editor', $domain );
    break;
  }
  return $translated_text;
}
add_filter('gettext', 'my_text_strings', 20, 3);

You want to adorn yourself with someone else’s feathers? :lol ;)