gutenbergsite/gutenberg/nav.css

355 lines
5.7 KiB
CSS
Raw Normal View History

/*Strip the ul of padding and list styling*/
nav {
background-color:#EDDAB7;
color:#000000;
left: 0;
padding: 0 10vw 0 0;
position: fixed;
right: 0;
top: 0;
z-index: 999;
font-weight: bold;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
nav ul {
list-style-type:none;
/*margin:0;*/
padding:0;
position: absolute;
margin-left:140px;
}
/*Create a horizontal list with spacing*/
nav li {
display:inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
nav li a {
display:block;
min-width:80px;
text-align: center;
height: 50px;
line-height: 50px;
color: #fff;
background: #EDDAB7;
text-decoration: none;
}
/*Hover state for top level links*/
nav li:hover a {
/* background: #7A7A7A; */
color: #fff;
background: #BDAE92;
/* color: #2f3036; */
text-decoration:none;
/* color: #f00; */
}
/*Style for dropdown links*/
nav li:hover ul a {
background: #EDDAB7;
color: #2f3036;
height: 40px;
line-height: 40px;
margin: 0;
text-decoration:none;
text-align: left;
}
/*Hover state for dropdown links*/
nav li:hover ul a:hover {
background: #BDAE92;
text-decoration:none;
color: #fff; /* white */
}
/*Hide dropdown links until they are needed*/
nav li ul {
display: none;
margin-left: 0px;
}
/*Make dropdown links vertical*/
nav li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
nav li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
nav ul li a:hover + .hidden, .hidden:hover {
display: block;
}
.logo{
top:0;
left:0;
position: absolute;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: center;
padding: 10px 0;
display: none;
margin-left: 140px;
}
/*Hide checkbox*/
nav input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
nav input[type=checkbox]:checked ~ #menu{
display: block;
}
.menu{
display: inline;
}
/*nav .searchbox{
margin-right: 20px;
float: right;
position:relative;
background-color: #EDDAB7;
}*/
nav .searchbox input[type=text]{
height:25px;
width:100px;
border-radius:25px;
color: black;
background-color: #f5f5f5;
}
nav .searchbox{
position: relative;
float:right;
width:200px;
padding:10px;
/*background-color: #EDDAB7;*/
}
nav .donate{
background-color:#F5ECDB;/*#ADA96B;*/
color:black;
font-size: 16px;
width:115%;
margin-top: 60px;
}
nav .donate p{
font-weight:bold;
margin-top:0px;
margin-left:140px;
display: inline;
}
nav .donate .donbtn{
display:inline-block;
cursor: pointer;
}
nav .donate a:link{
text-decoration: underline;
}
nav .donate a:hover{
background: #BDAE92;
color: #fff; /* white */
}
/*Responsive Styles*/
@media screen and /*(orientation: portrait)*/(max-width : 750px){
/*Make dropdown links appear inline*/
nav {
height:auto;
font-size:12px;
}
nav ul {
position: static;
display: none;
}
/*Create vertical spacing*/
nav li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
nav ul li, li a {
width:auto;
display: inline-block;
}
nav ul li ul{
width:auto;
}
nav li a{
text-align:left;
}
/*Display 'show menu' link*/
nav .show-menu {
top:0;
display:inline-block;
}
nav .donate p{
display: inline-block;
margin-left: 0px;
}
nav .donate{
display: none;
}
/*nav .searchbox input{
margin-left: 80px;
width:140px;
}*/
nav .searchbox{
float:none;
background-color: transparent;
display:inline-block;
}
}
/* ==================================================
navigation */
/*nav {
background-color:#EDDAB7;
color:#000000;
height: 60px;
left: 0;
padding: 20px 10vw 0 0;
position: fixed;
right: 0;
top: 0;
z-index: 999;
}
/* page links
nav a {
display: block;
float: left;
line-height: 20px;
max-width: 125px;
padding: 10px;
text-decoration: none;
width: 25%;
}
nav .searchbox{
display: block;
float: left;
line-height: 20px;
max-width: 125px;
padding: 10px;
text-decoration: none;
width: 25%;
/* display: block;
float: right;
width: 100px;
padding: 10px; */
}
nav .searchbox input{
height:25px;
width:200px;
border-radius:25px;
color: black;
text-align: left;
background-color: #f5f5f5;
}
nav li a img{
position:absolute;
top: 0;
left:0;
}
/*.logo{
height:75px;
width:75px;
}
nav ul li{
display:inline;
}
nav a.page {
font-weight: 700;
position:relative;
text-decoration: none;
}
nav a.page:after {
background: #000000;
bottom: -11px;
content: "";
height: 1px;
left: 5%;
opacity: 0;
pointer-events: none;
position: absolute;
right: 5%;
transform: scale(0, 1);
transition: all 200ms;
}
nav a.page:hover:after {
opacity: 1;
transform: scale(1, 1);
}
.underline {
background: #000000;
height: 1px;
left: 5%;
margin-top: 20px;
position: absolute;
right: 50%;
}
@media screen and (orientation: portrait) {
.underline {
right: 25%;
}
}
nav .social {
float: right;
}
nav .social a {
height: 20px;
width: 20px;
}
nav .donate{
background-color:#F5ECDB;
color:black;
font-size: 16px;
width:115%;
}
nav .donate p{
font-weight:bold;
margin-top:0px;
margin-left:140px;
display: inline;
}
nav .donate .donbtn{
display:inline-block;
cursor: pointer;
}
nav .donate a{
float:none;
display: inline;
}
nav .donate a:hover {
color: currentColor;
background:#E7E292;
text-decoration: underline;
}
nav .donate a:link {
text-decoration: underline;
}
nav .donate a:visited {
color: #3E444D;
}
@media only screen and (max-width: 1000px) {
nav .social a:not(:last-child) {
display: none;
}
}*/