Difference between revisions of "Template:Cologne-Duesseldorf/css"

Line 694: Line 694:
 
#bodyContent #returnToTop:hover{
 
#bodyContent #returnToTop:hover{
 
   color: black;
 
   color: black;
 +
}
 +
 +
nav {
 +
    display: none;
 +
    position: fixed;
 +
    top: 16px;
 +
    left: 0;
 +
    right: 0;
 +
}
 +
#bodyContent nav ul {
 +
    list-style-type: none;
 +
    margin: 0;
 +
    padding: 0;
 +
    display: flex;
 +
    justify-content: space-around;
 +
    background-color: #333;
 +
}
 +
#bodyContent nav li {
 +
    padding: 0;
 +
    text-indent: 0;
 +
}
 +
#bodyContent nav li::before {
 +
    display: none;
 +
}
 +
#bodyContent nav li a,
 +
.dropbtn {
 +
    display: inline-block;
 +
    color: white;
 +
    text-align: center;
 +
    padding: 10px 20px;
 +
    text-decoration: none;
 +
    font-size: 18px;
 +
}
 +
#bodyContent nav a:visited {
 +
    color: white;
 +
}
 +
#bodyContent nav li a:hover,
 +
.dropdown:hover .dropbtn {
 +
    background-color: #149375;
 +
}
 +
#bodyContent nav li.dropdown {
 +
    display: inline-block;
 +
}
 +
#bodyContent nav .dropdown-content {
 +
    display: none;
 +
    position: absolute;
 +
    background-color: #f9f9f9;
 +
    min-width: 160px;
 +
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
 +
    z-index: 1;
 +
}
 +
#bodyContent nav .dropdown-content a {
 +
    color: black;
 +
    padding: 12px 16px;
 +
    text-decoration: none;
 +
    display: block;
 +
    text-align: left;
 +
    font-size: 16px;
 +
}
 +
#bodyContent nav .dropdown-content a:hover {
 +
    background-color: #f1f1f1
 +
}
 +
#bodyContent nav .dropdown:hover .dropdown-content {
 +
    display: block;
 
}
 
}
  
Line 710: Line 774:
 
   }
 
   }
 
}
 
}
 +
 +
/* Small Laptop up */
 
@media (min-width: 900px) {
 
@media (min-width: 900px) {
 
   body {
 
   body {
Line 716: Line 782:
 
   #globalWrapper {
 
   #globalWrapper {
 
     padding: 10%;
 
     padding: 10%;
 +
  }
 +
  #bodyContent nav{
 +
    display:block;
 
   }
 
   }
 
   #bodyContent article p {
 
   #bodyContent article p {
Line 722: Line 791:
 
   }
 
   }
 
   #bodyContent #sidebar-btn {
 
   #bodyContent #sidebar-btn {
 +
    display:none;
 
     width: 20px;
 
     width: 20px;
 
     height: 20px;
 
     height: 20px;

Revision as of 09:23, 28 October 2017