Я не могу изменить Lo go Цвет и подчеркивание меню / Ссылки не работают

Question

Здравствуйте, я впервые использую Sass в проекте, поэтому я не уверен, потому что я правильно настроил код в sass или его частицы js вызывают проблемы.

1. Lo go - По какой-то причине я не могу изменить размер lo go, но я не могу изменить цвет.

2. Ссылки меню - Нет конечно, почему, но по какой-то причине подчеркивание меню не работает, и я даже не могу щелкнуть по ним, если хочу, но когда я меняю размер ссылок, он работает.

Вот ссылка если вы хотите увидеть это вживую 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

Мне удалось исправить свои проблемы. Играя с кодом и получая здесь совет.

1. для lo go Я только что загрузил белый svg, чтобы сэкономить время. Сначала я пытался загрузить svg в исходный colro и изменить его на css, но после просмотра примеров казалось, что вам нужно добавить много кода или использовать javascript, поэтому, чтобы упростить, я просто изменил цвет в фотошопе.

2. для исправления навигационной панели я добавляю позицию Relative в 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;
        }

    }

}

Я загрузил в этот домен сейчас, но планирую переместить сайт в другой домен позже (если эта ссылка не будет работать в будущем)

http://lonestarwebandgraphics.com/

Answer 2

Дивы с классами .particles-js-canvas-el, .header-content, #header-home #particles-js, #header-home находятся над панелью навигации, которые заставляют щелкать по этим элементам вместо фактических элементов панели навигации, поэтому вам нужно отправить их обратно и вывести панель навигации на передний план, чтобы вы могли щелкнуть по items.

Добавьте следующий код в конец основного. 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;
}

Чтобы изменить цвет ло go, примените требуемый класс из css

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

Спасибо