troubleshooting Question

CSS Menu

Avatar of K Feening
K FeeningFlag for Australia asked on
CSSHTMLImages and Photos
3 Comments1 Solution22 ViewsLast Modified:

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";
    }

Open in new window

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;   }

Open in new window

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;     } }

Open in new window

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>

Open in new window

ASKER CERTIFIED SOLUTION
Log in to continue reading
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform for $9.99/mo
View membership options
Unlock 1 Answer and 3 Comments.
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
The Value of Experts Exchange in My Daily IT Life

Experts Exchange (EE) has become my company's go-to resource to get answers. I've used EE to make decisions, solve problems and even save customers. OutagesIO has been a challenging project and... Keep reading >>

Mike

Owner of Outages.IO
Phoenix, Arizona, United States
Member Since 2016
Join a full scale community that combines the best parts of other tools into one platform.
Unlock 1 Answer and 3 Comments.
View membership options
“All of life is about relationships, and EE has made a virtual community a real community. It lifts everyone's boat.”
William Peck

Member since 2004