Custom Nav Bar

I Need Help
1

Hi there, there is a possibility to use a different icon/image on a different breackpoint?

I hope the image is most clear than my question :sweat_smile:

NavBar
NavBar800×452 40.5 KB

Thanks

2

Hi @c_sassano
Yes, you could construct 3 different nav bars and hide them at different breakpoints where applicable.

3

Thanks, but when I set the icon in one of them, blocs set icon in all navbar.

4

I would use javascript. This script grabs the Logo, and allows you to assign a secondary logo. It then listens for window resize to go below a set point (in this case 769px). It also runs this on load, so it will display the secondary icon on the right screen size. This could be easily modified for multiple breakpoints and more logos.

<script>
window.addEventListener('resize', checkWidth); 

var logoOne = $('.navbar-brand').find('img').attr('src');
var logoTwo = 'https://via.placeholder.com/60';
var breakPoint = '769';

window.onload = function(event) {
	var winWidth = document.documentElement.clientWidth;
    if (winWidth < breakPoint) {
	    $('.navbar-brand img').attr('src',logoTwo);
    }
};

function checkWidth(){
     var winWidth = document.documentElement.clientWidth;
		if (winWidth > breakPoint) {
	     $('.navbar-brand img').attr('src',logoOne);
      } else {
	     $('.navbar-brand img').attr('src',logoTwo);
      }
};
</script>
5

Hi Christian,

There are millions ways to do this, all of them are fine. If it was me, I would use the custom class to set the different image per breakpoint. This way, you only need to create one class.

Christian.bloc (837.7 KB)

Obviously, if you need the links centered, you can do that as well.

Cheers,
Eldar

2 Likes
6

With @Eldar solutions which works well, you can also add the alt text using custom attributes.

alt = " "

Which is not only good for accessibility but google reads them as well.

1 Like
7

@TrevReav @PeteSharp @Eldar Thanks.

The plus value of Blocs is the community.

I start to use Blocs from a few days and sometime I love sometime I hate.

Sorry if I do many question and thanks for your reply, I hope blocs come to my web favorite builder tool.

8

I think that’s a normal reaction!!! Ha!

It’s a completely different discipline from what used before, but I have to say, the sites it outputs are rock-solid compared to some of my previous experience, and the more I use Blocs, the easier it becomes, and I enjoy it more.