I cant Change Logo Color & Menu Underline / Links Not Working
Hello this is my first time using Sass on a project so im not sure if it is because I setup the code in correctly in sass or if its the particles js causing issues.
-
Logo – For some reason im able to change the size of the logo but I’m not able to change the color.
-
Menu Links – Not sure why but for some reason the menu’s underline is not working and I cant even click on them if I wanted to but when I change the size of links it works.
Here is a link in case you want see it live http://lonestarwebandgraphics.com/
<div id="header-home"> <!-- <div id="particles-js"></div> --> <div class="container"> <nav id="main-nav"> <img src="img/RE-LOGO_01.png" alt="My Portfolio Logo" id="logo"> <ul> <li><a href="#home" class="current">Home</a></li> <li><a href="#about">About Me</a></li> <li><a href="#capabilities">Capabilities</a></li> <li><a href="#skills">Skills</a></li> <li><a href="#projects">Projects</a></li> <li><a href="#contact-me">Contact Me</a></li> </ul> </nav> <div class="header-content"> <h1>DESIGNER</h1> <h1>+</h1> <h1>DEVELOPER</h1> <p class="lead">Welcome to my website. I am a Graphic / Web Designer & Web Developer</p> </div> </div> <div id="particles-js"></div> </div> CSS CODE
#logo { width: 70px; height: 70px; color: #fff; } #main-nav { z-index: 20; display: flex; justify-content: space-between; padding-top: 1rem; background: none; ul { display: flex; } li { padding: 1rem 1.5rem; } a { text-decoration: none; color: #fff; text-transform: uppercase; // CSS Below is For Border Bottom Hover Effect border-bottom: 3px transparent solid; padding-bottom: 0.5rem; transition: border-color 1s; &:hover { border-color: $light-blue; } &.current { border-color: $yellow-color; } } } 
The div’s with classes .particles-js-canvas-el, .header-content, #header-home #particles-js, #header-home are above the nav bar which are making to click on those items instead of actual nav bar elements, so you have to send them back and get the navbar to front so that you can click on the items.
Add the follwing code at the end of the main.css file
css/main.css
.white-logo { filter: brightness(100); } body { background: #00111e; } .particles-js-canvas-el, .header-content, #header-home #particles-js { position: absolute; z-index: -100; height: 100%; width: 100%; } #header-home { background-color: rgba(0, 0, 0, 0); z-index: -1; } To change color of the logo, apply the required class from the css
<img src="img/RE-LOGO_01.png" alt="My Portfolio Logo" id="logo" class="white-logo"> Thank you
I was able to fix my problems. By playing with the code and getting some advice on here.
-
for the logo I just uploaded a white svg to save time. At first I was try to upload svg at original colro and change it with css but after looking at examples it looked like you need to add a lot of code or use some javascript so to make it easy I just changed the color in photoshop.
-
to fix the navbar I add position Relative in css
HTML
<nav id="main-nav"> <img src="img/logo-white-1.svg" alt="My Portfolio Logo" id="logo"> <ul> <li><a href="#home" class="current">Home</a></li> <li><a href="#about">About Me</a></li> <li><a href="#capabilities">Capabilities</a></li> <li><a href="#skills">Skills</a></li> <li><a href="#projects">Projects</a></li> <li><a href="#contact-me">Contact Me</a></li> </ul> </nav> SASS
#main-nav { z-index: 20; display: flex; justify-content: space-between; padding-top: 1rem; background: none; position: relative; ul { display: flex; } li { padding: 1rem 1.5rem; } a { text-decoration: none; color: #fff; text-transform: uppercase; // CSS Below is For Border Bottom Hover Effect border-bottom: 3px transparent solid; padding-bottom: 0.5rem; transition: border-color 1s; &:hover { border-color: $light-blue; } &.current { border-color: $yellow-color; } } } I uploaded to this domain for now but I plan on moving the website to another domain later (in case this link doesnt work in the future)
