/* Tablets and large screens ----------- */ @media only screen and (min-width : 768px){ #Navbar { position: absolute; top:0; z-index: 1; left: 50%; margin-left: -450px; width: 900px; box-sizing: border-box; } #Header { height: 95px; background-color: transparent; background-image: none; overflow: hidden; opacity: 1.0; } #nav-trigger { display: none; } .navbar nav{ display: block; } } @media only screen and (max-width : 768px){ #Navbar .navbar-inner { flex-wrap: wrap; } #Navbar .navbar-inner a.brand { margin-left: 14px; margin-bottom: 4px; } #Navbar nav { width: 100vw; } #nav-trigger { margin-bottom: 14px; } /* * Temp Message */ .has-temporary-message nav#Navbar { margin-top: 0px; } } /* Condense the nav bar a little on medium-sized screens ----------- */ @media only screen and (min-width : 769px) and (max-width : 970px) { .navbar .nav>li>a { padding: 10px 8px; margin: 0 4px 5px 4px; } #Navbar { margin-left: -405px; width: 810px; } .navbar .navbar-inner { padding: 0px 6px; } } /* Smartphones (Smaller screens) ----------- */ @media only screen and (max-width : 970px) { /************** Footer ****************/ #Content{ padding-bottom: 785px; /* Keeps footer down */ margin-top: 0px; } footer#Footer { height: 785px; } /* footer div.help-items, */ footer #FooterContent { justify-content: center; } footer#Footer .logos{ margin-top: 20px; min-width: 100%; order: 1; flex-wrap: wrap; } footer#Footer .logos, footer#Footer .help-items{ margin: 20px 10px; } footer .logos .logo{ margin-bottom: 0px; margin-top: 0px; } } /* Smartphones (portrait and landscape) ----------- */ @media only screen and (max-width : 480px) { /************** General Structure ****************/ #Header{ display: none; } } @media only screen and (max-width : 900px) { #main-nav .dropdown-menu > li > a{ color: #333; } } @media only screen and (max-width : 1100px) { /* * Temp Message */ .has-temporary-message nav#Navbar { margin-top: 72px; } }