Difference between revisions of "Template:Virginia/styles/headerCSS"

Latest revision as of 12:55, 27 October 2020

/* Make bar go across entire screen */ .topnavholder{

 top: 16px;
 width: 100%;
 position: fixed;
 z-index: 10;

}

.headerspacer{

 margin-top: 16px;
 height: calc(1.3vw + 4vh);
 width: 100%;

}

/* Format the image in the menubar */ .menuimg{

 padding: calc(0.9vh + 0.15vw);
 float: left;
 max-height: calc(1.95vw + 6vh);
 background-color: #3B3838;
 border-radius: 0% 0% 100% 100%;
 cursor: pointer;
 margin-bottom: calc(-1.95vw + -6vh);

}

.menuholder1{

 background-color: #3B3838;
 height: calc(1.3vw + 4vh);

}

/*Format Menu logo text: MANIFOLD*/ .menuholder1 div.menulogo{

 display: none;
 font-family: THICCCBOI, sans-serif;
 font-weight: bold;
 color: white;
 left: calc(1.95vw + 6vh);
 top: 0px;
 text-decoration: none;
 font-size: 2vw;
 position: absolute;
 align-items: center;
 justify-content: center;
 width: calc(20% - 1.95vw - 6vh);
 height: calc(1.3vw + 4vh);

}

/* Add a black background color to the top navigation and acts as a flex box container */ .topnav {

 position: fixed;
 left: 20%;
 width: 80%;
 height: calc(1.3vw + 4vh);
 display: inline-flex;
 flex-direction: row;
 justify-content: space-between;
 align-items: center;

}

/* Style the links inside the navigation bar */ .topnav div> a.mainitem {

 color: lightgray;
 text-decoration: none;
 padding: 0px 1vw;
 font-size: 1.3vw;
 font-weight: bold;
 font-family: THICCCBOI, sans-serif;
 position: relative;
 top: 50%;
 -ms-transform: translateY(-50%);
 transform: translateY(-50%);

}

/* Change the color of links on hover */ .topnav div> a:hover {

 color: white;
 border-top-color: white;

}

/* Add a color to the active/current link */ .topnav div> a.active {

 color: white;

} .topnav div> a.active {

 color: white;

}

/*Exploit the way element borders are drawn to make a triangle*/ .arrow-down{

 width: 0; 
 height: 0; 
 border-left: 0.5vw solid transparent;
 border-right: 0.5vw solid transparent;
 border-top: 0.5vw solid;
 margin: 0 auto;

}

.arrow-right {

 float: left;
 width: 0; 
 height: 0; 
 margin-right: 0.25vw;
 border-top: 0.5vw solid transparent;
 border-bottom: 0.5vw solid transparent;
 border-left: 0.5vw solid;
 -ms-transform: translateY(0.25vw);
 transform: translateY(0.25vw);

}

/*============= stuff for dropdown menus =============*/ .dropdown{

 height: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;

}

.dropdown-content {

 overflow: hidden;
 display: none;
 position: fixed;
 top: calc(1.3vw + 4vh + 16px);
 z-index: 1;
 background-color: #3B3838;
 border-radius:  0 0 0.5vw 0.5vw;
 -ms-transform: translateX(-50%);

}

.dropdown-content a {

 color: lightgray;
 text-decoration: none;
 font-weight: bold;
 font-family: THICCCBOI, sans-serif;
 padding: 1vh 1vw;
 font-size: 1.3vw;

}

.dropdown-content a:hover {

 color:white;

}

.dropdown:hover .dropdown-content {

 display: flex;
 flex-direction: column;

}

/*hover higlight color*/ .dropdown-content a::before{

 background: linear-gradient(to right,#eb3349, #f45c43);

}

/*====== Styling for the scroll indicator ======*/ .progress-container {

 width: 100%;
 height: calc(0.195vw + 0.6vh);
 margin-left: 1vw;

}

.progress-bar {

 height: calc(0.195vw + 0.6vh);
 background-image: linear-gradient(45deg,#eb3349,#eb3349, #f45c43);
 width: 0%;

}

@@ Line 4: / Line 4: @@
    width: 100%;
    position: fixed;
-   z-index: 2;
+   z-index: 10;
 }
 .headerspacer{
+  margin-top: 16px;
    height: calc(1.3vw + 4vh);
    width: 100%;
@@ Line 58: / Line 59: @@
 /* Style the links inside the navigation bar */
-.topnav div>a.mainitem {
+.topnav div> a.mainitem {
    color: lightgray;
    text-decoration: none;
@@ Line 72: / Line 73: @@
 /* Change the color of links on hover */
-.topnav div>a:hover {
+.topnav div> a:hover {
    color: white;
    border-top-color: white;
@@ Line 78: / Line 79: @@
 /* Add a color to the active/current link */
-.topnav div>a.active {
+.topnav div> a.active {
+  color: white;
+}
+.topnav div> a.active {
    color: white;
 }