Content being obscured by fixed-top navbar

I am facing an issue with my fixed-top navbar, which is created using the Bootstrap library. Despite padding the body from the top to prevent content from being hidden underneath it, I encounter a problem when clicking on a link such as "about us" - the top of that section gets hidden under the navbar. Is there a way to ensure that the content of "about us" appears just below the navbar upon clicking the link?

body{
  padding: 3em 0;
}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1L" crossorigin="anonymous">

<nav class="navbar bg-dark navbar-light fixed-top">
  <div class="container-fluid">
      <a href="#about-us">About Us</a>
  </div>
</nav>
<div class="content">
  <div id="about-us">
       <h1>About Us</h1>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  <div>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  </div>

  </div>
</div>

htmlcssbootstrap-4

Answer №1

Implement

#our-story {
  padding: 3em 0;
}

in place of

html {
  padding: 3em 0;
}

Answer №2

Here's a clever solution that includes the "smooth scroll" feature and effectively resolves your issue.

The key is using jQuery's .animate() method in combination with an offset to smoothly navigate to the desired section (minus the offset value). Here's what you need to do:

  1. Create a class name, any name will do

  2. Add this class name to your menu links (keep in mind that the menu links should be anchor tags for this specific code snippet to work)

  3. Implement the jQuery code showcased in the demo below, which listens for clicks on elements with the specified className and then utilizes jQuery animate to smoothly scroll down to the section corresponding to the href attribute ID. The offset parameter is what makes this solution effective.

If using $('a.jtkirk') as the selection/trigger doesn't suit your needs, you can also consider using $('a[href^=#]') (this targets all a-tags with href starting with a #) -- though please note that this may not function correctly within StackOverflow's snippets. It's safe to use a class for identifying smooth-scroll links. You have the freedom to choose any class name; I opted for Capt Kirk's alias for clarity.

DEMO:

$('a.jtkirk').click(function(e){
    e.preventDefault();
    var kirkoffset = 50;
    $('html,body').animate({
        scrollTop: $(this.hash).offset().top - kirkoffset
    }, 700);
});
body{
  padding: 3em 0;
}

/*  Below not necessary - only for demo layout */
nav .scroll{
  display:flex;
  justify-content:flex-start !important;
}

nav .scroll a {margin-right:15px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav class="navbar bg-dark navbar-light fixed-top scroll">
  <div class="container-fluid scroll">
      <a class="jtkirk" href="#about-us">About Us</a>
      <a class="jtkirk" href="#nuther-one">Nuther One</a>
  </div>
</nav>
<div class="content">
  <div id="about-us">
       <h1>About Us</h1>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
  </div>
  <div>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
  </div>
  <div id="nuther-one">
       <h1>Nuther One</h1>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
  </div>

</div>

Answer №3

If you want to style your navbar using the :target selector, you can add a :before element with a specific height.

body {
  padding: 3em 0;
}

:target::before {
    display: block;
    height: 40px;
    margin-top: -40px;
    content: '';
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav class="navbar bg-dark navbar-light fixed-top">
    <div class="container-fluid">
        <a href="#about-us">About Us</a>
    </div>
</nav>
<div class="content">
    <div id="another">
        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    </div>
    <div id="about-us">
        <h1>About Us</h1>
        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        <div>
            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        </div>
    </div>
</div>

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

Using jQuery UI to dynamically add a widget based on a specific class, rather than relying on

Exploring the world of Apache Cordova and jQueryUI is a new adventure for me. I am currently experimenting with formatting the layout of my index.html using jQueryUI. As mentioned in this section of the jQueryUI tutorial, a widget can be added using the f ...

javascripthtmlcsscordovajquery-ui

using a different path variable within an href attribute

<a id="m1" class="audio {autoPlay:false, addGradientOverlay:true}" href="MusicFolder/" + document.getElementById("DropDownList1").value + "/" + document.getElementById("DropDownList2").value>document.getElementById("DropDownList2").value</a> ...

javascripthtmlasp.net

Enhancing navigation functionality using CSS

I have two separate pages with navigation included in both. This way, it's easier to edit the navigation menu once instead of doing so on each page individually. However, I am now facing uncertainty on how to implement the 'active' class usi ...

htmlcsstwitter-bootstrap

Two Mistakes Found in the Dropdown Menu

Can anyone assist me with two errors I am encountering in my "Drop Down Menu"? Error 1: Whenever I hover towards the right direction in the sub-menu (e.g., Portfolio 2), a black box appears. This issue does not occur when hovering above the text (e.g., P ...

cssdrop-down-menu

Error encountered during submission due to integrity issues

I am currently working on an application that allows users to report a film to the admin database. The issue I am facing is that when I try to report a movie by clicking on the report button and filling out the report_form template, I encounter the followi ...

pythonhtmlmysqldjango

Incorporate JQuery into an asp.net mvc view

I'm currently in the process of developing a bike store project and I'm looking to incorporate Jquery into the Order.create view. My goal is to have only inventory items that are associated with the selected store from the DropDownList appear in ...

c#jqueryhtmlasp.netasp.net-mvc

How to use the HTMLParser library in Java to extract the content of a title tag

Attempting to fetch text content in the title tag from Google's webpage using Java, but encountering issues with the output. Despite a successful build, the output only shows "TITLE" instead of "GOOGLE". Here is the code snippet: import org.htmlpars ...

javahtml

What is the best way to incorporate Skeleton.css into my React application?

As someone who primarily uses React in React Native but is now working on a website, I have run into some issues trying to implement skeleton.css in my React App. <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> ...

javascriptcssreactjses6-modulesskeleton-css-boilerplate

Basic slidebar that covers the full width

I am currently utilizing a basic slider plugin to generate a ticker bar resembling the following: and then transitions to the next slide: The functionality mirrors that of this "plugin," but my predicament is that the width of the slider must occupy 100% ...

javascriptjqueryhtmlcss

PHP form - The issue with validation not functioning properly

I'm having trouble validating a simple PHP form with HTML code and it's not working as expected. Here is the HTML code: <form action="expresscontactform.php" method="post" name="form1" id="form1"> <label>Name </label>< ...

phphtmlformsvalidation

How can we stop the brief display of a hidden div from occurring?

I have two divs on my webpage - one to display if JavaScript is disabled, and another if JavaScript is enabled. The issue I am facing is that even when JavaScript is not disabled, the div containing the message stating that JavaScript is disabled briefly ...

javascriptjqueryhtmlcss

The mysterious case of the vanishing jQuery traversal box

I'm currently navigating using previous and next buttons, but it seems to be malfunctioning if I click too quickly. My goal is for the navigation to remain smooth without breaking. var $currDiv = $("#start"); $("div").hide(); $currDiv.c ...

jqueryhtmlcss

When you include ng-href in a button using AngularJS, it causes a shift in the alignment of the text within the button

Recently, I've been delving into Angularjs with angular-material and encountered a slight issue with ng-href. I created a Toolbar at the top of my webpage, but the moment I include the "ng-href" attribute to a button, the text inside the Button loses ...

javascripthtmlcssangularjs

Excessive spacing issues arise while adjusting CSS height, leading to undesirable vertical scrolling

One of the features of my website is a post section where users can leave comments. These comments are displayed at the bottom of the post. To enhance user experience, I decided to create a modal for posts using HTML and CSS as shown below. However, I enc ...

jqueryhtmlcss

Illuminate the image upon checking the checkbox, as well as when clicking on the image itself

Issue with Implementation <div> <input type="checkbox" id="check" class="check-with-label" /> <label for="check" class="label-for-check">My Label <img class="product-add-image-preview" src="http://ecx.images-amazon.com/images ...

htmlcsscss-selectors

Discovering if a div element has children using Selenium IDE

As I begin to automate testing for our website with Selenium IDE, I must admit that I am still learning the ins and outs of it. We utilize highcharts to exhibit data on our site. The challenge arises from the fact that there are 3 div elements handling th ...

htmlcssseleniumhighchartsselenium-ide

Mastering the art of transitioning between DIV elements

I am looking to implement a rotating three-card display on click, and have come up with the following code: $('.box1').click(function(){ $('.box1').toggleClass('removeanimate'); $(this).toggleClass('go'); ...

javascripthtmljquerycss

The CSS does not get applied to the returned element in Next JS

When I create a function to return a DOM element with an associated className, the local style doesn't seem to be applied. For example: export default function thing(){ const elem = function(){ return (<div className="myCss">Hello< ...

cssreactjsnext.jsstyled-jsx

Tips for smoothly applying a class to an image for seamless transitions, avoiding any awkward clunkiness

Check out my work on jsfiddle I understand that the image may not be visible, but I'll do my best to describe it. The header smoothly animates as I scroll down, but the image abruptly changes size instead of smoothly resizing. I want it to gradually ...

javascriptjqueryhtmlcss

Ways to induce scrolling in an overflow-y container

Is there a way to create an offset scroll within a div that contains a list generated by ngFor? I attempted the following on the div with overflow-y: @ViewChild('list') listRef: ElementRef; Then, upon clicking, I tried implementing this with s ...

javascripthtmlangulartypescriptngfor