Question: I have changed my asp.net website favicon and it works perfectly when navigating through website's pages. 

I have put the favicon.png in Views/Shared/\_Layout.cshtml file

```
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/png" href="~/images/favicon.png" />
  <title>@ViewBag.Title</title>

  @Styles.Render("~/Content/css")
  @Scripts.Render("~/bundles/modernizr")
</head>

```

However when I open a image in new window my favicon changes back to the asp.net default icon. 

```
<div class="col-sm-12">
    <a href="~/images/holiday/sunset_1.png" target="_blank">
        <img class="img-responsive" src="~/images/holiday/sunset_1.png" />
    </a>
</div>

```

Does anybody know how to change this or why it happens.

Thanks in advance.

Answer: 
Set the top to 100%, outside of the media query

```css
body {
  background-color: white;
}

header {
    background-color: grey;
    padding: 1rem 0;
    position: fixed;
    width: 100%;
}

@media(max-height: 500px) {
  header {
    padding: 0;
  }
}

nav {
  background-color: #CCC;
  position: absolute;
  top: 100%;
  width: 100%;
}

a {
  border-bottom: 1px solid white;
  display: block;
  padding: 0.75rem;
}
```

```html
<header>
  <p>Example</p>
  <nav>
    <a>Link</a>
    <a>Link</a>
    <a>Link</a>
  </nav>
</header>
```
Inside your media query for under 500px height, remove fixed top margin from `nav` element. 

```
@media(max-height: 500px) {
  header {
    padding: 0;
  }
  header > nav {
    top: auto;
  }
}

```

Actually you can also do it by default, outside of your media query. Define top margin as auto. This way you won't have to care about fixed value

```
nav {
  background-color: #CCC;
  position: absolute;
  top: auto
  width: 100%;
}

```

Since your `header` is fixed it won't push other elements, so in order to do so you need to add space to inner elements. For example:

```
header {
    background-color: grey;
    position: fixed;
    width: 100%;
}

header p{
    padding: 1rem 0;
}

```

If you remove padding from `header` and add it to your inner `p` element, it will push your `nav`. But in general for more content you can create a new wrapper element inside that will work as "space-taker".