Stopping Content from Getting Pushed Down Due to Overlap in Bootstrap

Stopping content from getting pushed down due to overlap in Bootstrap

If you add the following CSS, the image should float overtop without pushing any contents down.

#overlap .thumbnail {
  position: absolute;
  z-index: 100;
}

Updated: http://www.bootply.com/120760

How to stop these two divs/navbars from overlapping in Bootstrap

It is a bit difficult to tell what your issue is just by looking, but here are a couple of suggestions:

1. Check your padding, if you have any custom padding added to grid elements, make sure to add the property (box-sizing: border-box) to those which will make sure the size of the element won't grow with padding. Try to check that on your nav element as well.
2. Try to remove (col-sm-offset-3) and instead, wrap the two elements above in a row and a (col-sm-12), which will ensure that they both sit in 12 columns which might also help you find out what's happening.

This property might cause some errors, and I wouldn't recommend using it for actual development but it could help shed some light if the issue is indeed related to padding:

in your css, you can do something like:

html,html *{box-sizing: border-box !important;}

Even if this works and resolves the issue, please remove it and proceed to apply the box-sizing property to affected divs only and not html and it's children as it is never recommended to use syntax like this.

Bootstrap dropdown overlapping container div, rather than pushing it down

I'm thinking that the easiest solution for this will be that you need to clear your floats in the primary and secondary menu.

As you can see you have:

<div class="navbar navbar-static-top">...</div>

And you also have:

<div class="secondmenu">...</div>

The easiest way to clear these would be to put them inside a .row class or .row-fluid. I also suggest that you get into the habit of adding rows to your code when you can so these kinds of things clear.

Your code should end up looking like this:

<div class="row">
  <div class="navbar navbar-static-top">...</div>
  <div class="secondmenu">...</div>
</div>

Last but not least... your text is not positioned absolutely in relation to the slider div, but instead to the browser chrome, so you need to make your slider container have a position: relative so any elements set to position: absolute inside that container (in this case your h1) will be positioned absolutely according to it's parent container.

So set this in your styles as well:

.sliderwrap {
  position: relative;
}

That pretty much fixes your double menu so it clears the slider and the text. Let me know if this works for you and if you need any clarification on the answers, don't forget to upvote or accept the answer if it works! Cheers.

Make an element overlap contents below it using Bootstrap

You could absolutely position the .col-md-3.img element, and then float the .col-md-8.nav to the right. I added some classes to the elements and then placed the styling in a media query to ensure this doesn't conflict with any mobile/tablet styling. It seems to work well on all screen sizes.

UPDATED EXAMPLE HERE - FULL SCREEN EXAMPLE

@media (min-width: 992px) {
  .col-md-3.img {
      position: absolute;
      text-align: center;
  }
  .col-md-3.img .thumbnail {
      display:inline-block;
  }
  .col-md-8.nav {
      float: right;
  }
}

Add text-align:center to center the .thumbnail element, which is now also inline-block to fix background-related issues that result from the absolute positioning.

Prevent the dropdown menu overlap the div below just push it

Using absolute positioning will not regard for content underneath. With that being said, you have to use position: relative; on your dropdown menu in order to allow the input or any other content below to adjust when the menu opens.

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.container{
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.dropContainer{
  display: block;
  height: 100%;
  margin-bottom: 2rem;
}

.inputContainer{
  display: block;
  height: 100%;
  position: sticky;
}

 /* dropDown Menu */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: relative;
  background-color: #f1f1f1;
  min-width: 160px;
  padding-bottom: 140px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.show {display: block; }

<div class="container">
    <div class="dropContainer">
      <div class="dropdown">
      <button onclick="myFunction()" class="dropbtn">Dropdown</button>
        <div id="myDropdown" class="dropdown-content">
          <a href="#home">Home</a>
          <a href="#about">About</a>
          <a href="#contact">Contact</a>
        </div>
      </div>
    </div>
    <div class="inputContainer">
      <label for="fname">First name:</label>
      <input type="text" id="fname" name="fname" />
    </div>
</div>

How to prevent Navbar dropdown from overlapping with rest of the content?

The navbar is overlapping the content below it after toggling because its position is fixed and it is aligned independent of the content below it, so in order to make it push the content below when it toggles you need to make it relative for small screen devices using media queries, something like

@media (max-width:480px){

    body{
        padding:0;
    }
    .fixed-top{
         position:relative;
    }

}

I made body padding 0 to make sure it doesn't show white space at top after navbar is made relative

But note that this will make your navbar to move up and away from viewport when page is scrolled down.

rows getting pushed down by long column in bootstrap

One way that I can think of is to use one div as parent for the first 2 columns:

html:

<div class="container">
        <div class="row">
            <div class="col-xs-9 col-sm-9 col-sm-9" >
                <div class="col-xs-8 col-sm-8 col-md-8 about">
                    <img >
                </div>
                <div class="col-xs-4 col-sm-4 col-md-4 resume">
                    <img >
                </div>                
                <div class="col-xs-4 col-sm-4 col-md-4 waterfall">
                    <img >
                </div>
                <div class="col-xs-8 col-sm-8 col-md-8 middlebox">
                    <p id="middletext"><strong></strong><br></p>
                </div>                
            </div>            
            <div class="col-xs-3 col-sm-3 col-md-3 websites">
                <img >
            </div>
        </div>
</div>

css

.col-xs-4{
    height: 33vh;
    margin-bottom: 3vh;
    padding: 0;
    border: 2px solid black;
}

.resume{
    margin-top: 3vh;
}

.websites{
    height: 68vh;
    margin-top: 3vh;
    border: 2px solid black;
}

.col-xs-8{
    height: 33vh;
    margin-bottom: 3vh;
    padding: 0px;
    border: 2px solid black;
}

.col-xs-8.about{
    margin-top: 3vh;
}

---

Related Topics