Aha – this is something new to me! if you have not the fixed image size setting on masonry gallery – you will have img as before.
I never recognized that!

So you can work with the gallery title fix and that code. – i will test it on that example page above!

your icon-boxes are now in 1/3 columns – aren’t they?
you only have to put all of them in a 1/1 container . Erase the other two 1/3 container.
Open 1/1 container and set the custom-class for it to: flex-iconboxes – that is only a name to adress ( select ) them much easier.

Unfortunately I can’t give more than illustrated instructions. – If you don’t know how to set a custom class, just ask.
An explanation of what the code does is also attached and a link for more understanding.

If you want simple solutions – you just have to be satisfied with simple layouts.

so – now i see your link page. You are on Enfold 4.5.6 – on some reasons i would advise you to update, but because of this change to background-images – i advise you not to.

So i will see what is the code for Enfold 4.5.6 … brainstorming now

on the reason i mentioned above ( change from img to background-image ) the gallery fix will not work anymore to have alt attribute instead of title shown under the lightbox images.
Please find an alternative way to have that !!!

to solve the problem with the tooltip ( only for the new masonry Enfold 4.5.7 ! ) you can have an empty title attribute on hover:
this to child-theme functions.php

function remove_standard_tooltip(){
?>
<script>
(function($) {
$(window).load(function(){
$('a.lightbox-added .av-masonry-image-container').hover( 
  function() {
        $(this).attr("orig_title", $(this).attr('title'));
        $(this).attr('title', '');
  }, function() {
        $(this).attr('title', $(this).attr("orig_title"));
  }
);
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'remove_standard_tooltip');

bei der Eingabe der Domain dort bei Google – die reine Domain angeben gefolgt von einem Asterisk
(früher war noch eine leerstelle dahinter von Nöten, weil der Asterisk sonst verschwunden war.
also zB so : *.domain.de/*
Dann sollte die komplett Domain / eben auch unterseiten freigeschaltet sein. Bitte beachten, dass es dauern kann ( 15min ) bis das greift.

a different but similar way is to use the flexbox model: And this is a more mighty tool to adjust each column as you like – my prefered method.
This is the setting of the layout:

you see that the custom Class is set on the 1/1 container! – here in my example code : flex-iconboxes

quick css:

@media (min-width: 990px) {
  .flex_column.flex-iconboxes {
  display: flex;
  flex-flow: nowrap row;
  justify-content: space-between;
  align-items: stretch;
}

.flex-iconboxes .iconbox {
  flex: 0 1 30%;
  background-color: #e8e8e8 !important;
  border-radius: 5px;
  margin-bottom: 0 !important;
}

.flex-iconboxes .iconbox_content {
  box-shadow: none !important;
}
.flex_column.flex-iconboxes::before, .flex_column.flex-iconboxes::after {
    display: none;
}
}

the background-color of the iconboxes is set here for all!

if you have different bg-colors set them via:

.flex-iconboxes .iconbox:nth-child(1) {
    background: #cdf7e7 !important;
}

.flex-iconboxes .iconbox:nth-child(2) {
    background: #d0e4f4 !important;
}

etc. – btw: if you break your menu at 768px you have to adjust that value on media query setting to min-width: 768px

see result here: https://webers-testseite.de/iconboxes-with-equalheight/

______________

what does the code do
the 1/1 column is set as the parent container to display : flex
the flex-items are set to 0 1 30% that means the items are not allowed to grow (first value) – the items are allowed to shrink (second value) the flex basis is set to 30%.
because the parent container gets justify-content : space-between the space between the items is for all 10% makes with two spaces 5% each.
align-items : stretch – means they get the same hight.

see nice tutorial here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

could you make your page link public here?

well i think you mean the image used for transparency options – it is indeed under subtext class the image – but the image itself has a unique class : alternate – so you can use that too for select the right image.
i noticed that little snippet to influence both logo img and logo alternate img . On most of my installations it is not necessary to have to wait for dom loading finished. But it will be the right way to do it exactly.

function custom_logo_attriubtes(){
?>
<script>
(function($){
  $('.logo img').attr({ title:"custom_title", alt:"custom_alt" });
  $('.logo img.alternate').attr({ title:"transparent Logo", alt:"Alt Transparent" });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_logo_attriubtes');

i guess you can use both prop or attr to have this set.

there is a little plugin which will do that : https://wordpress.org/plugins/page-scroll-to-id/
you have to mark that setting: “Scroll from/to different pages (i.e. scroll to target when page loads)”
Then it will first load the #top anchor and then after a delay scroll to given anchor position. You can determine the delay and if necessary add a scroll-offset.
Look here in action: https://webers-testseite.de/8-columns/#def

if you have more than one mega-div and you want different background-images on them you have to select them by there menu-item-id
which comes as an id in front of those rules:

#top #wrap_all .avia_mega_div {
  background-image: url(https://your-image-url.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

#top #wrap_all .avia_mega_div *  {
    background: transparent !important;
}

#top #wrap_all .avia_mega_div ul li > a:hover {
    background-color: #900 !important;
    color: #fff
}

the last rule is only to have a hover state for the sub-menu items

__________________________________________________________________

as mentioned above if you want different images on more than one mega-div this will be a specific example with menu-item-id:

#top #wrap_all #menu-item-3529 .avia_mega_div {
  background-image: url(https://your-image-url.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

or i see now that the top-level menus got an index on the menu-items f.e.: menu-item-top-level-5
so specific rule could be:

#top #wrap_all .menu-item-top-level-5 .avia_mega_div {
  background-image: url(https://your-image-url.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

you can see the result here on “testpages” Menuitem : https://webers-testseite.de/

• This reply was modified 6 years, 1 month ago by Guenni007.

with that code in htaccess file – every link to a pdf will end in a download. https://kriesi.at/support/topic/adding-a-pdf-download-to-store-products/#post-1105357

well this is no competition but if you will take my code you only have to make it specific to menu :

#avia-menu .twoliner > a {
    line-height: 20px !important;
    padding-top: 63px !important;
}

and again – what if the second line has a word longer than the first line ? f.e.
Project
Photo Gallery

__________

btw: maybe you got that Cross-Origin Resource Sharing (CORS) error with the entypo-fontello icons.
you can find some solutions to that by searching CORS or look to documentation:
https://kriesi.at/documentation/enfold/icon/#troubleshoot

Most – there will be an apache Server- i have that solution for htaccess file

As long as the second word isnt much longer than the first one – this will work!

if you leave the header at non-shrinking it could be done this way too:

• Give a custom class to that menu item f.e. : twoliner
• insert item label – as you does with linebreak

.twoliner > a {
    line-height: 20px !important;
    padding-top: 63px !important;
    text-align: center;
}

Advantage of that method is that the menu-item width grows with the inserted words.

______________________________

By the way : if you don’t know how to set a custom class to menu-items:
on the top of the menu settings page – there is on top right a slide out settings tab. There you can mark additional fields for the menu settings.
Click to enlarge the image

After activation of class the items look like this:

there you are

sometimes it is like magic if you try both one after the other.
so go to icomoon upload your svgs – download them – unpack that zip file and look for the svg font file.
This svg font file you can drag and drop to fontello icons. –
Download the font files from fontello and upload that fontello.zip file to enfold.
Don’t ask why – sometimes this helped me to get it work.

PS
give the fontello files a different name than that you have used allready.

you can force download by different methods.
One globaly – put this into your htaccess file in the root directory:

<FilesMatch "\.(?i:pdf)$">
<IfModule mod_headers.c>
    ForceType application/octet-stream
    Header set Content-Disposition attachment
</IfModule>
</FilesMatch>

or f.e. place the download in this way:
<a href="https://domain.de/xyz.pdf" download="Aufsatz_ueber_Nettiquette.pdf">Nettiquette</a>

for better adivce it would be necessary to see your site.