Navbar different brand images for mobile vs. full screen

Yii 2.0 General Discussions
1

Hi,
is there a way to define two different logo versions for full screen vs. mobile with Navbar? Here is my code, but only the first logo appears no matter how small the screen is

NavBar::begin ( [ 'brandLabel' => '<img src="'.Yii::$app->request->baseUrl.'/images/logo.png" srcset="'.Yii::$app->request->baseUrl.'/'.Yii::$app->params['iconfile'].' 100w,'. Yii::$app->request->baseUrl.'/images/logo.png" sizes="(mind-width: 1024) 1024px, 100vw">', 'brandUrl' => Yii::$app->homeUrl, 'options' => [ 'class' => 'navbar-default navbar-fixed-top', 'encodeLabels' => true ] ] );

Thanks,
Gabi

2

Have you tried clearing the cache of the browser?

The srcset attribute is a HTML feature, which is resolved by the browser, not by Yii2 or NavBar widget.

Try another browser opening with the limited resolution and post the results you get.

3

Thanks Bruno! Yes tried, but didn’t help. I finally removed the sizes part (there was a typo but still not working). Without the size part it works fine now!

Best,
Gabi

4

When googled img srcset this came up, may help:
What Img Srcset Does In HTML5: A Quick & Simple Guide »