When linking to a section, the Bootstrap navbar obscures the top part of

I have been working on my inaugural website for educational purposes and encountered the following issue:

Every time I try to link to a specific section on the same page, it opens as intended but the top portion is obscured by the navbar.

<body data-spy="scroll" data-target="#myNavbar" data-offset="50">
   <nav id="myNavbar" role="navigation" class="container-fluid navbar navbar-default navbar-fixed-top">
      <div class="container">
         <div class="navbar-header">
            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
               <span class="sr-only"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand"></a>
         </div>
         <div id="navbarCollapse" class="collapse navbar-collapse">

            <ul class="nav navbar-nav navbar-right">
               <li><a href="#section1">Home</a></li>
               <li><a href="#section2">About</a></li>
               <li><a href="#section3">Portfolio</a></li>
               <li><a href="#section4">Contact</a></li>
            </ul>
         </div>
      </div>
   </nav>

   <div class="jumbotron" id="section1">
      <h1 class="header"></h1>
      <hr class="style" />
      <un class="list-inline">
         <li>
            <a href="#">
               <span class="glyphicon glyphicon-chevron-left"></span> Facebook
               <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
         </li>
         <li>
            <a href="#">
               <span class="glyphicon glyphicon-chevron-left"></span> GitHub
               <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
         </li>
         <li>
            <a href="#">
               <span class="glyphicon glyphicon-chevron-left"></span> LinkedIn
               <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
         </li>
      </un>
   </div>
</body>

Is there any way to ensure that the linked section appears below the navbar so that it does not cover the top of the section?

I attempted adjusting the body's padding-top, but it did not work.

(I previously resolved this by linking to separate divs and adjusting them with CSS. However, after implementing Bootstrap scrollspy, I had to target full sections in order for the problem to resurface.)

P.S.: No JavaScript or jQuery was utilized.

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

Here's a helpful tip that might spark some ideas: combining two navbars under a navbar-fixed-top class allows them to stay together when you scroll.

body {
  margin-top: 100px;
  position: relative;
}
.navbar.nav-lower {
  height: 20px;
  background: #f5f5f5;
  border-radius: 0;
  border: none;
  margin-bottom: 0;
}
.nav-lower .navbar-toggle,
.nav-lower .navbar-toggle:focus,
.nav-lower .navbar-toggle:hover {
  border: none;
  background: none;
}
.navbar.nav-lower > li {
  display: inline-block;
  width: 33%;
  text-align: center;
}
#section1 {
  padding-top: 100px;
  height: 500px;
  color: #fff;
  background-color: #1E88E5;
}
#section2 {
  padding-top: 100px;
  height: 500px;
  color: #fff;
  background-color: #673ab7;
}
#section3 {
  padding-top: 100px;
  height: 500px;
  color: #fff;
  background-color: #ff9800;
}
#section4 {
  padding-top: 100px;
  height: 500px;
  color: #fff;
  background-color: #00bcd4;
}
@media (max-width: 767px) {
  .nav-lower .navbar-collapse {
    text-align: left;
    background: #f5f5f5;
  }
}
@media (min-width: 767px) {
  .navbar.navbar-default.nav-lower .navbar-inner {
    padding: 0;
  }
  .navbar.navbar-default.nav-lower .nav {
    margin: 0;
    display: table;
    width: 100%;
  }
  .navbar.navbar-default.nav-lower .nav > li {
    display: table-cell;
    float: none;
  }
  .navbar.navbar-default.nav-lower .nav > li > a {
    text-align: center;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<body data-spy="scroll" data-target="#myNavbar" data-offset="100">
  <nav class="navbar navbar-default navbar-custom navbar-fixed-top" id="myNavbar">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>

        </button><a class="navbar-brand" href="#">Brand</a>

      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#section1">Home</a>

          </li>
          <li><a href="#section2">About</a>

          </li>
          <li><a href="#section3">Portfolio</a>

          </li>
          <li><a href="#section4">Contact</a>

          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
    <nav class="navbar navbar-default nav-lower">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-lower-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
          <span class="glyphicon glyphicon-chevron-down"></span>

        </button>
      </div>
      <div class="collapse navbar-collapse" id="bs-lower-nav">
        <ul class="nav navbar-nav">
          <li>
            <a href="#"> <span class="glyphicon glyphicon-chevron-left"></span> Facebook
              <span class="glyphicon glyphicon-chevron-right"></span>
            </a>

          </li>
          <li>
            <a href="#"> <span class="glyphicon glyphicon-chevron-left"></span> GitHub
              <span class="glyphicon glyphicon-chevron-right"></span>
            </a>

          </li>
          <li><a href="#"><span class="glyphicon glyphicon-chevron-left"></span> LinkedIn
               <span class="glyphicon glyphicon-chevron-right"></span></a>

          </li>
        </ul>
      </div>
    </nav>
  </nav>
  <div id="section1" class="container-fluid">
    <h1>Section 1</h1>

    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
  <div id="section2" class="container-fluid">
    <h1>Section 2</h1>

    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
  <div id="section3" class="container-fluid">
    <h1>Section 3</h1>

    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
  <div id="section4" class="container-fluid">
    <h1>Section 4</h1>

    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
</body>

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

Chrome's CSS columns cannot contain iframes without causing them to escape their

I'm currently attempting to incorporate Iframes within a 3-column grid. HTML <div id="blogPosts"> <div class="blogPost"> <iframe width="100%" src="https://www.youtube.com/embed/YqeW9_5kURI" frameborder="0" allowfullscre ...

htmlcssgoogle-chromeiframe

How can I dynamically assign a className in a React component based on the current state when importing styles?

I've been utilizing the style-loader to insert CSS modularly into my components ({style.exampleClassName}). My goal is to showcase a loader for a specific duration before displaying an image (at least 16 of these components in a grid layout). This i ...

javascriptcssreactjsreduxmodular

How can the caption be aligned to the right of the image within a Bootstrap thumbnail in a precise manner, while also ensuring the button is positioned at the bottom of the caption?

Greetings! I am in the process of developing a website using bootstrap v3.3.2. My first query revolves around utilizing the grid system to correctly position the caption on the right side of the thumbnail, as illustrated below: <div class="container"& ...

htmlcsstwitter-bootstrapthumbnailscaption

Issues with PHP and mySQL search functionality

<?php $username = "root"; $password = ""; $hostname = "localhost"; $db_handle = mysql_connect($hostname, $username, $password) or die ("Could not connect to the database"); $selected= mysql_select_db("login", $db_handle); ...

phphtmlmysqlsearchsearch-engine

issues with the functionality of bootstrap modal

I'm currently working on a project where I need to set up a modal popup using bootstrap. The website I'm working on is organized by departments, so the only part of the code that I have control over is the main body of the site. I have included t ...

javascriptjqueryhtmlcsstwitter-bootstrap

SyntaxError: The input on line one ended unexpectedly and was not caught

This issue is commonly associated with messy close parentheses, however, the error is occurring on line 1 of the file! Below is the javascript code from (filename: calculate.js) var colors = new Array(); colors["SILVER"] = -2; ... Although there is m ...

javascripthtmlsyntaxsyntax-error

Issue with !important keyword taking precedence not resolved

While working on a navigation bar button, I encountered a specificity conflict with the opacity property. I attempted to use the !important override but it doesn't seem to be taking effect. Any insights into why this might be happening? Here is the H ...

htmlcsscss-specificity

Troubleshooting Bootstrap 4 Content Alignment Issue: Centering Horizontally and Vertically

Having trouble centering my content both vertically and horizontally within the body of the webpage using Bootstrap 4. Despite trying various solutions from the documentation and StackOverflow, I can't seem to get it to work. Would greatly appreciate ...

htmlcssbootstrap-4

Learn how to easily center a responsive navbar using Twitter Bootstrap

I'm having a bit of trouble creating a website with Twitter Bootstrap, specifically when it comes to centering the navigation links in responsive design. My goal is to have a two-row navigation bar for tablet and phone devices, with the brand name at ...

htmlcsstwitter-bootstrap

Issue with displaying the Bootstrap paginator stylingSomething seems to be

Currently, I am working on a PHP project that involves creating a table with Bootstrap styling. To achieve this, I referred to a tutorial which guided me through the process. After linking the necessary Bootstrap CSS file using the provided code snippet, ...

phphtmlbootstrap-5

Modifying an HTML list item to become 'active' in a navigation bar

One way I've been implementing my navbar on each page is by using the following code at the bottom of the page within script tags: $("#navbar-partial").load("navbar.html). The code for the navbar list looks like this: <ul id="main-nav" class="nav ...

javascriptjqueryhtmlcsstwitter-bootstrap

Gain access to the iterable within the adjacent tag

I am looking to access an iterable from a sibling tag, but unfortunately it is within a table which complicates things. Simply wrapping the content in a div and moving the iteration outside is not possible due to the structure of table rows. Here is an exa ...

htmlvue.js

Retrieve data from an HTML form and utilize it to search a JSON array for a specific value

If I have a Json File structured like this: {"403": [ { "403-01-01": "219,00" }, { "403-01-02": "180,00" } ], "404": [ { "404-01-01": "26,00" }, {"403-01-02": " ...

javascripthtmlarraysjson

What is the best method for parsing information from the HTML source code of a specific tab on a webpage?

I have tried various methods mentioned in different responses, such as testing with different user agents (Chrome, Safari etc), and fetching HTML directly using HTTPClient and BufferedReader, but unfortunately none of them seem to be effective. How can I ...

javaandroidhtmlajaxjsoup

Unable to use href attribute as intended

HTML: <a id="Switch">Click here to switch</a> <a href="image1_large.png" class="mainA blade"> <img id="mainImage" src="image1.png"/></a> Javascript: <script> $(function() { $('#Switch').click(functio ...

javascripthtmlhref

Using absolute elements within a div that is positioned relative in HTML code

In the layout below: <div style="margin-top:0%" class="postcell"> <div id="postspantitle" > <span class="texts"><?php echo __('Başlık :', 'goldmem');?></span> </div> & ...

html

What is the best way to create a reset button for a timing device?

Is there a way to reset the timer when a button is clicked? Having a reset button would allow users to revisit the timer multiple times without it displaying the combined time from previous uses. Check out this code snippet for one of the timers along wit ...

javascripthtmlbuttontimerrestart

HTML Plant with background removed

I have been attempting to create a tree structure similar to the image provided. However, I am encountering difficulty in getting the background stripes to align properly for a specific row. When resizing the browser window, the stripes do not remain fixed ...

htmlcsstreeview

Tips for scaling and compressing a canvas image using only pure javascript and HTML5 techniques

I am currently working on resizing and rotating a camera picture on the client side without using any special libraries. I have successfully completed most of the task, but I encounter an offset of 320 pixels when rotating the image. The source of this off ...

javascripthtmlcanvas

Modify the styling of the main webpage using the iframe

Can the CSS of a parent page be modified from an iframe when the parent page and iframe are hosted on separate domains? ...

jqueryhtmlcss