Random image

Hi there,

Given some of the elements are built with Elementor - the options we can explore may not work... can you share a link to the site where i can see what you have so far ?

Here is the link:
https://finanzberatungskanzlei.ch.bezier.ch-meta.net/

If there is the need to change the header image to a Generatepress-Element I will do that...

To do it in GP - would mean removing the Elementor built Header Template, as this replaces the site header and the GP Hooks that would be required to add this kind of function.

Have you checked with Elementor support to see if you can add the randomised images to their Section Widget?

Unfortunately they don't have this feature. They suggested to use a 3rd party addon/plugin.

So I have to design the navigation including header image with GP to use GP's function for a randomised image?

The function that Tom provided here was custom developed:

https://generatepress.com/forums/topic/elements-random-background-image-on-page-load/#post-1299786

It filters the background image of a GP Header Element.
Problem is when you build the header with Elementor it removes the GP Site Header, and the hooks that the header element requires.

OK. So I rebuild the Header including image with GP...

A few questions due to rebuild:

- Is it possible to make the navigation shrink when scrolling without hiding first when scrolling?
- Can I add an underline hover on the bottom of the navigation instead of font color change?
- Can I disable the arrow for sub menu items?
- Is it possible to add a Elementor Global Button with short code or an other way to the header image?
- Where can I change the box shadow at the bottom of the navigation?

Another problem I have is, that the background header images are not responsive. For desktop purposes I have set a lot of top and bottom padding to achieve a height of 800 px. But on mobile devices only a small part of the picture is shown.

Hi there,

– Is it possible to make the navigation shrink when scrolling without hiding first when scrolling?

You can try setting the transition to "none". Setting it to fade or slide animates the swap between sticky mode and static mode so if you wish to keep the transition animation, there will be a fraction of a second where something hides and something re-appears.

– Can I add an underline hover on the bottom of the navigation instead of font color change?

Yes, with custom CSS. Example:

.main-navigation li:hover a {
    text-decoration: underline;
}

– Can I disable the arrow for sub menu items?

We can hide it with CSS as well. Example:

ul.sub-menu span.dropdown-menu-toggle {
    display: none;
}

– Is it possible to add a Elementor Global Button with short code or an other way to the header image?

Shortcodes work within the Header Element's code area but I'm not sure if Elementor shortcodes work outside of its page builder.

You can try it out but we can't guarantee if it will work. The theme doesn't control what Elementor does.

– Where can I change the box shadow at the bottom of the navigation?

We can do this with Custom CSS as well:

This is the current value of box shadow on your site.

.sticky-enabled .main-navigation.is_stuck {
    box-shadow: 0 2px 2px -2px rgb(0 0 0 / 20%);
}

You can add this to Additional CSS but change the value. The changed value should override the current value as it will win in precedence. :)

Another problem I have is, that the background header images are not responsive. For desktop purposes I have set a lot of top and bottom padding to achieve a height of 800 px. But on mobile devices only a small part of the picture is shown.

This is tricky to deal with as well because the Header element can't guess how the user wants the background image to appear on mobile. Because image will vary especially when it's set to "featured image", there's no way of knowing what's the best setting for each and every featured image for every post in existence.

Now to remedy this, can you specify how you want the image to appear on mobile? If you want the whole image to appear on mobile as well, try this CSS:

@media(max-width:768px){
.page-hero {
    background-size: contain;
}
}

But the problem is, if we force the image to be fully visible and keep the aspect ratio, it will result in something like this - https://share.getcloudapp.com/jkuPQpoJ

And if we try to make it stretch to fill the gaps, it will look bad as well like this - https://share.getcloudapp.com/X6uAovrR

The best compromise we added as a default is to leave it background-size: cover; which is what you currently see.

Thanks.

I set the transition to none. That works partially. If I scroll down the navigation shrinks. Sometimes it grows again, if I scroll up, but after a few tries it stays shrinked even if I scroll to the top of the page.

I added the provided CSS for the underline hover in navigation. I havent written completely what I want to achieve before. I want an underline on the bottom of the navigation (same width like the respective text of the navigation, 3 px wide) in hover color while the text of the navigation doesn't change while hovering.

Is that possible too?

The CSS to hide the arrow for submenu items seems not to work for me. I added it. But no change.

Add this CSS so the navigation doesn't shrink.

nav#sticky-navigation img.header-image.is-logo-image, nav#site-navigation img.header-image.is-logo-image {
    height: 75px;
    width: auto;
}

The navigation shrinks because the logo size is different for sticky navigation mode. Setting this CSS forces the non sticky and the sticky navigation to have the same logo size.

I added the provided CSS for the underline hover in navigation. I havent written completely what I want to achieve before. I want an underline on the bottom of the navigation (same width like the respective text of the navigation, 3 px wide) in hover color while the text of the navigation doesn’t change while hovering.

Go to Appearance > Customize > Colors > Primary Navigation and make sure you set the same color for "Text" and "Text Hover" so the color doesn't change when you hover.

As for the underline thickness, Change this CSS:

.main-navigation li:hover a {
    text-decoration: underline;
}

to this:

.main-navigation li:hover a {
    text-decoration: underline 3px;
}

The CSS to hide the arrow for submenu items seems not to work for me. I added it. But no change.

I don't see any submenu items why arrow. Perhaps you meant the parent menus?

If it's the parent menus you're trying to remove the arrow on, go to appearance > Customize > LAyout > Primary menu and set the dropdown to "Hover".

Thank you for your help. We changed our scope an will stay with the old version (without random header image) for the moment. Perhaps I will implement this later...