Problems with scrolling in the navigation bar, main content area, and footer

The challenge

Encountering a scrolling anomaly with the Navigation Bar, Body, and Footer while utilizing Bootstrap 4. Everything appears to function smoothly on the desktop view. The glitch arises when I reduce the viewport size. The body fails to stay in place, making it impossible to scroll when it is positioned between the navbar and the footer.

I'm perplexed as to why the following code snippet is present in my navbar:

<div style="padding-block-end: 200px;">
  {{> navbar}}
</div>

Additionally, the beginning of my content gets partially obscured by the navigation bar.

:root {
  --navbar-bg-color: hsl(0, 0%, 15%);
  --navbar-text-color: hsl(0, 0%, 85%);
  --navbar-text-color-focus: white;
  --navbar-bg-contrast: hsl(0, 0%, 25%);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
}

.container {
  max-width: 1000px;
  padding-left: 1.4rem;
  padding-right: 1.4rem;
  ...

...

@media screen and (max-width:1000px) {
  .first {
    text-align: center;
  }
  .first h4::after {
    left: 40%;
  }
}

.margin {
  margin-left: 20px;
}

.container h1 {
  text-align: center;
  margin-top: 100px;
  margin-bottom: 100px;
}
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<!-- Navigation Bar -->
<header id="navbar">
  <nav class="navbar-container container navbar-default navbar-fixed-top">
    <a href="/" class="home-link">
      <div class="navbar-logo"></div>
    </a>
    <button type="button" class="navbar-toggle" aria-label="Open navigation menu">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="navbar-menu">
      <ul class="navbar-links">
        <li class="navbar-item"><a class="navbar-link" href="/">home</a></li>
        <li class="navbar-item"><a class="navbar-link" href="/">...</a></li>
        <li class="navbar-item"><a class="navbar-link" href="/">...</a></li>
        <li class="navbar-item"><a class="navbar-link" href="/">...</a></li>
      </ul>
    </div>
  </nav>
</header>

...

<!-- Footer -->
<div class="footer">
  <div class="container">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="line"></div>
          <div class="second2">
            <a href="https://codepen.io/AndreeaBunget" target="_blank"> <i class="fab fa-codepen fa-2x margin"></i></a>
            <a href="" target="_blank"> <i class="fab fa-github fa-2x margin"></i></a>
            <a href="" target="_blank"> <i class="fab fa-linkedin fa-2x margin"></i></a>
            <a href="https://www.youtube.com/channel/UCX674BUbomzBCakbb75lhfA?view_as=subscriber" target="_blank"><i class="fab fa-youtube fa-2x margin"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

htmlcssbootstrap-4

Answer №1

It seems like the issue arises from the height of the form being smaller than your screen's height.

To ensure that the content is always visible, you can add min-height: 100vh;. Additionally, utilizing flexbox allows for easier and faster development.

Below is your modified code:

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

/* Rest of the CSS code goes here */

Here is the HTML Code snippet:

<!-- Navbar section -->
<header id="navbar">
  <nav class="navbar-container navbar-default navbar-fixed-top">
    <a href="/" class="home-link">
      <div class="navbar-logo"></div>
      Brand
    </a>
    <button type="button" class="navbar-toggle" aria-label="Open navigation menu">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="navbar-menu">
      <ul class="navbar-links">
        <li class="navbar-item"><a class="navbar-link" href="/">Home</a></li>
        <li class="navbar-item"><a class="navbar-link" href="/">About</a></li>
        <li class="navbar-item"><a class="navbar-link" href="/">Contact</a></li>
        <li class="navbar-item"><a class="navbar-link" href="/">Login</a></li>
      </ul>
    </div>
  </nav>
</header>

<!-- Content Section -->
<div class="container form-group content">
  <form method="POST" enctype="multipart/form-data" action="sendmail">
    <input name="name" type="text" class="feedback-input" placeholder="Name" required="required" />
    <input name="email" type="text" class="feedback-input" placeholder="Email" required="required" />
    <textarea name="text" class="feedback-input" placeholder="Message" required="required"></textarea>
    <input type="submit" action="sendmail" />
  </form>
</div>

<!-- Footer Section -->
<div class="footer">
  <div class="container">

    /* Footer content continues here */

  </div>
</div>

/* Font Awesome Script */
<script src="https://kit.fontawesome.com/a076d05399.js"></script>

You can view the complete code on Codepen.

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

`CSS animation for vanishing line effect`

I want to create an animated logo that gives the illusion of being pulled up by a rope, represented by a vertical black line, from the bottom of the page to the top. As the logo moves upwards, I would like the rope to disappear behind it, but I'm uns ...

javascriptcss

Is there a way to verify the presence of a specific word within a classname?

My goal is to verify if the string ("Pre laminated ") matches the css class name I am checking. I only need confirmation of whether the given word is present in the classname: Output "pass" if it exists, output "fail" if it does not. ...

javacssseleniumclassname

The final Bootstrap radio element is missing from view

Presented below is the form in question: <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, ...

htmlbootstrap-5

Can a <style> tag be included in a .css file without issue?

Within one of our projects, there is a <style> tag placed at the beginning of a CSS file (for the purpose of ensuring CSS highlighting in certain text editors): <style> body { ... } .... Although I am aware that this is considered incorrect ...

css

Setting the size of a box using CSS in HTML pages

I am facing issues with resizing boxes. Below is the code snippet: <!DOCTYPE html> <html lang="en"> <head> <style> .wrapper { text-align: center; } #bubble { display: inline; -moz ...

htmlcss

Ways to clear away adhesive header and maintain its fixed position

I've been tinkering with my website, which you can find at this link: . I used the html5 up template for it, and the template came with a sticky header. However, when the site is viewed on a smaller screen, there's an ugly gap that forms between ...

javascriptcsshtmlscrollsticky

Prevent background image animation in CSS

I've encountered an issue with a simple button I created that uses two background images for normal and hover states. Upon testing in various browsers, I noticed that the images animate on hover, causing them to slide up and down. I tried eliminating ...

csscss-transitions

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

One section of my Android app, powered by JQuery Mobile, displays a table with a combobox. The issue arises when selecting the option with a very long text, causing the combobox to expand and show half of the table off-screen. My goal is to set the combob ...

androidjquerycsshtmljquery-mobile

Combining data using D3's bar grouping feature

I'm currently exploring ways to group 2 bars together with some spacing between them using D3. Is there a method to achieve this within D3? I found inspiration from this example. var data = [4, 8, 15, 16, 23, 42]; var x = d3.scale.linear() .doma ...

javascriptcssd3.js

Using PHP to wrap text based on the language at hand

I'm facing an issue with a small area (div or span) that can only display one to five words at a time. The problem arises when certain lengthy words like "muziekgeschiedenis" exceed the boundaries of this limited space. Is there a way in PHP to wrap s ...

phphtmlcssword-wrap

What is the reason for being unable to submit the value of an input that is disabled?

When I try to save the value of an input field that is disabled and has the required attribute, I receive an error message stating that "field_name is required". Why am I unable to insert a value when the input field is disabled? <input disabled type=&q ...

javascriptphphtmljquery

A guide on configuring Flexbox to consistently display three columns

For the website I'm working on, I've utilized Flexbox to properly align the items. Within the div .main, I have organized the content in separate divs. These are the CSS properties that I've applied: .main{ margin: 0 auto; /*max-height: ...

cssflexbox

Trouble encountered when utilizing jQuery for XML to HTML conversion and vice versa (CDATA mistakenly transformed into HTML comments)

I am in the process of developing a plugin/bookmarklet that is designed to extract an XML document from the <textarea> element on a web page, make modifications to the XML content, and then reinsert the updated version back into the <textarea> ...

javascriptjqueryhtmlxmlcdata

How can I extract information exclusively from child nodes with Jsoup?

Currently, I am facing an issue with extracting first-level <li> elements from a <ul> element. Even though I attempt to retrieve only the first-level <li> elements using Jsoup selector or getElementsByTag, the nested <li> elements w ...

javahtmldomscreen-scrapingjsoup

The navbar expands in height when resized

I've been working on creating a responsive navbar, but I'm facing an issue where the height of the bar doubles between phone screen size and full window size. Despite trying various Bootstrap classes, I haven't had any success in fixing this ...

htmlcsstwitter-bootstrapbootstrap-4

Manipulating the 'display' attribute with jQuery

Is there a way to show an element that has been hidden using the following CSS? .pds-pd-link { display: none !important; } Can jQuery be used to enable the display of the .pds-pd-link CSS? For example, would $(.pds-pd-link).css("display",""); ...

jquerycss

Challenges Encountered with Random Image Generator in JavaScript

I am encountering an issue with a script that is supposed to change the default images to a random image each time the page is refreshed. However, I keep receiving an error stating that boxID is null. Why is boxID null? <script type="text/javascript" ...

javascripthtml

Hide the div element once the timer runs out

Struggling to make a timer disappear when it reaches 00:00, every attempt results in the div being hidden immediately. Check out the code snippet I've been working with: $(document).ready(function(e) { var $worked = $("#worked"); function upd ...

javascriptjqueryhtmlcountdown

Attach a Material-UI Popper component to a customized edge label in a React Flow

After finding inspiration from this particular example in the react-flow documentation, I decided to create my own customized version. It showcases a Material Ui Popper that appears when the edge is selected. However, my problem arises when attempting to z ...

javascriptcssreactjsmaterial-uireact-flow

Need inspiration for testing web content with Protractor?

Exploring new possibilities for testing web content with Protractor. Any fresh ideas on what else can be tested? So far, I've checked links to ensure they redirect correctly. I've also verified text color and decoration changes when hovering ove ...

htmlcsstestingprotractorend-to-end