Ucalgary_Baja/BajaUofCWebsite
4
0
Fork 0
mirror of https://github.com/UofCBaja/BajaUofCWebsite.git synced 2025-06-15 21:34:17 -06:00
Code Issues Packages Projects Releases Wiki Activity

added header: removed browser error and made css look the same

Browse Source
This commit is contained in:
darkicewolf50 2024-03-26 23:20:36 -06:00
parent 2e19a51d1b
commit 2cb457ac74
2 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/Header/Header.css
View File

@ -32,7 +32,7 @@ nav a {
} }
nav a li { nav a li {
background-color: none; background-color: white;
padding: 0.5rem; padding: 0.5rem;
border: solid 1px gray; border: solid 1px gray;
} }
@ -48,16 +48,30 @@ nav ul {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
} }
/* makes it so that the tags look the same whist having removing browser error */
.DropDownHeader {
display: inline-block;
background-color: white;
padding: 0.5rem;
border: solid 1px gray;
}
.DropDownHeader:hover {
background-color: gray;
}
.Hide { .Hide {
display: none; display: none;
} }
.DropDown { .DropDown {
cursor: default;
position: relative; position: relative;
} }
.DropDown a {
cursor: default;
}
/* makes dropdown visible */ /* makes dropdown visible */
.DropDown:hover .Hide { .DropDown:hover .Hide {
display: block; display: block;

10
src/Header/Header.js
View File

@ -81,8 +81,8 @@ const Header = () => {
</Link> </Link>
<li className="DropDown"> <li className="DropDown">
{/* this link and li only exits for styling purposes */} {/* this link and li only exits for styling purposes */}
<Link> <Link className="DropDownHeader">
<li>Club Membership & Upcoming Events</li> Club Membership & Upcoming Events
</Link> </Link>
<ul className="Hide"> <ul className="Hide">
@ -98,11 +98,9 @@ const Header = () => {
</ul> </ul>
</li> </li>
<li className="DropDown"> <li className="DropDown">
<Link> <Link className="DropDownHeader">More...</Link>
<li>More</li>
</Link>
<ul className="Hide"> <ul className="Hide">
<Link> <Link to={"/Gallery"}>
<li>Gallery</li> <li>Gallery</li>
</Link> </Link>
<Link> <Link>