Hi guys, if anyone can help thaty would be tremendous.
The problems is my stick nav on scroll doesn’t change colour and remains transparent. Any help would be gratefully received.
Please find the source material attached.
Hug2019.zip (1.9 MB) Hug2019.bloc (730.7 KB)
Hi John,
I don’t have my MacBook with me, so I can’t see your project file, but I often see this problem when users don’t set the background color of the hero block to what they want to have as a background color of sticky navigation. Even if you have image back ground and color won’t be visible at first, it will be applied to sticky navigation.
Hopefully, that will solve your problem!
Cheers,
Eldar
Hi Eldar
Many thanks for your response. I had indeed set my hero bloc with a coloured background, this isn’t the issue I don’t believe.
Might be worth downloading the file to see if you may have some insight as its a really strange anomaly
Many thanks for your response
Hi Eldar
Did you have any luck seeing the issue in seeing?
Kind regards
John
I downloaded your blocs file and I see that there is no colour set for the first bloc. I changed the colour to see if there was a problem, and everything worked as expected. The sticky navigation took on the colour set for the first Bloc. However, I do see another problem that could be related. You seem to have put a carousel in the first bloc and you’ve used a custom class to position it at the top of the block - essentially covering the navigation area. This means that the hamburger menu isn’t clickable until it appears in the sticky navbar. It would be best to create a standard navbar in the global area and then add a normal Structure 1 column bloc in the main page. You can then add a carousel bric and make the bloc extend to the full width of the screen. You can also remove the padding so that the carousel sits directly under the nav bar. If you set a background colour for the navbar, it will retain it’s colour when it appears in sticky mode. If you don’t set a colour, it will look white when the page first loads, but it will have a transparent background when it comes into view on page scroll. I don’t think it is possible to have the navigation appear over the top of a carousel until it appears as a sticky navigation element as you scroll the page.
Hi Hendon52
Many thanks for having a look, Ah I see, what I wanted to create was a carousel with visible navigation on top so I used an ‘absolute-position’ class which seems to work so the nav is visible in the first instance, and then for it to be a sticky nav with backing colour on scrolling. I will try some other ways of creating this if it can be done of course, many thanks for your insight and help
kind regards
John
Hi John,
Sorry for the delay. I have been very busy with work in recent days!
I just took a look at your project, and second what I said in my previous reply, and what @hendon52 has said in his answer.
There are a few ways you can create the navigation header for your site, but of course, to make it transparent over the image carousel you need to play with custom classes and negative margin. I think I have created something like this before, but it wasn’t perfect (especially on mobile).
The easiest way is probably to use the separate blocs for navigation and for carousel, but you can also continue to use the structure you have now. I will try to come up with the best implementation of this.
Once again, sorry for the delay!
Best regards,
Eldar
Hi Eldar
No problems at all, many thanks for taking time to get back to me I appreciate it.
Kind regards
John
You may like to take a look at this video How to Create a Full-Screen Slider with Owl Carousel | Jquery Plugins Tutorials - YouTube It uses the Owl Carousel slider available from Code Pen. The video shows how you can change the code to include things like a navigation on top of the slider as well as text and button link as in a normal hero block. It does require some manual coding, but it does work. Maybe one of the clever people here could develop this type of thing into a custom bric??? Anyway, it should give you an idea of how to create what you want manually without too much effort.
Hi Hendon
Many thanks for your helpful link, I do believe I have solved the issue, I have attached the revised file and source for you guys tyo see, this works nicely for me now all be it, with a few tweaks for lining up elements
etc
Hug2019.bloc.zip (268.1 KB) Hug2019 2.zip (2.4 MB)
I’m not sure what the effect is supposed to be - there are no assets in the file, but what I see is a white area at the top global area which is a navbar. This kicks in as you start to scroll and appears as a transparent sticky navbar. However, I don’t see the purpose of the navbar element under your carousel. This is never going to be displayed because it’s being covered up by the carousel, so probably best to lose it altogether. Instead of creating or using a hero bloc with a built-in navBar, just use a standard structure 1 column block and add your carousel there - full width, no gutters and set the padding to none. This will achieve exactly what you have at present.The only difference will be that you will have to set colours for the hamburger icon that can be seen in the initial navBar (on the white background) and will also show up when the transparent sticky navBar appears. The images below shows the navBar on first opening the page, and the second image shows how it looks when you start scrolling.
@hendon52 Apologies if I didn’t make myself clear, I just wanted a transparent looking navigation on top of my carousel which then would on scroll be a stick with an coloured backing.
So what I was able to produce which should of been on the earlier attached (might of zipped the wrong file, sorry) was a hero bric with a dropped in carousel. I then created a class and set margins to a minus figure so the carousel overlapped the navigation. I then created a class for that navigation ‘position-absolute’ which appears over the top of carousel. I then dropped in a navigation bric into the global area and set to sticky with an orange background. This would then only appear once scrolling.
I may be over complicating something 
That may be very simple. I have left the studio now but will re supply the said file and screenshots to hopefully clarify
Many thanks again @hendon52
