asked on
CSS Menu
Hi Experts
using CSS Html
I am using a menu from the net
https://blog.avada.io/css/dropdown-menus/ option 18
they use content to add the icon for home 1st Menu but I cannot find how to set the size for the png file i want to use
If use background : url("") how do I stop it from displaying in the drop down menu's see below code and images
.menu-item:nth-child(1) > a::before {
content: "\f015";
}
I had to use background to set image size but it add it to the drop down
.menu-item:nth-child(1) > a::before {
display: inline-block;
height: 32px;
width: 32px;
margin-right: 5px;
content: "";
background: url("../images/Download-Start.png") no-repeat 0 0;
background-size: 32px 32px;
background-position: center;
width: 200px;
}
following are screen shots and full code
css file
*, *::before, *::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
/*background: linear-gradient(90deg, #16a085, #f4d03f);*/
background: linear-gradient(90deg, White, Black);
font-family: "Montserrat", sans-serif;
color: #fff;
height: 100vh;
}
.menu ol {
list-style: none;
padding: 0;
margin: 0;
}
.menu ol:first-child {
width: 100%;
max-width: 960px;
margin: 1rem auto 0 auto;
display: grid;
grid-template-columns: repeat(5, 1fr);
align-items: center;
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3);
}
.menu-item {
display: flex;
align-items: center;
justify-content: center;
border-top: 2px solid #16a085;
position: relative;
transition: background 0.3s ease-in-out;
}
.menu-item:nth-child(1) > a::before {
display: inline-block;
height: 32px;
width: 32px;
margin-right: 5px;
content: "";
background: url("../images/Download-Start.png") no-repeat 0 0;
background-size: 32px 32px;
background-position: center;
width: 200px;
}
.menu-item:nth-child(2) > a::before {
display: inline-block;
height: 32px;
width: 32px;
margin-right: 5px;
content: "";
background: url("../images/Construction-Add.png") no-repeat 0 0;
background-size: 32px 32px;
background-position: center;
}
.menu-item:nth-child(3) > a::before {
display: inline-block;
height: 32px;
width: 32px;
margin-right: 5px;
content: "";
background: url("../images/Worker-Information.png") no-repeat 0 0;
background-size: 32px 32px;
background-position: center;
width: 200px;
}
.menu-item:nth-child(4) > a::before {
display: inline-block;
height: 32px;
width: 32px;
margin-right: 5px;
content: "";
background: url(../images/Network-Printer-Details.png) no-repeat 0 0;
background-size: 32px 32px;
background-position: center;
}
.menu-item:nth-child(5) > a::before {
display: inline-block;
height: 32px;
width: 32px;
margin-right: 5px;
content: "";
background: url(../images/Save.png) no-repeat 0 0;
background-size: 32px 32px;
background-position: center;
}
.menu-item:nth-child(1) > a::before {
font-family: "Font Awesome 5 Free";
font-size: 1.2rem;
display: block;
margin-bottom: 1rem;
font-weight: 900;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
color: #16a085;
}
@media (min-width: 768px) {
.menu-item:nth-child(1) > a::before {
font-size: 1.5rem;
}
}
.menu-item:nth-child(2) > a::before {
font-family: "Font Awesome 5 Free";
font-size: 1.2rem;
display: block;
margin-bottom: 1rem;
font-weight: 900;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
color: #16a085;
}
@media (min-width: 768px) {
.menu-item:nth-child(2) > a::before {
font-size: 1.5rem;
}
}
.menu-item:nth-child(3) > a::before {
font-family: "Font Awesome 5 Free";
font-size: 1.2rem;
display: block;
margin-bottom: 1rem;
font-weight: 900;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
color: #16a085;
}
@media (min-width: 768px) {
.menu-item:nth-child(3) > a::before {
font-size: 1.5rem;
}
}
.menu-item:nth-child(4) > a::before {
font-family: "Font Awesome 5 Free";
font-size: 1.2rem;
display: block;
margin-bottom: 1rem;
font-weight: 900;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
color: #16a085;
}
@media (min-width: 768px) {
.menu-item:nth-child(4) > a::before {
font-size: 1.5rem;
}
}
.menu-item:nth-child(5) > a::before {
font-family: "Font Awesome 5 Free";
font-size: 1.2rem;
display: block;
margin-bottom: 1rem;
font-weight: 900;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
color: #16a085;
}
@media (min-width: 768px) {
.menu-item:nth-child(5) > a::before {
font-size: 1.5rem;
}
}
.menu-item .sub-menu > a {
color: red;
}
.menu-item:not(:last-child) {
border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.menu-item .sub-menu {
position: absolute;
top: 100%;
width: 300px;
transform-origin: top;
transform: rotateX(-90deg);
transition: transform 0.3s linear;
background-color: #f4d03f;
}
.menu-item .sub-menu .menu-item {
border-color: rgba(255, 255, 255, 0.15);
}
.menu-item .sub-menu .menu-item a::before {
content: "";
}
.menu-item .sub-menu .menu-item:first-child {
border: 0;
}
.menu-item:hover, .menu-item.active {
border-top: 2px solid #f4d03f;
background-color: rgba(255, 255, 255, 0.15);
}
.menu-item:hover a::before, .menu-item.active a::before {
color: white;
}
.menu-item:hover .sub-menu {
transform: rotateX(0deg);
}
.menu-item a {
font-size: 0.8rem;
display: flex;
flex-direction: column;
align-items: center;
color: #fff;
text-decoration: none;
text-transform: uppercase;
height: 100%;
width: 100%;
padding: 1.5em 1em;
}
@media (min-width: 768px) {
.menu-item a {
font-size: 1rem;
}
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>Career Menu</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
left: 150px;
}
a {
left: 160px;
text-decoration: none; /* removes underline in text*/
}
.menu-item .menu-text {
font-weight: 500;
color: rgb(44 70 86);
margin: 0 0 0.25em 0;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<link href="../css/MenuStyle.css" rel="stylesheet" />
</head>
<body>
<nav class="menu">
<ol>
<li class="menu-item active"><a href="#0">File Import Export</a>
<ol class="sub-menu">
<li class="menu-item"><a href="SchoolImport.aspx">Import Control</a></li>
<li class="menu-item"><a href="ExportFiles.aspx">Export File</a></li>
<li class="menu-item"><a href="ImportFiles.aspx">Import File</a></li>
<li class="menu-item"><a href="ImportStudentFile.aspx">Student Import</a></li>
<li class="menu-item"><a href="USIImport.aspx">USI Import</a></li>
<li class="menu-item"><a href="ImportSurveyFile.aspx">Survey Import</a></li>
<li class="menu-item"><a href="SurveyReset.aspx">Survey Reset</a></li>
<li class="menu-item"><a href="ImportProfileFile.aspx">Profile Import</a></li>
<li class="menu-item"><a href="RebuildGoals.aspx">Rebuild Goals</a></li>
<li class="menu-item"><a href="ImportGrowth.aspx">Import Yearly Grades</a></li>
<li class="menu-item"><a href="GeneratePortal.aspx">Generate Portal</a></li>
<li class="menu-item"><a href="ImportFutureDirections.aspx">Import Future Directions</a></li>
<li class="menu-item"><a href="ImportWebChoices.aspx">Import Webchoices Code</a></li>
</ol>
</li>
<li class="menu-item"><a href="#0">Maintenance</a>
<ol class="sub-menu">
<li class="menu-item"><a href="CareerClass.aspx">Class Codes</a></li>
<li class="menu-item"><a href="SchoolConclusion.aspx">Ex Student Code</a></li>
<li class="menu-item"><a href="CareerFuture.aspx">Future Direction Codes</a></li>
<li class="menu-item"><a href="CareerGoals.aspx">Goals/Interests</a></li>
<li class="menu-item"><a href="SurveySetup.aspx">Generate Survey</a></li>
<li class="menu-item"><a href="CareerOccupations.aspx">Occupation Codes</a></li>
<li class="menu-item"><a href="Recommendations.aspx">Recommendation Entry</a></li>
<li class="menu-item"><a href="SchoolName.aspx">School Name</a></li>
<li class="menu-item"><a href="CareerTrade.aspx">Trade Maintenance</a></li>
<li class="menu-item"><a href="SchoolYear.aspx">Year Code</a></li>
<li class="menu-item"><a href="YearGrading.aspx">Year Grading</a></li>
</ol>
</li>
<li class="menu-item">
<a href="#0">Career Maintenance</a>
<ol class="sub-menu">
<li class="menu-item"><a href="SchoolCareer.aspx">Career Entry / Maintenance</a></li>
<li class="menu-item"><a href="CareerInterview.aspx">Career Interview</a></li>
</ol>
</li>
<li class="menu-item">
<a href="#0">Reporting</a>
<ol class="sub-menu">
<li class="menu-item"><a href="Reports/CurrentEmploymentDefinition.aspx" target="_blank">Current Employment</a></li>
<li class="menu-item"><a href="Reports/CurrentMasterDefinition.aspx" target="_blank">Google Drive \ Email</a></li>
<li class="menu-item"><a href="Reports/MasterDefinition.aspx" target="_blank">Master List</a></li>
<li class="menu-item"><a href="Reports/CurrentGoalsDefinition.aspx" target="_blank">Seeking Work</a></li>
<li class="menu-item"><a href="Reports/USIDefinition.aspx" target="_blank">Student # / USI Report</a></li>
<li class="menu-item"><a href="Reports/RatingsDefinition.aspx" target="_blank">Student Year Ranking</a></li>
<li class="menu-item"><a href="Reports/CurrentYearDefinition.aspx" target="_blank">Year Code and Attendance</a></li>
<li class="menu-item"><a href="Reports/ExStudentDefinition.aspx" target="_blank">Ex Student Report</a></li>
<li class="menu-item"><a href="Reports/EmploymentDefinition.aspx" target="_blank">Employment</a></li>
<li class="menu-item"><a href="Reports/MasterGradeDefinition.aspx" target="_blank">Master / Grades</a></li>
<li class="menu-item"><a href="Reports/OccupationDefinition.aspx" target="_blank">Occupations</a></li>
<li class="menu-item"><a href="Reports/FutureDirectionsDefinition.aspx" target="_blank">Future Directions</a></li>
</ol>
</li>
<li class="menu-item"><a href="#0">Year End</a>
<ol class="sub-menu">
<li class="menu-item"><a href="YearEnd.aspx">Year Update</a></li>
</ol>
</li>
</ol>
</nav>
</body>
</html>
CSSHTMLImages and Photos
Last Comment
Scott Fell