When creating a skeleton web app in Visual Studio that uses bootstrap it creates a layout with a full width menu bar across the top that also contains the company name in text. Quite often the first thing to do here is to replace the name with a company logo. The problem is here that because the layout is responsive simply adding a logo can destroy the way the layout flows.
For the purposes of this we will create three logos, one large, one medium and one small. These will be copied into the Images folder of the site, although the actual location can be decided by you.
We will dynamically change the logo based on the size of the screen in use. There is no reason why you have to stop at only 3 logos, you could have more so that the layout ‘degrades’ gracefully.
The first thing to do is to create some media queries. These are a CSS function that will allow a portion of styling to be used if a certain criteria gets met. In this example we will look at the min-width of the screen and select a logo based on that.
This code should be added to the end of the site.css file (should exist in the content folder)
.logo {
background-image: url(../Images/logo_web_small.jpg);
background-repeat: no-repeat;
width: 120px;
height: 29px;
display:block;
}
@media (min-width: 992px) {
.logo {
background-image: url(../Images/logo_web_medium.jpg);
background-repeat: no-repeat;
width: 300px;
height: 43px;
display: block;
}
}
@media (min-width: 1200px) {
.logo {
background-image: url(../Images/logo_web_large.jpg);
background-repeat: no-repeat;
width: 450px;
height: 64px;
display: block;
}
}
The first class that gets created is the default class and for this example I will call it .logo. Inside this class I add the path to the image I want to use, and also the display mode and width/height of the image. This will be displayed if none of the other criteria gets used.
Next I will repeat the class but each time I will wrap it inside a media query that contains the criteria for when I want it to be used. In this case I want the logo_web_medium.jpg to be used if the screen gets bigger than 992px but not larger than 1200px. The same for the logo_web_medium.jpg file but in this media query I want the screen size to be larger than 1200px. I could add more queries with different sizes of logo to make it respond even more gracefully, but for this example I will only use 3.
Next I will open the _layout.csthml file and find the following line
@Html.ActionLink("My Application", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
And replace the code with the block below, this will make sure that all pages that use _layout as a template will behave the same way.
<a href='@Url.Action("Index", "Home")'>
<img class="logo" />
</a>
Run the application
This should then make the screen look like this (I have changed the top bar colour from the default)
Changing the width in the browser will make the logo change gracefully and keep the responsive nature and proportions of the layout.