Enhance your website navigation with Bootstrap Scrolling Nav: maintain consistent section heights and highlight the active

Question

Enhance your website navigation with Bootstrap Scrolling Nav: maintain consistent section heights and highlight the active

Can you help me with an issue I'm having when clicking on the <a> link in the navigation? The anchor point seems to be misplaced as the section headline (<h2>) is not visible.
Is there a way to highlight the <a> links, perhaps by adding a border or something similar?

Below is the HTML code causing this issue:

<!-- Fixed navbar -->
<nav id="navbar" class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="page-scroll"><a href="#">Home</a></li>
        <li><a class="page-scroll" href="#ark">Architektur</a></li>
        <li><a class="page-scroll" href="#">Wohnen</a></li>
        <li><a class="page-scroll" href="#ausstattung">Ausstattung</a></li>
        <li><a class="page-scroll" href="#lage">Lage</a></li>
        <li><a class="page-scroll" href="#">Galerie</a></li>
        <li><a class="page-scroll" href="#kontakt">Kontakt</a></li>  
        </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>
<!-- === END NAV === -->

UPDATE:

See the Navigation Problem Here

html css twitter-bootstrap

Answer 1

Answer №1

Regarding your initial query, here is the code snippet that includes highlighting for <a></a>:

HTML

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

CSS

li{
  padding: 8px;
}

a{
  text-decoration: none;
  color: #000;
}

a:hover, a:focus{
  color: red;
  text-decoration: none;
  outline: none;
}

.active{
  font-size: 30px;
  color: red;
  border-bottom: 5px solid red;
}

jQuery

$(document).ready(function(){
    $('a').click(function(){
        $('a').removeClass("active");
        $(this).addClass("active");
    });
});

Check out the live demonstration on:

JSFiddle

Answer 2

Regarding your initial query, here is the code snippet that includes highlighting for <a></a>:

HTML

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

CSS

li{
  padding: 8px;
}

a{
  text-decoration: none;
  color: #000;
}

a:hover, a:focus{
  color: red;
  text-decoration: none;
  outline: none;
}

.active{
  font-size: 30px;
  color: red;
  border-bottom: 5px solid red;
}

jQuery

$(document).ready(function(){
    $('a').click(function(){
        $('a').removeClass("active");
        $(this).addClass("active");
    });
});

Check out the live demonstration on:

JSFiddle

Answer 3

Answer №2

One issue is that the fixed navbar overlaps your heading, causing it to appear incorrectly. To fix this, you can adjust the top position of the anchor point by adding an extra 50px or so.
To solve this problem, you can create a class called "active" or "selected" with the desired styles:
```
selected{
    background-color: silver;
    color: #fff;
}
```

var links = $(".page-scroll"); 
links.on('click',function(){ 
  links.removeClass("selected"); 
  $(this).addClass("selected"); 
});

li{

  list-style-type: none;
}
.page-scroll{
  float:left;
  padding:15px;
  text-align: center;
  background-color: black;
  color: #fff;
}

.selected{
  background-color: silver;
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="navbar" class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a class="page-scroll" href="#">Home</a></li>
        <li><a class="page-scroll" href="#ark">Architektur</a></li>
        <li><a class="page-scroll selected" href="#">Wohnen</a></li>
        <li><a class="page-scroll" href="#ausstattung">Ausstattung</a></li>
        <li><a class="page-scroll" href="#lage">Lage</a></li>
        <li><a class="page-scroll" href="#">Galerie</a></li>
        <li><a class="page-scroll" href="#kontakt">Kontakt</a></li>  
        </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

In addition, don't forget to apply this class when clicking on the anchor link in the navbar

Answer 4

One issue is that the fixed navbar overlaps your heading, causing it to appear incorrectly. To fix this, you can adjust the top position of the anchor point by adding an extra 50px or so.
To solve this problem, you can create a class called "active" or "selected" with the desired styles:
```
selected{
    background-color: silver;
    color: #fff;
}
```

var links = $(".page-scroll"); 
links.on('click',function(){ 
  links.removeClass("selected"); 
  $(this).addClass("selected"); 
});

li{

  list-style-type: none;
}
.page-scroll{
  float:left;
  padding:15px;
  text-align: center;
  background-color: black;
  color: #fff;
}

.selected{
  background-color: silver;
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="navbar" class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a class="page-scroll" href="#">Home</a></li>
        <li><a class="page-scroll" href="#ark">Architektur</a></li>
        <li><a class="page-scroll selected" href="#">Wohnen</a></li>
        <li><a class="page-scroll" href="#ausstattung">Ausstattung</a></li>
        <li><a class="page-scroll" href="#lage">Lage</a></li>
        <li><a class="page-scroll" href="#">Galerie</a></li>
        <li><a class="page-scroll" href="#kontakt">Kontakt</a></li>  
        </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

In addition, don't forget to apply this class when clicking on the anchor link in the navbar

Answer 5

Answer №3

When troubleshooting problem number 1, the solution entails adding the following snippet to your CSS file (the first three lines are simply comments and can be omitted):

/* RESOLVES issue:
Navbar conceals initial content when navigating to in-page anchor #1768
https://github.com/twbs/bootstrap/issues/1768 */

*[id]:before { 
    display: block; 
    content: " "; 
    margin-top: -75px; 
    height: 75px; 
    visibility: hidden; 
}

Answer 6

When troubleshooting problem number 1, the solution entails adding the following snippet to your CSS file (the first three lines are simply comments and can be omitted):

/* RESOLVES issue:
Navbar conceals initial content when navigating to in-page anchor #1768
https://github.com/twbs/bootstrap/issues/1768 */

*[id]:before { 
    display: block; 
    content: " "; 
    margin-top: -75px; 
    height: 75px; 
    visibility: hidden; 
}

Enhance your website navigation with Bootstrap Scrolling Nav: maintain consistent section heights and highlight the active

Answer №1

Answer №2

Answer №3

Similar questions

Difficulty Communicating Recapcha 2 with the PHP Script

Exploring Selenium WebDriver: Manipulating Table Elements and Iterating Through Rows

Is there a way for me to align my div with my header on the same line?

Root location for offline and pre-production in the Backbone boilerplate router

What is the best way to incorporate a logo container and a horizontal divider into my top navigation bar using Bootstrap?

The z-index property does not seem to apply to pseudo elements

How to customize TextField error color in Material-UI using conditional logic in React

Unable to output the string using htmlspecialchars

Issue with font icons not displaying properly on Firefox

Content within the p tag is failing to wrap onto separate lines

What is the best way to change the status of a disabled bootstrap toggle switch?

"Unlocking the power of your device's microphone with

Display flash messages consistently in a designated area on the webpage instead of appearing at the top of the page in Flask

What is the best way to implement JavaScript for loading and removing content based on button clicks on a webpage?

Ensure that the "select" dropdown menu remains a constant size

Enlarging the current division while reducing the size of the others when hovering

Attempting to create a child process within the renderer by triggering it with a button click

Grid alignment issue with images on Bootstrap 4.0 - resolution needed

The submit button on the HTML form is not functioning properly and requires activation

Title of the most recently created file on GitHub