Hide Nav bar, should appear when scrolling + slanted bottom edge of header img - Support

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
January 26, 2023 at 2:40 pm #1395387

Alex Freelance
Participant

Hi there,

first of all I want to say: your work is much appreciated, thank you for everything!

I’ve performed a search and also checked the docs, but could not find a solution for my problems.

1.) I would like to hide the nav bar/menu items at pageload and would like them to be displayed when user scrolls down.
I’ve already set my alternative header to also be displayed when scrolling down. The Nav Menu should appear simultaneously when the other header gets displayed.

Hopefully you can help me out with a quick css snippet, since the event listener for scroll down should be already in place somewhere :)

2.) the bottom edge of my Header image (that one from the alternate header) should have a slanted edge and aligned to that slanted yellow line. is it possible through some svg manipulation here? I needed the white space in first place because I have also put whit space left and right of the viewport and it has to be sort of rounded off, if you know what I mean. Sorry, but English is not my 1st language.

The website in question is mentioned in private content box.

Any help is highly aprreciated, many Thanks in advance!
Best,
Alex

January 28, 2023 at 4:08 pm #1395722
Mike
Moderator
Hey Alex Freelance,
Thanks for your patience and the link to your site to hide your homepage menu until the page has been scrolled please try this css:
```
@media only screen and (min-width: 767px) { 
	#top.home .av_header_transparency #header_main_alternate {
		visibility: hidden;
	}
}
```
I see that you are using a background image for your header with a yellow arch, to make the white area under the yellow arch transparent please try this css:
```
.header_color .header_bg {
	-webkit-mask-image: unset !important;
	background-color: transparent !important;
}
```
After applying the css, please clear your browser cache and check.

Best regards,
Mike
February 10, 2023 at 12:50 pm #1397450

Alex Freelance
Participant

Thanks a mill Mike, your solution worked like charm!

February 10, 2023 at 12:54 pm #1397454

Mike
Moderator

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Hide Nav bar, should appear when scrolling + slanted bottom edge of header img’ is closed to new replies.