Difference between revisions of "Template:CSS UCL5"
Superjack15 (Talk | contribs) (Undo revision 135427 by Superjack15 (talk)) |
|||
Line 342: | Line 342: | ||
/*menu*/ | /*menu*/ | ||
− | .mainmenu { | + | /*.mainmenu { |
position: fixed; | position: fixed; | ||
top: 0; | top: 0; | ||
Line 557: | Line 557: | ||
.menu-items{width:80%;} | .menu-items{width:80%;} | ||
} | } | ||
+ | */ | ||
+ | /*OLD MENU*/ | ||
+ | |||
+ | .mainmenu { | ||
+ | position: fixed; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | z-index: 99999; | ||
+ | width: 100%; | ||
+ | height: 75px; | ||
+ | font-size: 16px; | ||
+ | background-color: #091E26;/*#262622;*/ | ||
+ | opacity:0.9; | ||
+ | } | ||
+ | |||
+ | @media(min-width:1392px){ | ||
+ | .mainmenu { | ||
+ | height:75px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media(max-width:1110px){ | ||
+ | .mainmenu { | ||
+ | height:100px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media(max-width:606px){ | ||
+ | |||
+ | .mainmenu { | ||
+ | height:134px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | @media(max-width:570px){ | ||
+ | .mainmenu { | ||
+ | height:163px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media(max-width:511px){ | ||
+ | .mainmenu { | ||
+ | height:183px; | ||
+ | } | ||
+ | }*/ | ||
+ | |||
+ | |||
+ | @media(max-width:400px){ | ||
+ | h5 {font-size:400%;margin-top:30px;text-align:center;font-familt:arial;} | ||
+ | #main {padding-top:0px;border-top:0px;margin-top:0px;top:0px;position:static;z-index:0} | ||
+ | } | ||
+ | |||
+ | /* CHANGE */ | ||
+ | @media(max-width: 606px){ | ||
+ | .mainmenu {display:none;} | ||
+ | .mainmenu ul {display:none;} | ||
+ | #hidden-menu {display:block;} | ||
+ | } | ||
+ | |||
+ | @media(min-width: 606px){ | ||
+ | #hidden-menu {display:none;}; | ||
+ | h5 {font-size:15px;}; | ||
+ | } | ||
+ | |||
+ | #hidden-menu:hover ul{ | ||
+ | display:block; | ||
+ | height:auto; | ||
+ | width:auto; | ||
+ | } | ||
+ | |||
+ | #hidden-menu ul li{ | ||
+ | display:none; | ||
+ | clear:both; | ||
+ | background-color: #70C4BB; | ||
+ | text-align: center; | ||
+ | display: block; | ||
+ | margin:none; | ||
+ | padding-left:20px; | ||
+ | padding-right:20px; | ||
+ | padding-top:8px; | ||
+ | padding-bottom:8px; | ||
+ | box-shadow:1.5px 1.5px lightgrey; | ||
+ | border-radius:4px; | ||
+ | opacity:0.9; | ||
+ | z-index:999999; | ||
+ | } | ||
+ | |||
+ | #hidden-menu ul { | ||
+ | display:none; | ||
+ | position:fixed; | ||
+ | top:60px; | ||
+ | left:-0px; | ||
+ | } | ||
+ | |||
+ | #hidden-menu ul li a { | ||
+ | color: #fff; font-size: 23px; | ||
+ | } | ||
+ | |||
+ | #hidden-menu ul li a:hover { | ||
+ | color: #787172 | ||
+ | } | ||
+ | |||
+ | #hidden-menu a { | ||
+ | color: #473E4F; text-decoration: none; font-family: Raleway; | ||
+ | } | ||
+ | |||
+ | #hidden-menu a:hover {color: #70C4BB; | ||
+ | -webkit-transition: color ease-in-out 150ms; | ||
+ | } | ||
+ | |||
+ | #mobilebutton { | ||
+ | height:50px; | ||
+ | width:50px; | ||
+ | top:15px; | ||
+ | left:1px; | ||
+ | position:fixed; | ||
+ | opacity:0.9; | ||
+ | } | ||
+ | |||
+ | /*CHANGE END*/ | ||
+ | |||
+ | #igemlogo { | ||
+ | position:fixed; | ||
+ | top:27px; | ||
+ | left:-10px; | ||
+ | float:left; | ||
+ | margin-left:50px; | ||
+ | margin-top:5px | ||
+ | z-index:99999; | ||
+ | } | ||
+ | |||
+ | #ucligemlogo { | ||
+ | position:fixed; | ||
+ | top:23px; | ||
+ | left:50px; | ||
+ | float:left; | ||
+ | margin-left:50px; | ||
+ | margin-top:5px | ||
+ | z-index:99999; | ||
+ | } | ||
+ | .menu-items {display: inline-block; | ||
+ | width: 100%; | ||
+ | text-align: right; | ||
+ | position:fixed; | ||
+ | top:26px; | ||
+ | z-index:99998; | ||
+ | } | ||
+ | |||
+ | @media(max-width: 463px){ | ||
+ | .menu-items {margin-top: 10px; } | ||
+ | } | ||
+ | |||
+ | .menu-items li { | ||
+ | display: inline-block; | ||
+ | margin-right: 10px; | ||
+ | margin-left: 10px; | ||
+ | margin-top: 3px; | ||
+ | letter-spacing: 1.1px; | ||
+ | |||
+ | } | ||
+ | |||
+ | .menu-items ul li:hover ul{ | ||
+ | display:block; | ||
+ | |||
+ | height:auto; width:auto; | ||
+ | |||
+ | list-style-position: inside; | ||
+ | list-style-type: none !important; | ||
+ | padding-left: 0 !important; | ||
+ | margin-left: -19px; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | .menu-items li ul { | ||
+ | display:none; | ||
+ | position:absolute; | ||
+ | top:28px; | ||
+ | } | ||
+ | |||
+ | .menu-items li ul li{ | ||
+ | clear:both; | ||
+ | background: none; | ||
+ | text-align: center; | ||
+ | display: block; | ||
+ | background: #70C4BB; | ||
+ | padding: 2px; | ||
+ | /*border: solid 1px #493C54;*/ | ||
+ | border-radius: 4px; | ||
+ | box-shadow:1.5px 1.5px lightgrey; | ||
+ | opacity:0.95; | ||
+ | } | ||
+ | |||
+ | .menu-items li ul li a { | ||
+ | color: #fff; | ||
+ | font-size: 14px; | ||
+ | } | ||
+ | |||
+ | .menu-items li ul li a:hover { | ||
+ | color: #787172/*#70C4BB;*/ | ||
+ | } | ||
+ | |||
+ | .menu-items a { | ||
+ | color: #fff; | ||
+ | text-decoration: none; | ||
+ | font-family: Raleway; | ||
+ | } | ||
+ | |||
+ | .menu-items a:hover {color: #70C4BB; | ||
+ | -webkit-transition: color ease-in-out 150ms; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | @media (max-width:600px){ | ||
+ | h2 {font-size:18px;} | ||
+ | h3 {font-size:17px;} | ||
+ | p {font-size:12px;} | ||
+ | .menu-items{width:80%;} | ||
+ | } | ||
+ | /* OLD Menu END */ | ||
.buttonblack { | .buttonblack { | ||
margin-bottom: 10px; | margin-bottom: 10px; |
Revision as of 14:48, 27 August 2015