My website has a navbar button that is not directing to the intended section of the screen

I have created this HTML code for my Navbar buttons:

<button class="navbar-toggle" data-toggle = "collapse" data-target=".navHeaderCollapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse navHeaderCollapse">

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#Home" class="smoothScroll">Home</a></li>
                <li><a href="#About" class="smoothScroll">About</a></li>
                <li><a href="#Portfolio" class="smoothScroll">Portfolio</a </li>
                <li><a href="#Contact" class="smoothScroll">Contact</a></li>

            </div>

When the portfolio button is clicked, it should jump to the portfolio section as shown here:

                <a name="Portfolio">
            <!-- <section id="Portfolio"> -->
            <div id="whitecontainer1">
                <h1> Portfolio </h1>
                hello
                <br>
                <br>
                <br>
                <br>
                <br>

            </div>
            </a>

However, it scrolls to a different section instead:

<section id="About">
            <div id="redcontainer1">
                <div id="aboutinfo">
                    <h2><strong>Ashpan Raskar</strong></h2>
                    <div id="aboutme">
                        I am an intuitive <strong> software developer</strong>, and newly a
<strong> web developer</strong>. I began by learning Java at the age of 10 from an online
YouTube series: "Java (Beginner) Programming Tutorials." Soon after I started becoming
interested in <strong>Websites 
and Web Design</strong>, so I learned how to create websites with XHTML, but it was not at 
all responsive and was bare to the bone.
                        <br>
                        <br>
                        From then a learned quite a few more languages such as Jquery,
PHP, Javascript, C#, Ajax, etc, and I plan to learn Android Development as my next stage.

                        <br>
                        <br>

                        <a target="_blank"class="btn btn-default" href="Ashpan_Raskar.pdf" role="button">Check out my Resume!</a>
                    </div>

Any assistance would be greatly appreciated. If you want to check out the code on GitHub, you can find it here. Thank you in advance.

Answer №1

An issue has been identified in Lines 80 - 81 of index.html:

<a name="Portfolio">
<!-- <section id="Portfolio"> -->

To resolve this, update it to:

<section id="Portfolio">

By making this adjustment, the error will be corrected. The problem lies in the use of <a> without a closing tag and having a </section> at line 93 without a starting tag. It is recommended to use

<element id="section-name">
instead of the deprecated <a name="section-name">, as block elements are not supported within inline <a> elements.

However, the underlying reason is...

The CSS code currently in place is as follows:

#introbg {position: absolute;}

This declaration lacks clarity on where it ends, leading to positioning issues. Avoid using position: absolute without justification. As a result, the <a name="Portfolio"> is placed before #intro.

To address this, remove the position: absolute from the code for proper functionality.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the most effective method for attaching text to an element without being affected by the spacing of other div elements

Seeking a method to add text after a textbox in-line, without being pushed to a new line by surrounding divs. The aim is for the text to remain close to the textbox, unaffected by wrapper div boundaries but still relative in position. Any viable solutions ...

What is the best way to utilize regex for replacing a string within Node.js environment?

I'm struggling with updating the string in my code. Essentially, I have a .php file and I want to modify some constants using the replace package. The output of my current code is: // Current Output define('DB_NAME', 'foo'); // ...

Creating a PNG image on a canvas, converting it to a data URL, and then transmitting it using an XMLHttpRequest in NodeJS/Express

I've been experimenting with different methods found on Google, but so far none have worked for me. I'm currently working on implementing the signature-pad, a JavaScript/HTML5 canvas solution for eSignatures. My goal is to save the canvas data as ...

How can I update the title of the NavigationBarRouteMapper without altering the current route in React Native?

Here is a snippet of code that outlines the NavigationBarRouteMapper: var NavigationBarRouteMapper = { ... , RightButton(route, navigator, index, navState){ return( <TouchableHighlight onPress={()=>{ //When this ...

Achieving two-way data binding using a Service in AngularJS - Step by step guide

Searching a JSON file, extracting data to create a table, and continuously monitoring for updates to display in real-time is a challenging task. Despite multiple attempts with AngularJS, achieving this has been elusive. Below is the code snippet: app.js ...

Can Vuetify's grid system seamlessly integrate with the Bootstrap grid system?

According to information from the Vuetify documentation: The Vuetify grid draws inspiration from the Bootstrap grid. It involves the use of containers, rows, and columns to organize and align content. If I utilize Bootstrap grid classes in a Vuetify pr ...

Exploring the world of functional programming within nested arrays

I have been shifting towards functional programming over imperative programming recently. Imagine I have a nested array data structure and my goal is to update the values of the innermost arrays. What approach would be most effective? Here is the imperat ...

Deactivating a form field depending on a selected radio button in Angular 2

If I have two radio buttons, with a click function called localClick for the first button to give value 1 and the second button to give value 2. <div class="ui-g-12"><p-radioButton name="group1" value="Local" (click)=localClick(1) label="Local"&g ...

Executing AJAX function via a dropdown button

Utilizing a jquery-based dropdown menu from here. The dropdown is added to an existing button triggering an AJAX call that removes a row from the screen. The goal is to execute the AJAX call when any option in the dropdown is selected, instead of using th ...

What is the proper location for inserting image copy code within my codebase?

I encountered an issue with using this code: copy('imgurl', 'images/covers/file.jpeg'); The code successfully copies an image URL to a file on my website when placed in a PHP page alone, but it fails to work within my actual code. He ...

Issue with retrieving body class in Internet Explorer on Magento platform. The body class is not being recognized in IE, but works fine in Mozilla and Chrome

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->getLang() ?>" lang="<?php echo $this->getLang() ?>" dir="ltr"> <?php echo $this->getChildHtml('head') ?> <bod ...

Trouble with Displaying Table Outside of Div in Internet Explorer

As a UI developer, I encountered an issue where the table inside two divs is not displaying correctly in IE8. It works seamlessly in Firefox, but IE is causing me headache. If anyone has any suggestions or advice on how to fix this, please help me out. Yo ...

Enhancing user experience with dynamically resized Jumbotron images based on screen sizes in HTML

I am experiencing an issue with the jumbotron images on my website where they become increasingly zoomed in as the screen size decreases, and are extremely zoomed in on mobile devices. Is this a normal behavior of jumbotrons? I do understand that the image ...

What is the method for obtaining the worldwide location of a vertex on a skinned mesh in Three.js?

In the realm of Three.js, we've recently acquired the ability to determine the global position of a vertex in a non-skinned mesh thanks to insights from this question. Now, the query arises - how can one ascertain the global position of a vertex in a ...

Are there any JS/jQuery plugins available for sliding animations that include slideLeft and slideRight functions, similar to the slideUp and slideDown functions?

Does anyone know of a jQuery/JS plugin that combines fading and sliding effects, specifically with slideLeft and slideRight functions similar to jQuery's slideUp and slideDown? I'm hoping to find something ready-made rather than having to build i ...

choosing a specific element within an HTML string stored in a variable

I have a variable containing HTML string data like this: var htmlstring = "<div><div class='testdiv'>924422</div></div>" My goal is to extract the content of the div with a specific class, in this case .testdiv. How ca ...

Guide to aligning form data with Bootstrap

Struggling to align my form data in the center below. I have attempted various online solutions without success. The use of bootstrap and offset is causing issues with the title for the form and the actual form itself. Any suggestions would be highly appre ...

Tips for hiding website content on larger screens

Is there a way to hide website content on screen sizes over 1600px and display only a message image instead? ...

What is the best way to specify a function parameter as a Function type in TypeScript?

I'm currently delving into the world of TypeScript and I am unsure about how to specify a function parameter as a function type. For instance, in this piece of code, I am passing a setState function through props to a child component. const SelectCity ...

Achieving the validation with a bold red border

Hi, I'm currently learning React and I've been using regular JavaScript to validate my form. Here's a snippet of how I'm doing it: <TextField label="Title" variant="outlined" si ...