我无法更改徽标颜色和菜单下划线/链接无效

Question

你好，这是我第一次在项目中使用 Sass，所以我不确定是因为我在 sass 中正确设置了代码，还是它的粒子 js 导致了问题。

徽标 - 由于某些原因，我可以更改徽标的大小，但无法更改颜色。
菜单链接 - 不知道为什么，但出于某种原因，菜单的下划线不起作用，如果我想点击它们，我什至无法点击它们，但是当我更改 links 的大小时它有效。

这里有一个 link 如果你想现场观看 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 代码

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

    }

}

Answer 1

带有 classes .particles-js-canvas-el, .header-content, #header-home #particles-js, #header-home 的 div 位于导航栏上方，点击这些项目而不是实际的导航栏元素，因此您必须发送他们返回并将导航栏置于前面，以便您可以单击项目。

在main.css文件末尾添加以下代码

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

要更改徽标的颜色，请应用 css

中所需的 class

<img src="img/RE-LOGO_01.png" alt="My Portfolio Logo" id="logo" class="white-logo">

谢谢

Answer 2

我能够解决我的问题。通过尝试代码并在此处获得一些建议。

为了节省时间，我刚刚上传了一个白色的 svg 徽标。起初我尝试在原始 colro 上传 svg 并用 css 更改它但是在查看示例后看起来你需要添加很多代码或使用一些 javascript 以便简化我刚刚在 photoshop 中更改了颜色。
为了修复导航栏，我在 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;
        }

    }

}

我现在上传到这个域，但我计划稍后将网站移动到另一个域（以防这个 link 将来不起作用）

http://lonestarwebandgraphics.com/

我无法更改徽标颜色和菜单下划线/链接无效

I cant Change Logo Color & Menu Underline / Links Not Working

html

css

menu

sass