The issue with the Bootstrap 4 navbar is that when clicking on a navlink, the jump position is hidden by the navbar, making it difficult to see

I am facing 2 issues while finalizing my bootstrap navbar. 1. The menu does not get hidden upon clicking any of the menu links in mobile mode 2. When clicking on a nav link, the page jumps to the in-page link but the top of that section is masked under the navbar

Feel free to experiment with the code here: https://jsfiddle.net/dandoonian/b504pavg/5/

Below is my navbar code:

<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link" href="#section1">Section 1</a>
      <a class="nav-item nav-link" href="#section2">Section 2</a>
      <a class="nav-item nav-link" href="#section3">Section 3</a>
      <a class="nav-item nav-link" href="#section4">Section 4</a>
      <a class="nav-item nav-link" href="#section5">Section 5</a>
      <a class="nav-item nav-link" href="#section6">Section 6</a>
    </div>
  </div>
</nav>

A short video demonstrating the issue can be viewed here: https://youtu.be/olA7ddDKsWk

P.S. This is unaltered bootstrap code, no modifications were made except for content addition and link renaming.

Answer №1

To tackle the offset issue, I came up with a workaround that may not be the most elegant solution.

My approach involved inserting a dummy div at the top of each section, giving it a height of 72px, and then redirecting links to this div instead of the actual content div.

Instead of structuring the HTML like this:

<div class="container" id="section1">
    <h2>header</h2>
    <p>content here</p>
</div>

I opted for this alternative:

<div class="dummy" id="section1" style="width:100%; height:72px;"></div>
<div class="container">
    <h2>header</h2>
    <p>content here</p>
</div>

To avoid excessive padding at the top of the first section, I applied a negative margin-top to it.

{margin-top: -56px;}

As for the issue of the menu disappearing, none of my attempted solutions proved effective, prompting me to implement a JavaScript fix.

$('.navbar-nav>li>a').on('click', function(){
    $('.navbar-collapse').collapse('hide');
});

If this helps someone else in resolving a similar problem, I'll consider it a success.

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

Show image at 100 pixels wide after removing float classes (float-sm-start / float-sm-end) in Bootstrap 5 at a breakpoint

I am in the process of updating my HTML files to Bootstrap version 5.2.3. In the current version (4.6.2), I have been utilizing the float classes left and right to position images with text wrapped around them on their respective sides. Additionally, I ha ...

Tips for preventing the bootstrap modal from disappearing during auto postback in asp.net

I am currently using vb.net in my asp.net project along with Bootstrap 4. Within a modal, I have two dropdown lists. The goal is for the second list to be sorted based on the user's selection from the first list. However, I encountered an issue where ...

What is the best method for setting the height of an empty inline block element to match the line height of its container?

By default, inline-block elements adjust their height based on the container's line height only when they have content. However, I've noticed that empty or whitespace-only inline block elements default to a height of 0 (observed in Firefox). Is ...

Using Bootstrap 4 hex color codes for enhancing a Rails application

Is there a resource available that lists all the hex values for bootstrap 4 colors? I checked the documentation, but couldn't find it. I'm facing an issue where I need to align some colors on my website with the predefined bootstrap 4 colors lik ...

How to position collapsible buttons in Twitter's Bootstrap framework

I have successfully created two buttons on the same line. The second button is collapsible and when clicked, it adds a row of two more buttons to the view. However, the newly collapsed row of buttons appears aligned with the second button. I would like th ...

What are some strategies for ensuring that Plotly JS can adapt its height and width to fit the entire div dynamically, without relying on fixed pixel dimensions?

Is there a way to ensure that Plotly automatically adjusts to the size of the container #myDiv without any noticeable delay when the top button is clicked? This code snippet demonstrates a high delay: var z = [], steps = [], i; for (i = 0; i < 500; i+ ...

Restrict the use of font styles to specific languages

Is there a unique method to enable fonts to support specific languages and have other languages automatically use the selected font-family: fonts? ...

Ways to personalize an image within a table cell using HTML

I need some advice on adjusting the size of an image that I have inserted into a cell of a table on my html page. Can someone please guide me on how to do this? Thank you! ...

Rename multiple files in bulk

With 10000 files consisting of php, html, css, and png formats that are interconnected to operate the website's engine, I am looking for a way to perform bulk renaming in order to ensure proper functionality. Not only do I need to rename the actual fi ...

Manipulating the content of an array based on a specific key value using JavaScript's

Looking for a way to utilize a multidimensional array fruits in my code. The goal is to splice and push the values from the suggestFruits array into either the red or green fruits array based on the type specified. For example, items with type:1 should go ...

Can the title of href links be concealed?

<a href="link.html" title="Titletext"> ...is the code. I have a requirement to utilize the title attribute due to using slimbox, however, I am looking for a way to conceal the title text that appears when hovering over the link. Does anyone have a ...

React Image Slider not loading pictures

Can someone help me troubleshoot why my images are not displaying in the slider on my homepage? I have set up the slider using React Slideshow Image, but the images are not showing up for some reason. I am also wondering if anyone knows of any full-screen ...

What is the best way to remove bootstrap when transitioning to a new microfrontend?

Our team is facing an issue with styling when using a combination of React, Bootstrap, and Tailwind. The problem arises when linking our micro frontend to modules that use Tailwind, as the Bootstrap styles persist despite the change. Since both Tailwind an ...

The duplication and multiplication of margin-left is occurring

I am baffled by the fact that margin-left is only affecting certain elements and causing frustration. .setting-container { position: relative; top: 60px; left: 0px; width: 100%; height: calc(100% - 60px); } .setting-topnav { width: 100%; h ...

Converting the OpenCV GetPerspectiveTransform Matrix to a CSS Matrix: A Step-by-Step Guide

In my Python Open-CV project, I am using a matrix obtained from the library: M = cv2.getPerspectiveTransform(source_points, points) However, this matrix is quite different from the CSS Transform Matrix. Even though they have similar shapes, it seems that ...

Styling Table Rows with CSS Cross-Banding

I am striving to achieve a particular visual effect: https://i.sstatic.net/xbuBq.png The HTML code I am working with involves a basic table structure: <table id="a"> <thead> <tr> <td>normal</td> <td> ...

Text obstructed by a sticky sidebar in Bootstrap

Currently, I am utilizing bootstrap to create a webpage featuring an affixed sidebar. However, I have encountered two issues when adjusting the screen size to that of a phone: The sidebar obstructs the text behind it, halting its movement beneath the sid ...

Creating two tables in JavaScript and styling them with separate CSS designs

I am in the process of creating two tables dynamically using JScript. Instead of using the traditional method of separating them with assigned tags in HTML, I have approached the creation of the first table in a different way: function makeCells() { v ...

Is it feasible to automate the cropping process with selenium?

Exploring a new challenge: simulating a cropping feature. I understand that replicating human cropping is impossible, but the image I intend to crop remains a fixed size each time I run the test. My goal is to establish the cropping WebElement at a constan ...

Feeling lost and frustrated trying to align a div with a menu in the center

I've been struggling for over an hour now to center a menu on my website. Despite trying all of Google's recommendations, I still can't seem to get it right. Could someone please point out what obvious mistake I might be making? Below is ...