CODEWITHSUNDEEP
phphtmlcssbootstrap-4navbar
Ranga Sarin
Ranga Sarin

Reputation: 169

Bootstrap 4 Nav Bar fixed-top over content

I'm using bootstrap4 fixed-top navbar which works fine in normal browser.

However, when I test on a mobile device (Galaxy S5 using chrome dev options) the content starts behind the nav bar, I've tried some padding in my css but I can't seem to get it to work correctly.

Below is a jsfiddle of the HTML and CSS, the page content starts behind the fixed-top nav bar.

https://jsfiddle.net/8kefh4u7/6/

Also here is my CSS

html,
body {
  height: 100%;
}

body {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

.epg-container {
  position: relative;
  width: 100%;
  max-width: 1500px;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  background-color: black;
}
.epg-container ul.listings-grid {
  list-style-type: none;
  padding: 0;
  margin: 0;
  white-space: nowrap;
  background-color: #262626;
}
.epg-container ul.listings-grid li {
  font-size: 20px;
  text-align: left;
}
.epg-container ul.listings-grid .listings-channel-row {
  height: auto;
  padding: 0;
  border-bottom: solid;
  border-bottom-width: 6px;
  border-color: #262626;
  overflow: hidden;
}
.epg-container ul.listings-grid .listings-channel {
  /*  color not necesary  */
  color: white;
  width: 20%;
  height: 83px;
  float: left;
  text-align: center;
}
.epg-container ul.listings-grid .listings-channel img {
  max-width: 100%;
  max-height: 100%;
}
.epg-container ul.listings-grid .listings-program {
  color: #989898;
  border-right: solid;
  border-right-width: 3px;
  border-left: solid;
  border-left-width: 3px;
  border-color: #262626;
  float: left;
  padding: 10px 10px;
  background-color: black;
}
.epg-container ul.listings-grid .listings-details-now-info {
  color: #fa9609;
  font-size: 12px;
}
.epg-container ul.listings-grid .listings-details-next-info {
  color: #fa9609;
  font-size: 12px;
}

What would be the best way to make the content page always start under the NAVBAR that would work well on mobile.

Upvotes: 5

Views: 7339

Answers (3)

Martlark
Martlark

Reputation: 14581

It is unreliable to use a fixed amount for the height of the header to introduce a padding-top to the body element. I'm using this bit of code after a page refresh to set the body to the correct height.

        $("body").css({'padding-top': $('nav.navbar').height()});

The navbar is identified using the nav element with the navbar class.

Upvotes: 6

Ranga Sarin
Ranga Sarin

Reputation: 169

I fixed this so now the content will always start after the fixed nav bar.

I added the below to the body css

min-height: 51.5rem;
padding-top: 2.5rem;

Thank you @ZimSystem for pointing me in the right direction.

Upvotes: -2

Carol Skelly
Carol Skelly

Reputation: 362320

The recommended method is padding-top on the BODY, the same height as the navbar...

body {
   padding-top: 56px;
}

From the Bootstrap docs..

"Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the ) to prevent overlap with other elements."

Upvotes: 8

Related Questions