Avoid having the content below become pushed down by a collapsed navbar

I am utilizing Bootstrap 4.1

My current structure is as follows: 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>


<nav class="navbar navbar-expand-lg bg-transparent navbar-dark align-items-end ">
  <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>
  <div class="collapse navbar-collapse " id="collapsibleNavbar">
    <ul class="navbar-nav mr-auto ">
      <li class="nav-item">
        <a class="nav-link" href="#">News</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Documents</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>

    </ul>
    <ul class="navbar-nav ">
      <li class="nav-item ">
        <a class="nav-link" style="font-weight:300; display:inline-block" href="">RUS</a>
        <font style="font-weight:300" color="white">|</font><a style="font-weight:300;display:inline-block" class="nav-link" href="">ENG</a>
      </li>
    </ul>



  </div>

  <ul class="navbar-nav">
    <li class="nav-item ">
      <a class="nav-link" style="font-weight:300;" href=""><i class="fas fa-user fa-sx"></i>&nbsp;&nbsp;Login</a>
    </li>
  </ul>


</nav>


<div class="d-flex   flex-column" style="border:3px solid green;height:720px; ">
  Some content
</div>

When my navbar collapses on smaller screens, it functions well, but upon clicking the "burger icon", .collapse pushes the content located below.

Is there a way to prevent this behavior? I want the revealed div to cover part of the content without expanding it.

I attempted following this suggestion, but it seems it does not work for the navbar.

Any assistance would be greatly appreciated.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Consider applying the fixed-top class to your navbar element for potential improvement.

For more information, visit the documentation page - https://getbootstrap.com/docs/4.1/components/navbar/#placement

<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>

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 to loop through divs, identify unique ones, and then add text from a specified value to a span element

I've been delving into the world of jQuery, asking numerous questions and providing some answers as a beginner myself. Currently, I have a good understanding of how to utilize jQuery for tasks such as adding CSS styles to a div and inserting text into ...

jqueryhtml

How can I use XPATH and Python Selenium to select the text node that is outside of an <a> element?

Check out the following link: Within this section of code: //*[@id="main-contents"]/div[1]/table[1]/tbody/tr/td, there is a piece of text Mottled Boar slain (10) //*[@id="main-contents"]/div[1]/table[1]/tbody/tr/td/a This part contains only: Mo ...

pythonhtmlpython-3.xseleniumxpath

What is the best way to align background shapes within a specific section on a webpage using CSS?

I've been attempting to strategically place multiple shapes in the background using CSS, but I'm facing challenges. While I was successful with my hero section at the top of the page, positioning elements in a section halfway down has proven prob ...

htmlcss

Tips on showcasing lengthy string content from JSON in a structured list format using react with typescript

Is there a way to display long string data from a JSON file in a list format when the description string is too lengthy? How can I split or format the description using React and TypeScript? The JSON data I have is as follows: "options": [ ...

htmlreactjsregextypescriptreact-redux

What is the best way to implement CSS in this JavaScript Fetch code in order to manipulate the text's position and font style

Hello, I am just starting out with JS. Is there a way for me to customize the position and font of text in this JS Fetch function using CSS? Any help will be greatly appreciated. let file = 'art.txt'; const handleFetch = () => { fe ...

javascriptcss

Struggling with Duplicated Images

Currently working on a website using only HTML and CSS. I am still learning the ropes in this area. My goal is to create a layout with a header, body, and footer that repeat to fill up the entire page, similar to envato.com. Here is a snippet of the code I ...

csshtml

Display the remainder of an image's height within a div container

Here is the code snippet I am working with: HTML: <div id="mapWrapper" style="height: 624px;"> <div class="box" id="map"> <h1>Campus</h1> <p>Description Campus Map.</p> <img src="abc.png" ...

htmlcss

Update the class name by utilizing template literals

I'm currently in the process of mastering template literals as I have a project where I need to utilize them. However, I seem to be encountering an issue that I can't quite figure out. Here is the code that is currently working: const classes = ...

javascriptcssreactjsmaterial-uistyles

Unable to retrieve data-id from <td> on click event

Can someone help with an issue I'm having in my code? Here is the snippet where I create a table data element: html += "<td data-id='test' class='journal' style='max-width:200px;'>"+record.source_account_code+"& ...

javascripthtml

Two variations of identical descriptions within a single div container

Is there a way for me to use an item, specifically an img, within the same div class but with different definitions? For example: section .row img { margin: 0 0 30px; width: 100%; border: 4px solid #18a00e; } section .row img { margin: 0 ...

htmlcss

Understanding how to automatically adjust margins in Bootstrap based on screen width

When viewing in fullscreen, the margins are set to ensure the container fits entirely within the page. However, without the 200px margin in the .gallery class, the container would be too big to fit on the page without scrolling. The problem arises when th ...

htmlcsstwitter-bootstrapflexboxbootstrap-5

A guide on how to insert content into a text area using a drop-down menu choice

I'm a total beginner at this. Is it possible to use JavaScript to automatically fill in a text area on an HTML form based on what is selected in a drop-down menu? If so, can someone please explain how to achieve this? ...

javascripthtml

Creating a sticky menu in a column using affix with a CSS bootstrap list-group

My goal is to develop a sticky menu utilizing CSS Bootstrap affix and the list-group menu. I have successfully implemented most of it, except for one issue when the user scrolls down. Upon scrolling down, the menu expands to fill the entire width of the ...

javascriptjquerycsstwitter-bootstraptwitter-bootstrap-3

When a user inputs a web or file address into a PHP form field, the result page will showcase a

My PHP database form is set up to gather user information, including a field for their website URL address. I want the result page to display the URL field as a clickable hyperlink. Can anyone advise me on how to achieve this? Many thanks! ...

phphtml

Is there a way to modify the row quantity when using the "show 10/25/50/100/All entries" feature in Vue JS?

Is there a way to dynamically change the number of rows displayed in a table based on the selection made from a dropdown menu? For example, if 25 is selected, I want to show all 25 rows on the table. The dropdown options include: 10/25/50/100/All and I w ...

vue.jsbootstrap-4

Enhance your web form with the Bootstrap 4 tags input feature that allows users to add tags exclusively

I'm currently utilizing Bootstrap 4 along with Bootstrap Tags Input to create a multiple category selection feature. My goal is to enable users to choose multiple items exclusively from the predefined categories listed in the predefined_list. At pres ...

javascriptjqueryhtmlbootstrap-4bootstrap-tags-input

Adjust the divs right element by adding or removing 1 pixel for every size change in the browser

I have been exploring different approaches to achieve this task and it seems like using javascript might be the most effective way. I am currently dealing with a stubborn social icon container placement issue. More details on my previous question can be fo ...

javascriptphpjqueryhtmlcss

Creating a CSS animation to mimic the fading in and out effect of the Mac scrollbar when scrolling begins

My journey begins with this: *::-webkit-scrollbar { } *::-webkit-scrollbar-button { } *::-webkit-scrollbar-track { } *::-webkit-scrollbar-track-piece { } *::-webkit-scrollbar-thumb:active { width: 6px; background-color: red; } *::-webkit-scr ...

javascripthtmlcsswebkitscrollbar

Activate browser scrollbar functionality

Below is the HTML code snippet: <html> <head> <style> #parent { position : absolute; width : 500px; height : 500px; } #top { position : absolute; width : 100%; height: 100%; z-index : 5; } #bottom { position : absolute; width : 100%; ...

javascripthtmlcss

Create a layout using jquery-tokeninput

Currently, my project incorporates jQuery-tokenInput and everything is functioning properly. However, I now have the desire to customize the design of the results that are displayed. For example, I want to adjust the width or make any other design changes. ...

jquerycssjquery-tokeninput