0

Estoy intentando implementar algo tan sencillo como un scrollspy en Bootstrap 4 para mi portfolio y me está llevando a la desesperación. He leído la documentación oficial, he investigado y no consigo hacerlo funcionar. Ningún error en consola.

He añadido data-spy="scroll" data-target=".navbar" data-offset="50" al body y las anchors de los enlaces de la nav son iguales que las id de las secciones.

He añadido también el popper, jquery y demás scripts.

También he probado implementándolo sólo con JavaScript, sin éxito.

Empiezo a pensar que hay algo más en mi código que está interfiriendo con esta función de Bootstrap, pero no doy con ello. Si alguien puede echarle un vistazo al código y decirme qué estoy haciendo mal, se lo agradezco.

HTML:

<!DOCTYPE html>
<html lang="en">
<html> 
    <head> 
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="I'm a developer and audiovisual producer. Here I show my evolution, my work and my passion.">
        <meta name="author" content="Pablo Herrero">
      
        <title>Pablo Herrero | Developer | pabloherrero.me</title>
        
        <!-- Popper.js -->
        <script src="node_modules/@popperjs/core/dist/umd/popper.min.js"></script>
    
        <!-- Bootstrap style sheet -->
        <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">

        <!-- Custom styles -->
        <link rel="stylesheet" href="css/style.css">
        <script src="https://kit.fontawesome.com/121886ca53.js" crossorigin="anonymous"></script>

        <!-- Touch icons -->
    
    </head>
    <body id="top" data-spy="scroll" data-target=".navbar" data-offset="50">

        <!-- Navbar -->
        <nav id="navbar" class="navbar navbar-expand-lg navbar-light fixed-top">
            <a class="navbar-brand" href="#top">
                <div id="h" class="align-self-center">H</div>
            </a>
            <button class="navbar-toggler navbar-toggler-right" 
                type="button" data-toggle="collapse" 
                data-target="#navbarResponsive" 
                aria-controls="navbarResponsive" 
                aria-expanded="false" aria-label="Toggle navigation">
                <i class="fas fa-bars"></i>
            </button>
            <div id="navbarResponsive" class="collapse navbar-collapse">
                <ul class="navbar-nav ml-auto">
                  <li class="nav-item">
                    <a class="nav-link" href="#about">About</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#works">Works</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact</a>
                  </li>
                </ul>
            </div>
        </nav>
        
        <!-- Header -->
        <header id="header">
            <div class="container d-flex">
                <div class="row">
                    <div class="col-sm-12 col-md-12 col-lg-12">
                        <img src="img/pabloHerrero.jpg" alt="Pablo Herrero" id= "headerPhoto">
                    </div>
                    <div class="col-sm-12 col-md-12 col-lg-12">
                        <h1>Pablo Herrero</h1>
                    </div>
                    <div class="col-sm-12 col-md-12 col-lg-12">
                        <h2>lore ipsum</h2>
                    </div>
                </div>
            </div>

        </header>

        <!-- About -->
        <section id="about">
            <div class="container d-flex">
                <div class="row">
                    <div class="col-sm-12 col-md-12 col-lg-12 align-self-center">
                        <h2>Hi! I'm a developer and audiovisual producer.</h2>
                    </div>
                    <div class="col-sm-12 col-md-12 col-lg-12 align-self-center">
                        <p>I learned to code in 2019 when I started my studies on development. I'm confortable using Java, SQL, HTML5, CSS3, Bootstrap 4 and GIT, although I'm always digging deep and learning new things. I'm currently working on JDBC, Swing, Android Studio, JavaScript and Python, and will start soon with TypeScript, Node.js and Angular. Here you can take a look at my projects and drop me a line with the contact form if you wish.</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Works -->
        <section id="works">
            <div class="container d-flex">

            </div>
        </section>

        <!-- Contact -->
        <section id="contact">
            <div class="container d-flex">

            </div>
        </section>

        <!-- Footer -->
        <footer id="footer">
            <div class="container-fluid">
                <div class="row d-flex ">
                    <div class="col-sm-12 col-md-6 col-lg-6 align-self-center">
                        <small id="copy">&copy; 2020 Pablo Herrero</small>
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-6 align-self-center">
                        <div id="social">
                            <a href="https://twitter.com/pablohs1986" target="_blank"><i class="fab fa-twitter"></i></a>
                            <a href="https://dev.to/pablohs1986" target="_blank"><i class="fab fa-dev"></i></a>
                            <a href="https://es.stackoverflow.com/users/149406/pablohs1986?tab=profile" target="_blank"><i class="fab fa-stack-overflow"></i></a>
                            <a href="https://github.com/pablohs1986" target="_blank"><i class="fab fa-github"></i></a>
                            <a href="https://www.linkedin.com/in/pabloherrero1986/" target="_blank"><i class="fab fa-linkedin"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </footer>

        <!-- jQuery -->
        <script src="node_modules/jquery/dist/jquery.min.js"></script>

        <!-- Bootstrap js -->
        <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

        <!-- Portfolio script -->
        <script src="js/app.js"></script>
    </body>
</html>

CSS:

/* Fonts */
@font-face {
    font-family: 'fira_coderegular';
    src: url('fonts/firacode-regular-webfont.woff2') format('woff2'),
         url('fonts/firacode-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'fira_codebold';
    src: url('fonts/firacode-bold-webfont.woff2') format('woff2'),
         url('fonts/firacode-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'fira_codemedium';
    src: url('fonts/firacode-medium-webfont.woff2') format('woff2'),
         url('fonts/firacode-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* General */
body {
    position: relative;
    font-family: 'fira_coderegular';
    letter-spacing: normal;
    overflow-y: scroll;
    background-color:#ffffff;
}
  
body::-webkit-scrollbar {
    display: none;
}

/* Navbar */
#navbar {
    min-height: 56px;
    background-color: transparent;
    border-bottom: none;
}

#navbar .navbar-toggler {
    color: #000000;
}

#navbar .navbar-toggler:focus {
    outline: none;
}

#h {
    font-size: 25px;
    font-family: 'fira_codebold';
    text-align: center;
    color: #000000;
    outline: none;
}

#navbar .nav-link {
    font-size: 14px;
    font-family: 'fira_codemedium';
    padding: 1rem 1.5rem;
    text-align: center;
    color:#ffffff;
    background-color: #000000;
    outline: none;
}

#navbar .nav-link:hover {
    color: #bd93f9;
    outline: none;
}

#navbar .nav-link:active {
    color: #50fa7b;
    outline: none;
}

#navbar #h:hover {
    color: #bd93f9;
    outline: none;
}

#navbar #h:active {
    color: #50fa7b;
    outline: none;
}

@media (min-width: 992px) {
    #navbar .nav-link {
        font-size: 14px;
        padding: 0.5rem 1.5rem 0.5rem;
        color:#000000;
        background-color: transparent;
    }
}

/* Header */
#header {
    width: 100%;
    height: 100vh;
}

#header .col-lg-12 {
    text-align: center;
}

#header #headerPhoto {
    margin: 100px 0px 0px 0px;
    text-align: center;
    max-width: 100%;
}

#header h1 {
    margin: 50px 0px 0px 0px;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-family: 'fira_codebold';
    font-size: 58px;
    line-height: 3.3rem;
    letter-spacing: 0.05rem;
}

#header h2 {
    margin: 15px 0px 0px 0px;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-family: 'fira_codemedium';
    font-size: 24px;
    letter-spacing: 0.05rem;
}

@media (min-width: 992px) {
    #header #headerPhoto {
        margin: 75px 0px 0px 0px;
        max-width: 35%;
    }

    #header h1 {
        margin: 25px 0px 0px 0px;
        font-size: 64px;
        line-height: 3.3rem;
        letter-spacing: 0.05rem;
    }
}


/* About */
#about {
    width: 100%;
    height: 100vh;
}

#about .container {
    min-height: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

#about .row {
    background-color: #000000;
    padding: 100px 100px 100px 100px;
}

#about .col-lg-12 {
    text-align: center;
    align-items: center;

}


#about h2 {
    width: 100%;
    text-align: left;
    margin-bottom: 30px;
    font-family: 'fira_codemedium';
    font-size: 24px;
    color: #ffffff;
    letter-spacing: 0.05rem;
}

#about p {
    width: 100%;
    text-align: left;
    font-family: 'fira_coderegular';
    font-size: 14px;
    color: #ffffff;
}

/* Recent works */

/* Contact */

/* Footer */
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding-bottom: 5px;
    background-color: transparent;
    color: #000000;
    text-align: center;
}

footer #social a{
    font-size: 15px;
    color: #000000;
}

footer #social i:hover{
    color: #bd93f9;
}

footer #social i:active {
    color: #50fa7b;
    outline: none;
}

@media (min-width: 992px) {
    footer #copy {
        float: left;
    }
    
    footer #social a{
        font-size: 20px;
        float: right;
        padding: 0.5rem 2rem 0.5rem 0rem;

    }
}

1 respuesta 1

0

Tras consultarlo en la versión inglesa de Stack Overflow, el problema estaba en el selector que estaba usando para el active del nav-link, lo correcto es lo siguiente:

#navbar .nav-link.active {
    color: #50fa7b;
    outline: none;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.