当我更改横幅高度时,导航链接停止工作

问题描述 投票:0回答:1

我的横幅只需要针对这个特定页面变小,当我尝试使用 css 内联时,它确实将高度更改为我需要的高度,但我的链接停止工作。

这是我的 css 文件中的代码:

/* Nav User Page*/
.nav-borders .nav-link.active {
  text-decoration-color: #dc3030;
  border-bottom-color: #dc3030;
  color: #dc3030; 
}

.nav-borders .nav-link.active b {
  color: #dc3030; 
}

.nav-borders .nav-link {
  color: #222222;
  border-bottom-width: 0.125rem;
  border-bottom-style: solid;
  border-bottom-color: transparent;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0;
  padding-right: 0;
  margin-left: 1rem;
  margin-right: 1rem;
}

/*Banner and Header*/
.overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.banner-area {
  background: url(../img/header-bg.jpg) center;
  background-size: cover;
}

.banner-area .overlay-bg {
  background-color: rgba(0, 0, 0, 0.7);
}

.banner-content {
  margin-top: -90px;
  text-align: center;
  
}

#header {
  padding: 0px 0px 14px 0;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  transition: all 0.5s;
  z-index: 997;
}

#header hr {
  border-color: rgba(255, 255, 255, 0.3);
  margin-top: 5px;
}

.header-top {
  height: 24px;
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-top a {
  color: #fff;
  font-size: 15px;
}

这是 HTML 代码,在我更改横幅高度之前,该代码运行良好:

<!DOCTYPE html>
<html lang="zxx" class="no-js">
<head>
        <!-- Mobile Specific Meta -->
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Favicon-->
        <link rel="shortcut icon" href="img/fav.png">
        <!-- Author Meta -->
        <meta name="author" content="codepixer">
        <!-- Meta Description -->
        <meta name="description" content="">
        <!-- Meta Keyword -->
        <meta name="keywords" content="">
        <!-- meta character set -->
        <meta charset="UTF-8">
        <!-- Site Title -->
        <title>User Page</title>

    <link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet">

    <link href="https://fonts.googleapis.com/css?family=Poppins:100,200,400,300,500,600,700" rel="stylesheet"> 
        <!--
        CSS
        ============================================= -->
        <link rel="stylesheet" href="css/linearicons.css">
        <link rel="stylesheet" href="css/font-awesome.min.css">
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/magnific-popup.css">
        <link rel="stylesheet" href="css/nice-select.css">                  
        <link rel="stylesheet" href="css/animate.min.css">
        <link rel="stylesheet" href="css/owl.carousel.css">
        <link rel="stylesheet" href="css/main.css">
       
    </head>
    <body>

      <header id="header" id="home" >
        <div class="container header-top">

                  <div class="logo">
                  
            <div id="logo">
              <a href="index.html"><img src="img/logo.png" alt="" title="" /></a>
          </div>
            </div>
            <nav id="nav-menu-container">
              <ul class="nav-menu">
                <li class="menu-active"><a href="index.html">Home</a></li>
                <li><a href="about.html">Sobre nós</a></li>
                <li><a href="gallery.html">Eventos</a></li>
                <li><a href="event.html">Doações</a></li>
                <li><a href="ticket.html">Propostas</a></li>
                <li><a href="blog-home.html">Contactos</a><li>
                <li class="menu-has-children"><a href="">Artistas</a>
                  <ul>
                    <li><a href="blog-single.html">Adriana Bárbara</a></li>
                    <li><a href="category.html">Maria Venceslau</a></li>
                    <li><a href="elements.html">Laura Gonçalves</a></li>
                    <li><a href="category.html">Concha carvalho</a></li>
                    <li><a href="category.html">Zé Dias </a></li>
                    <li><a href="category.html">André Vaz</a>
                    </li></li>
                  </ul>
                      <li><a 
                          
                      
                      <div class="navbar-user">
                          <a href="index.html">
                              <img src="img/Simbolo.svg" alt="Usuário" />
                          </a>
                      </div>
                  
                                  
              </ul>
            </nav><!-- #nav-menu-container -->                  
          </div>
      </div>
    </header><!-- #header -->

    <!-- start banner Area -->
    <section class="banner-area relative" id="home" style="height: 150px;"> 
      <div class="overlay overlay-bg" style="height: 150px;"></div>
      <div class="container">
          <div class="row d-flex align-items-center justify-content-center">
            <div class="about-content col-lg-12">               
            </div>                                          
          </div>
      </div>
    </section>
    <!-- End banner Area -->

    <!-- Start Page Content Area -->  

      <!-- Nav Profile: Options -->
      <div class="container px-3 mt-3">
        <nav class="nav nav-borders">
          <a class="nav-link active ms-0" href="perfil.html" target="__self" > <b>Perfil</b></a>
          <a class="nav-link" href="propostas_perfil.html" target="__self" > <b>Propostas</b></a>
          <a class="nav-link" href="doacoes_perfil.html" target="_self" > <b>Doações</b></a>
        </nav>

如果有人可以提供帮助,我将非常感激!如果需要,我将提供完整的代码,但我确信错误就在这里。

在我做出这个小改变之前,链接工作得很好。

提前谢谢您!

html css nav
1个回答
0
投票

您提供的代码中似乎有一个 HTML 片段搞砸了。这一部分多了一个

<li><a
,不知道如何向你指出。它位于我的代码编辑器的第 68 行。

<nav id="nav-menu-container">
          <ul class="nav-menu">
            <li class="menu-active"><a href="index.html">Home</a></li>
            <li><a href="about.html">Sobre nós</a></li>
            <li><a href="gallery.html">Eventos</a></li>
            <li><a href="event.html">Doações</a></li>
            <li><a href="ticket.html">Propostas</a></li>
            <li><a href="blog-home.html">Contactos</a><li>
            <li class="menu-has-children"><a href="">Artistas</a>
              <ul>
                <li><a href="blog-single.html">Adriana Bárbara</a></li>
                <li><a href="category.html">Maria Venceslau</a></li>
                <li><a href="elements.html">Laura Gonçalves</a></li>
                <li><a href="category.html">Concha carvalho</a></li>
                <li><a href="category.html">Zé Dias </a></li>
                <li><a href="category.html">André Vaz</a>
                </li></li>
              </ul>
                  <li><a 
                      
                  
                  <div class="navbar-user">
                      <a href="index.html">
                          <img src="img/Simbolo.svg" alt="Usuário" />
                      </a>
                  </div>
              
                              
          </ul>
        </nav>
© www.soinside.com 2019 - 2024. All rights reserved.