The CSS styling for an active link is not functioning correctly on a single page when using sections

Question

The CSS styling for an active link is not functioning correctly on a single page when using sections

I recently received a zip file containing a template purchased from themeforest, with a request to make modifications. The template includes a horizontal navigation bar with links to various sections on the page. In the original template, when you click on a link, it changes the background color of the active navigation link depending on which section you are in. However, after modifying the page and using my version, this feature seems to be not working.

I've tried changing the class name from .active to .viewing in case there was a naming conflict, but it didn't resolve the issue. It appears that I might not be familiar with some scripts or bootstrap CSS used in the page.

The code for the navigation bar is as follows:

<div class="span9 nav-wrapper">
                        <nav>
                            <ul>
                                <li><a href="#section-home" id="nav-home" class="active">Home</a></li>
                                <li><a href="#our-team" id="nav-team">Team</a></li>
                                <li><a href="#our-services" id="nav-services">Services</a></li>
                                <li><a href="#contact-section" id="nav-contact">Contact</a></li>
                            </ul>
                        </nav>
                        <div class="header-phone-number"><span>Call us on</span> <i class="icon-phone"></i> 1800 25 1800</div>
                    </div>

The CSS styling applied to the links is given below:

nav a {
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    padding: 26px 20px;
    font-size: 12px;
    font-family: 'Open Sans',sans-serif;
}

nav a:hover {
    background: #616a73;
}

nav a:hover, 
nav a:visited {
    color: #fff;
    text-decoration: none;
    outline: none;
}

nav a.active {
    background: #4c5660 url(../img/banner-bg.jpg);
    color: #fff;
    outline: none;
}

I am seeking guidance on how the ".active" class functions within this specific navigation bar and how it applies to other links when clicked. Is it related to jQuery? Why does my modified page appear to be malfunctioning even though I only changed the colors of the navigation bar from the original template?

Your assistance would be greatly appreciated.

html css

Answer 1

Answer №1

Seems like there's an issue with the JQuery implementation.

The following code snippet is supposed to toggle the 'active' class on navigation links:

$('nav a').click(function(){
      $('nav a').removeClass('active');
      $(this).addClass('active');
      var href= $(this).attr('href');

      if ( guardianIsMobile === true ){
          $('.nav-wrapper').hide();
      }

      $.scrollTo( href, 800, {
          onAfter : function(){
              //add function to do after the animation here if required
          } ,
          offset: -30 //use this to position the window exactly where you want
      });

      return false;
   });

If you check the console on your website, you'll see the error message:

Uncaught TypeError: Cannot read property 'offsetWidth' of null

This error seems to be related to a line in custom.js at line 148:

var map = new google.maps.Map(document.getElementById("contact-map"),myMapOptions);

Possibly the issue lies with the map setup causing this problem?

Answer 2

Seems like there's an issue with the JQuery implementation.

The following code snippet is supposed to toggle the 'active' class on navigation links:

$('nav a').click(function(){
      $('nav a').removeClass('active');
      $(this).addClass('active');
      var href= $(this).attr('href');

      if ( guardianIsMobile === true ){
          $('.nav-wrapper').hide();
      }

      $.scrollTo( href, 800, {
          onAfter : function(){
              //add function to do after the animation here if required
          } ,
          offset: -30 //use this to position the window exactly where you want
      });

      return false;
   });

If you check the console on your website, you'll see the error message:

Uncaught TypeError: Cannot read property 'offsetWidth' of null

This error seems to be related to a line in custom.js at line 148:

var map = new google.maps.Map(document.getElementById("contact-map"),myMapOptions);

Possibly the issue lies with the map setup causing this problem?

Answer 3

Answer №2

When it comes to incorporating classes without the use of javascript or php, it can be a bit tricky. However, here are some snippets I was able to come up with:

Using jQuery

$("a").click(function() {
    $("nav").find("a.current").removeClass("current");
    $(this).addClass("current");
});

Using PHP (not tested)

<?php
    $nav = "<nav><ul><li>";
    $links = array(
        '#home' => 'Home',
        '#serv' => 'Service',
        '#con' => 'Contact',
        '#about' => 'About'
    );

    if(isset($_GET['link'])) // link = integer
    {
        $i = 1;
        foreach($links as $key => $val)
        {
            if($_GET['link'] == $i)
            {
                $nav .= "<a class =\"current\" href=\"".$key."\">".$val."</a>";
            }
            else
            {
                $nav .= "<a href=\"".$key."\">".$val."</a>";
            }
            ++$i;
        }
    }

    echo $nav; // Insert this in your code
?>

Here is a jsfiddle link for reference

Answer 4

When it comes to incorporating classes without the use of javascript or php, it can be a bit tricky. However, here are some snippets I was able to come up with:

Using jQuery

$("a").click(function() {
    $("nav").find("a.current").removeClass("current");
    $(this).addClass("current");
});

Using PHP (not tested)

<?php
    $nav = "<nav><ul><li>";
    $links = array(
        '#home' => 'Home',
        '#serv' => 'Service',
        '#con' => 'Contact',
        '#about' => 'About'
    );

    if(isset($_GET['link'])) // link = integer
    {
        $i = 1;
        foreach($links as $key => $val)
        {
            if($_GET['link'] == $i)
            {
                $nav .= "<a class =\"current\" href=\"".$key."\">".$val."</a>";
            }
            else
            {
                $nav .= "<a href=\"".$key."\">".$val."</a>";
            }
            ++$i;
        }
    }

    echo $nav; // Insert this in your code
?>

Here is a jsfiddle link for reference

The CSS styling for an active link is not functioning correctly on a single page when using sections

Answer №1

Answer №2

Similar questions

HTML div ID displaying incorrectly

When hovering or mousing over, the text remains stationary and does not follow the scroll bar movement within the

Alter the color scheme of Fancybox's background

Automate website button clicks using Python and Selenium

Is there a way to convert various elements sharing the same class into a list of array items?

Is it possible to extract my current location from one website and then access another website based on that location?

Customize bullet list icons to adjust in size based on content using css

Changing the background color with a switch function in ReactJS

Strange behavior observed with CSS intellisense in Visual Code

Having difficulty connecting images or photos to CodePen

Flyer - Chart "dimmed" and unselectable when dimensions are specified as a proportion

creating a div element with a height that matches its content dimensions

Strange gray gradient background suddenly showing up on mobile devices

"Google Chrome v84 does not render elements with zero height, line-height, and display: flex correctly

Modify the CSS borders to reflect a selected radio input type

Having difficulty encapsulating three.js rendered particles within a single div

Table-styled div containing a horizontal scrolling div

Resizable dimensions for the dark mode switch

What could be causing my col-x to not function correctly in Bootstrap?

Tracking the number of headings within a table using HTML