When the nav menu toggler in Bootstrap 4 is clicked on a mobile screen, it causes the content to

When I view this on xs or sm screens and click on the navbar toggler, it pushes all the content, including the header where the toggler is located, down the page to accommodate the dropdown menus. This behavior seems to be different from Bootstrap 3 and Bootstrap 4 alpha 5.

Any suggestions on how to prevent this from happening?

You can test the site here:

Below is the code:

<button class="navbar-toggler d-md-none" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            @*<li class="nav-item"><a class="nav-link" href="@WrestleStat_v3.Core.Constants.Route.ComparisonRoutes.GetDualComparisonSelectLink()">Dual Comparison</a></li>*@
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="comparisonDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Comparisons
                </a>
                <div class="dropdown-menu" aria-labelledby="comparisonDropdown">
                    <a class="dropdown-item" href="@WrestleStat_v3.Core.Constants.Route.ComparisonRoutes.GetDualComparisonSelectLink()">Dual/Team</a>
                    <a class="dropdown-item" href="@WrestleStat_v3.Core.Constants.Route.ComparisonRoutes.GetWrestlerComparisonSelectLink()">Wrestler</a>
                    @*<div class="dropdown-divider"></div>*@
                    <a class="dropdown-item" href="@WrestleStat_v3.Core.Constants.Route.ComparisonRoutes.GetDualComparisonSelectLink()">Perma</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="rankingsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Rankings
                </a>
                <div class="dropdown-menu" aria-labelledby="rankingsDropdown">
                    <a class="dropdown-item" href="@WrestleStat_v3.Core.Constants.Route.RankingRoutes.GetWrestlerRankingsAllLink()">Wrestler</a>
                    <a class="dropdown-item" href="@WrestleStat_v3.Core.Constants.Route.RankingRoutes.GetDualRankingsLink()">Dual</a>
                    <a class="dropdown-item" href="@WrestleStat_v3.Core.Constants.Route.RankingRoutes.GetTournamentRankingsLink()">Tournament</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="fantasyDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Comparisons
                </a>
                <div class="dropdown-menu" aria-labelledby="fantasyDropdown">
                    <a class="dropdown-item" href="@WrestleStat_v3.Core.Constants.Route.PickEmRoutes.GetFantasyThisWeekLink()">Pick'Em</a>
                    <a class="dropdown-item" href="@WrestleStat_v3.Core.Constants.Route.TourneyPoolRoutes.GetTourneyPoolHubLink()">Tourney Pool</a>
                    <a class="dropdown-item" href="@WrestleStat_v3.Core.Constants.Route.TourneyProjectionRoutes.GetTourneyProjectionLink()">Tourney Projection</a>
                </div>
            </li>
        </ul>
    </div>
csstwitter-bootstrapbootstrap-4nav

Answer №1

Reason Behind the Issue
The presence of the class sticky-top in your navbar applies a position: sticky; property, which behaves like a block element before any scrolling occurs. This causes the expanded navbar to displace all other block elements downward.

Solution1 - Shifts Regular Content Downward
To address this, place the following div: 

<div class="navbar-collapse collapse" id="navbarSupportedContent" style>...</div>
at the end of your <nav>...</nav>, or above the input if you want the searchfield to be positioned under the collapsed navbar.

Solution2 - Prevents Displacement of Elements
After implementing Solution1, modify your CSS by adding 

.sticky-top { position: fixed !important; }
, but only if sticky-top is not utilized elsewhere. This adjustment prevents the element from behaving like a block element when static, thus avoiding any content displacement. Additionally, apply margin to the first container-fluid to ensure it is positioned below the header again, considering the now fixed element no longer occupies space. For instance, assign classes pt-5 and mt-5 to achieve this.

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

It seems that using the SVG <mask> tag is necessary for Firefox to display correctly, but it causes issues with CSS mask in

I need assistance with masking content using an external SVG image. Currently, I'm using the following code: #homepage-banner .desktop-slider.masked { -webkit-mask:url(news-panel-mask.svg) left top no-repeat; /* Chrome/Safari (Webkit) */ mask: ur ...

cssfirefoxsvgmask

The background color of the active tab is updated upon loading the page

I have attempted to modify this code to change the background color of li tag on click. It successfully changes the background color when hovering or clicking, but unfortunately reverts back to the default color upon page refresh. I am looking for a soluti ...

javascriptjqueryhtmlcss

Enhancing the Appearance in Internet Explorer 7

Recently, I decided to check my client's new website on my BrowserStack account. I'm not very experienced in developing for older browsers, but I wanted to make sure the website was at least viewable on them. I tested it on Windows XP with IE 7. ...

cssinternet-explorer

Generate a loop specifically designed to execute the code following the menu in the script

My website has the code snippet below: let txt_com = document.querySelector(".text_user"); let num_com_user = document.querySelector(".massage_for_user"); txt_com.addEventListener("click", function() { if (this.classList.contains("num_com_user")) { ...

javascripthtmlcss

Does anyone else have a peculiar problem with css width?

Either I have been designing web pages for an extensive period of time without taking a break or something truly bizarre occurred. <div style="background-color:#0F0; margin:5px; height:5px;"></div> This will generate a lengthy bar with a 5-pi ...

csshtmlwidth

Is there a way to determine the bounding rectangle of a specific word within a paragraph when you only have its index?

I am currently developing a text-to-speech functionality for a react application that can emphasize the word being spoken by highlighting it with a background color. This feature closely resembles the layout of the Firefox reader view. However, my curren ...

javascripthtmlcssreactjstext-to-speech

Achieving consistent image column heights that decrease evenly

I am trying to create a grid-like layout where each column in a row has the same height and contains an image while maintaining its proportions. Currently, I am using the flex-grow property to adjust the ratio of the images. Although this works, it often ...

htmlcssflexbox

Animated the height of a rectangle during initial loading and when the mouse hovers over or leaves

Being new to Vue.js, I am looking to create a simple animation on component load for the first time. You can find my initial code here: <template> <div id="app"> <div class="rect" /> </div> </template ...

javascriptcssvue.jscss-transitions

Master the art of directing your attention to a list element with ease using the tab function and jQuery

I've been tasked with creating a questionnaire for a client. They want the current active question to be displayed at 100% opacity, while the inactive questions should be at 20% opacity. Currently, when the page loads, all questions are dimmed to 20% ...

javascriptjqueryhtmlcss

I am looking to save the session value into the search box of the appTables application by utilizing jQuery

Is there a way to save the session value in the search box of appTables by using jQuery? <?php $session = \Config\Services::session(); ?> <script type="text/javascript"> $(document).ready(function () { var searc ...

phphtmljquerycssajax

What could be causing the tabs to disappear from the Material UI tab component in my React project?

What am I currently working on? I am in the process of developing a horizontally scrollable tab component to select dates within a month For this project, I have decided to utilize the Material UI library Issues Encountered The dates before the 14th Sun ...

cssreactjsmaterial-uitabs

Custom override of SX prop classes with Material-UI theme

I am currently working on customizing a component using the sx MUI prop. <Typography variant='h1' align='center' sx={{ fontSize: '24px', pb: '8px', fontWeight: '700' }} > ...

cssreactjsmaterial-ui

Foundation 4 Framework: Mastering the Art of Clearing CSS Floats

I'm currently in the process of developing a website, but I am facing difficulties with clearing the floats. My website is built using the foundation 4 framework. Whenever I apply the .columns class to an element, it causes the elements to float left. ...

csscss-floatzurb-foundation

Tips for effectively utilizing CSS classes with current-device

Attempting to lock the screen orientation in portrait mode for mobile and iPad devices using a CSS snippet found on css-tricks.com. @media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) { html { transform: rotate ...

javascripthtmlcssscreen-orientation

Transition effects should be applied solely to the foreground text color, not to the background image

Is there a way to specifically apply the css3 transition effect only to the text color? Imagine having a readmore class with a transition effect defined like this: .readmore { colour: red; -webkit-transition: all .3s ease-out; -moz-transition ...

htmlcss

Unlimited header height with automatic vertical overflow for content on the rest of the page

My page has a header with content that can wrap, so it doesn't have a fixed height. I want the rest of the page to be filled by the content container and activate vertical scroll when there is too much content in the container. I've tried various ...

htmlcss

What is the best way to ensure that a div containing lengthy text wraps to the next line as if it were only text overflow?

Is there a way to make a div or span within another div act as text, causing overflow to shift to the next line? I'm unsure of which CSS properties would achieve this effect. I've attempted using overflow-wrap: break-word; word-break: break-al ...

javascripthtmlcsstypescript

The complete guide to effectively concealing double arrows within a Bootstrap 4 custom-select component

If you're looking to hide the double arrow on the right of the bootstrap 4 custom-select field, there have been solutions provided here. However, even after implementing those changes, the text on the right-hand side still gets obscured by the opaque ...

javascripthtmlcssbootstrap-4

Tips for choosing an option from a react dropdown using Cypress

Exploring Cypress: I am currently working with the following code snippet. Although it seems to be functioning, I have a feeling that there might be a more efficient way to achieve the desired result. There are 25 similar dropdowns like this one on the pag ...

cssxpathcypress

Jquery plugin experiencing a malfunction

I am encountering an issue with my custom plugin as I am relatively new to this. My goal is to modify the properties of div elements on a webpage. Here is the JavaScript code I am using: (function($) { $.fn.changeDiv = function( options ) { var sett ...

javascriptjqueryhtmlcss