title: How to make my current navigation bar responsive (ASP.NET)
body: <p>I am currently working on a web-form project and have created a navigation bar. I was wondering what I'd have to do in order to make the navigation bar responsive so that when the window size is readjusted, the navigation bar will change accordingly instead of squishing together.</p>
  
  <p>The code that I am using is as follows:</p>
  
  <p><strong>Master.site page</strong></p>
  
  <pre><code>&lt;%@ Master Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="NestedMasterPage1.master.cs" Inherits="TGASAttempt.NestedMasterPage1" %&gt;
  &lt;asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"&gt;
      &lt;!DOCTYPE html&gt;
  &lt;link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet"&gt;
  &lt;link href="StyleSheet.css" rel="stylesheet" type="text/css" runat="server" /&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;
          &lt;div class="container"&gt;
              &lt;img src="TGASlogo.png" alt="logo" class="logo"&gt;
  
              &lt;nav&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="Home Page.aspx"&gt;Home Page&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="~/"&gt;About&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="~/"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="~/"&gt;List1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="~/"&gt;List2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="~/"&gt;List3&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="~/"&gt;List4&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="~/"&gt;List5&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="Signup.aspx"&gt;Sign Up&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="Login.aspx"&gt;Login&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
  
          &lt;/div&gt;
      &lt;/header&gt;
  
          &lt;div&gt;
  
          &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  &lt;/asp:Content&gt;
  &lt;asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"&gt;
                  &lt;asp:ContentPlaceHolder ID="nestedContent" runat="server"&gt;
  
  
                  &lt;/asp:ContentPlaceHolder&gt;
  
              &lt;/asp:Content&gt;
  </code></pre>
  
  <p><strong>Stylesheet.CSS</strong></p>
  
  <pre><code>body {
      padding-left:200px;
      padding-right:200px;
      margin: 0;
      background: #F0EFE8;    
      font-family: 'Work Sans', sans-serif;
      font-weight: 300;
  }
  
  .container {
      width:80%;
      margin:0 auto;
  }
  
  header {
      background: #FFD63C;
  }
  
  header::after {
      content: '';
      display:table;
      clear:both;
  }
  
  .logo {
      float:left;
      padding:5px 0;
  }
  
  nav {
      float:right;
  }
  
  nav ul {
      margin:0;
      padding:0;
      list-style:none;
  }
  
  nav li {
      display:inline-block;
      margin-left:35px;
      padding-top:35px;
  
      position:relative;
  }
  
  nav a {
  color:#444;
  text-decoration:none;
  text-transform:uppercase;
  font-size:15px;
  font-weight:500;
  
  }
  
  nav a:hover {
      color:#FFF;
  
  }
  
      nav a::before {
          content: '';
          display: block;
          height: 5px;
          background-color: #FFF;
          position: absolute;
          top: 0;
          width: 0%;
          transition:all ease-in-out 250ms;
      }
  
      nav a:hover::before{
          width:100%;
      }
  </code></pre>