html - Anchor tags in nav bar on the website are not working properly. [HTML5, CSS3, Bootstrap 4)

Question

I have a issue with anchor tags in the nav bar on my website. Here is the video > https://drive.google.com/file/d/1M7sbA8bdrTyd3YJIsmgUWyBUaJXM1wEr/view

Result should be different though. There should be a underline bar/line when anchor tag is hovered. And button should do the transition effect when hovered. As well pointer is missing on both. I think that issue is padding and / or margin. I had to insert css3 as a snippet, as the code sample wont register it. Code is not showing proper result as i have plenty of files on the machine. (Normalize, Bootstrap, Main pictures, fonts etc.) Here is my code :

** CSS3 **

/* --- BUTTON SIGN --- */
.but:link,
.but:visited,
input[type=submit] {
    display: inline-block;
    padding: 10px 30px;
    font-weight: 300;
    text-decoration: none;
    border-radius: 2px;
    -webkit-transition: background-color 0.2s, border 0.2s, color 0.2s;
    transition: background-color 0.2s, border 0.2s, color 0.2s;
}
.btn-sign:link,
.btn-sign:visited {
    border: 1px solid #3498db;
    color: #3498db;
}

.but:hover,
.but:active,
input[type=submit]:hover,
input[type=submit]:active {
    background-color: #3498db;
}
.btn-sign:hover,
.btn-sign:active {
    border: 1px solid #3498db;
    color: #fff;
}

/* SIGN UP BUTTON */
#btnsu {
    position: absolute;
    left: 85%;
    top: 6%;
    cursor: pointer;
}

/* ------------------------------------------------------------------- */
/* HEADER */
/* ------------------------------------------------------------------- */

header {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.7)), to(rgba(0, 0, 0, 0.7))), url(Images/bh1.jpg);
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(Images/bh1.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    height: 100vh;
}

.hero-text-box {
    position: absolute;
    width: 1140px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.logo {
    height: 70px;
    width: auto;
    float: left;
    margin-top: 30px;
    margin-left: 65px;
}

.logo-black {
    display: none;
    height: 50px;
    width: auto;
    float: left;
    margin: 5px 0;
}

/* Main Nav */
.main-nav {
    float: right;
    list-style: none;
    margin-left: 40%;
}

.main-nav li {
    position: relative;
    display: inline-block;
    margin-left: 55px;
    margin-top: 13.8%;
}

.main-nav li a:link,
.main-nav li a:visited {
    padding: 8px 0;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 90%;
    border-bottom: 2px solid transparent;
    transition: border-bottom 0.2s;
}

.main-nav li a:hover,
.main-nav li a:active {
    border-bottom: 2px solid #3498db;
}

/* Mobile Nav */
.mobile-nav-icon {
    float: right;
    margin-top: 30px;
    cursor: pointer;
    display: none;
}

.icon-mob {
    font-size: 200%;
    color: #fff;
}

<!-- HEADER STARTS -->
    <header>
         <nav>
            <div class="row">
                <img id="logo1" src="resources/images/nexcliclogo2.png" alt="nexclic-logo" class="logo">
                    <ul class="main-nav js--main-nav">
                        <li><a class="navl" href="#home">Home</a></li>
                        <li><a class="navl" href="#about">About</a></li>
                        <li><a class="navl" href="#contact">Contact</a></li>
                        <a id="btnsu" href="#signup" class="but btn-sign">Sign Up</a>
                </ul>
                    <a class="mobile-nav-icon js--nav-icon"><i class="icon ion-ios-menu icon-mob"></i></a>
                </div>
            </nav>
            <div class="hero-text-box">
                <h1 id="headerh1">Rise Up With Us</h1>
                <a id="btnsm" class="btn btn-ghost js--scroll-to-start" href="#">Show me more</a>
            </div>
    </header>
    <!-- HEADER ENDS -->

标签： htmlcss

Answer 1

您在评论中发布的 CSS 的问题是h1与导航重叠。这个问题本身来自于你的 CSS 中的大量“肮脏的黑客行为”。所以，我从头开始完全重写了代码，这里是：

（请注意，HTML 代码也被重写）。

<header>
    <nav>
        <img id="logo1" src="resources/images/nexcliclogo2.png" alt="nexclic-logo" class="logo">
        <div class="row">
            <ul class="main-nav js--main-nav">
                <li><a class="navl" href="#home">About</a></li>
                <li><a class="navl" href="#about">Products</a></li>
                <li><a class="navl" href="#contact">Contact</a></li>
                <a id="btnsu" href="#signup" class="but btn-sign">Sign Up</a>
            </ul>
            <a class="mobile-nav-icon js--nav-icon"><i class="icon ion-ios-menu icon-mob"></i></a>
        </div>
    </nav>
</header>

<div class="hero-text-box">
    <div>
        <h1 id="headerh1">Rise Up With Us</h1>
        <p><a id="btnsm" class="btn btn-ghost js--scroll-to-start" href="#">Show me more</a></p>
    </div>
</div>

<style>
.hero-text-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.hero-text-box div {
    text-align: center;
}

body {
    margin: 0; /* Overwriting browser defaults */
}

header {
    position: absolute;
}

nav {
    display: flex;
    justify-content: space-between;
    width: 100vw;
}

nav ul {
    display: flex;
    padding-left: 0;  /* Overwriting browser defaults */
    margin-top: 0;    /* Overwriting browser defaults */
    margin-bottom: 0; /* Overwriting browser defaults */
    flex-wrap: wrap;
}

@media (max-width: 500px) {
    /* Try to resize your browser screen to 500px in width or smaller */
    nav ul {
        flex-direction: column;
    }
}

nav ul li {
    list-style: none; /* Overwriting browser defaults */
}

nav ul li:not(:last-child) {
    margin-right: 1rem;
}


nav { margin-top: 1rem; }
#logo1 { margin-left: 1rem; }
nav ul { margin-right: 1rem; }
</style>