How to make bootstrap navbar opaque on scroll without affecting links

HTML & CSS
, ,
1

Hi
How can I make a bootstrap navbar opaque on scroll without affecting links?
Here is an example http://www.awerest.com/demo/myway/
I have got everything to work but my text is affected also.
I have tried adding a rule for the links but they have no effect.
Here is my code:

/*Navbar*/
	@media (min-width: 992px) {
			.navbar {
				opacity: 0;
				color: black !important;
			}  
		}
		
	@media (min-width: 992px) {
			.nav-link {
				opacity: 1 !important;
				color: black !important;
			}  
		}


 $(document).on('scroll', function (e) {
    if ($(window).width() > 992) {
   $('.navbar').css('opacity', ($(document).scrollTop() / 500));
}
})

Thanks in advance.

2

Don’t think it’s possible, as the opacity will effect the children too. You can use rgba to achieve this.

2 Likes
3

We has a similar question the other day which also suggests using rgba instead of opacity.

2 Likes
4

Could you add it to my code?
I am confused as how to use it :flushed:.
Thanks.

5

You would use the background or background-color property.

background-color: rgba(0,0,0,0) ; /* black fully transparent */

Nore the rgb values are on a scale from 0 to 255. The a value is from 0 to 1 with 1 being fully opaque.

1 Like
6

Assuming my code is correct, it has no effect:

@media (min-width: 992px) {
			.navbar {
				background-color: rgba(0,0,0,0) ; /* black fully transparent */
				
			}  
		}
7

ah removing bg-primary works
So now how can I transition from rgba(0,0,0,0) to rgba(2, 117, 216, 1) on scroll in JavaScript?

8

What doe Inspect say is setting the background?
Maybe just use background instead of background-color.
It looks like it’s already working with rgba setting the background.

9

it works now, read my last reply.:slight_smile:
Just need to figure the js.

10

I think you mean this:

 $(document).on('scroll', function (e) {
    if ($(window).width() > 992) {
		var rgba = $(document).scrollTop() / 500;
   $('.navbar').css('background-color', 'rgba(255,255,255,' + rgba + ')');
	}
})
1 Like
11

Thanks thats perfect after messing about with a few classes
And thanks to everyone else too.

1 Like
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.