hey Mike

Otherwise, I can just use an image grid, but that would be more cumbersome because I would then have to link each image individually. With the other two options, I would only need to create the individual pages.

I guess the above solution will satisfy her
see example-page: https://webers-testseite.de/sabine/

you can increase the Column Count number there at the drop-down by making appropriate changes in the portfolio.php.

you can download the whole portfolio.php from pastebin:
( this is on basis of enfold 4.8.7.1)
look: https://pastebin.com/v1s9sdQb
download: https://pastebin.com/dl/v1s9sdQb

This new portfolio.php you can upload via ftp to a folder named shortcodes in your child-theme folder:
child-theme/shortcodes
To load those edited child-theme alb elements ( see docu ) – you had to place that snippet in your child-theme functions.php:

function avia_include_shortcode_template($paths){
  $template_url = get_stylesheet_directory();
      array_unshift($paths, $template_url.'/shortcodes/');
  return $paths;
}
add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);

after that in the dom the portfolio will have that extra class : grid-col-8 ( in your case )
now you only have to put this to your quick css ( or something similar ):

.grid-col-8 .grid-entry {
  width: calc(12.5% - 8.75px) !important;
  padding: 0;
  margin: 0 10px 10px 0 !important;
}

.grid-col-8 .grid-entry:nth-child(8n) {
  margin-right: 0 !important;
}

ps: 8.75px because 8cols will have 7 spaces between with a setting of 10px it is 70px total space 70px/8 = 8.75px

I suspect that pure css animations can’t do what you want them to do.
These animations need detection of whether an element is in the viewport or not. These events could be detected via Element.getBoundingClientRect() and this has wide browser support so far, but that seems to be a continuous high performance interaction.
in the meantime there seems to be a better solution using intersectionObserver. But you would have to add these listeners yourself via child-theme functions.php. But then they are very flexible to use.

My guess was that the normal logo was removed ( that’s why the Enfold Standard logo is placed there ), but just not the logo at ” header – transparency options – Transparency Logo”.
But since all pages are those with transparent header, only the “alternate” logo is displayed in the subtext ( because no shrinking and fixed header is set) , which is just this what we see in the frontend.

_______________

_______________
What you can do too – is remove the logo from Transparent Logo input field. And place your wanted logo on the logo input field. That will work too. Because if there is no logo set for transparency – Enfold will only use the normal logo set on theme options.
_______________
PS: However, if you want to replace with writing (font) it doesn’t matter anyway. The css will hide all .logo img/svg.

please show me a good looking 12 column layout ;)

And where did you replace on Enfold Options that logo ?
for transparency headers : header – transparency options – Transparency Logo
or for non transparent Headers on : Theme Options – Logo

________

you can use the logo subtext for that in child-theme functions.php
f.e. showing bloginfo name ( that is the text you insert on apearance – customise for Site Title )

function kriesi_logo_addition($sub){
  $sub .= "<span class='logo-title'>";
  $sub .= get_bloginfo( 'name', 'display' );
  $sub .= "</span>";
  return $sub;
}
add_filter('avf_logo_subtext', 'kriesi_logo_addition');

OR use any text you like in additon:

function kriesi_logo_addition($sub){
  $sub .= "<span class='logo-title'>";
  $sub .= "Your LogoText";
  $sub .= "</span>";
  return $sub;
}
add_filter('avf_logo_subtext', 'kriesi_logo_addition');

Then on quick css:

.logo img, .logo svg {
  display: none;
}

.logo .subtext .logo-title {
  font-size: 36px;
  font-weight: 700;
  color: #fff
}
/*** if you need different colors on your text after scrolling on shrinking header ***/
.header-scrolled .logo .subtext .logo-title {
  color: #000
}

if you do not have shrinking header you can differ between transparent and non transparent header on that header class: av_header_transparency

• This reply was modified 4 years, 2 months ago by Guenni007.

but on your Quick css code you got a closing bracket on this rule ?

i can not reproduce that – i got no errors on console log file:

Are you working with Block Editor on your pages ? Do you see those layouts like mine from above? And you only can not open the popup Editor windows?

maybe this in the upcomming fixes will give you a hint:

• fixed: svg logo broken when svg tag in multiple lines
• fixed: svg logo not displayed for non logged in users

is it an inline popup or how did you get the anchor link into the popup – please post it here:

this could be a function that will do the job – you can choose any trigger class for it you like

  $(document).on('click', '.popup-modal-dismiss', function (e) {  
    $.magnificPopup.close();
  });

this could be part of your inline-popup script or an extra snippet – easier to give advice if i see your code.

look here : https://kriesi.at/support/topic/graceful-transition-for-pop-up-modals/#post-1205887