Issues with content overlapping within Bootstrap can arise when elements are

Struggling with my band website development using Bootstrap. Inexperienced in web design, I'm facing difficulties getting elements to align properly without slipping under each other. Looking for insights and suggestions on how to avoid manual CSS adjustments like "top: 32px;".

Your feedback is valuable! GitHub Repo: https://github.com/Ominix/coldclockknockout

Feel free to review the raw code below if GitHub isn't accessible:

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </head>
  <body>

  ...

  <div class="container-fluid mainContent">
    <div class="row">
      <div class="col-md-4">
        <h1>THIS IS CONTENT NOW</h1>
      </div>
    </div>
  </div>

  ...

  <footer>
      <div class="container">
          <div class="row">
              ...
          </div>
      </div>
  </footer>

  ...

</html>

Find the CSS styles used below:

html {
    height: 100%;
}
...

/*================================================================================================

NAVIGATION  

================================================================================================*/
...

/*================================================================================================

JUMBOTRON

================================================================================================*/
...

/*================================================================================================

Main content on home page

================================================================================================*/
...

/*================================================================================================

FOOTER

================================================================================================*/

Acknowledging that there might be excess and redundant code, any guidance or constructive criticism is welcomed. Your expertise will make a significant difference. Thank you!

jqueryhtmlcsstwitter-bootstrapfrontend

Answer №1

It appears that the main issue lies in the top: 32px setting. When using a fixed navbar, it is recommended to apply padding to the body tag to avoid overlapping content with the navigation bar. For more information, refer to the official documentation.

Here is an example of a solution:

html {
  height: 100%;
}
body {
  background-color: black;
  height: 100%;
  padding-top: 50px;
}
.navbar-inverse .navbar-nav > .active > a {
  font-size: 1.25em;
  border-bottom: 1px solid red;
}
#navigation {
  border-radius: none;
}
#myCarousel img {
  max-height: 500px;
}
div.jumbotron {
  padding: 0;
}
div.jumbotron img {
  width: 100%;
}
#mobleJumbotron {
  display: none;
}
@media screen and (min-width: 0px) and (max-width: 800px) {
  #myCarousel {
    display: none;
  }
  #mobleJumbotron {
    display: block;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top" id="navigation">
  <div class="container-fluid">

    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <a class="navbar-brand" href="index.html">Coldclock Knockout</a>
    </div>

    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">News<span class="sr-only">(current)</span></a>
        </li>
        <li><a href="MUSIC.html">Music</a>
        </li>
        <li><a href="store.html">Store</a>
        </li>
      </ul>
    </div>

  </div>
</nav>

<div id="mobleJumbotron" class="jumbotron">
  <img src="http://placehold.it/3000x750/54AEC7/fff?text=BANNER" alt="cd release promo">
</div>

<div id="myCarousel" class="carousel slide" data-ride="carousel">

  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
    <li data-target="#myCarousel" data-slide-to="4"></li>
    <li data-target="#myCarousel" data-slide-to="5"></li>
    <li data-target="#myCarousel" data-slide-to="6"></li>
  </ol>

  <div class="carousel-inner" role="listbox">

    <div class="item active">
      <img src="http://placehold.it/3000x750/397082/fff?text=SLIDE" alt="cd release promo">
    </div>

    <div class="item">
      <img src="http://placehold.it/3000x750/D63147/fff?text=SLIDE" alt="Crowd Shot1">
    </div>

    <div class="item">
      <img src="http://placehold.it/3000x750/348535/fff?text=SLIDE" alt="Robby and Ryan in blue">
    </div>

    <div class="item">
      <img src="http://placehold.it/3000x750/4F74C4/fff?text=SLIDE" alt="Ryan 1">
    </div>

    <div class="item">
      <img src="http://placehold.it/3000x750/9E4639/fff?text=SLIDE" alt="Bryan 1">
    </div>

    <div class="item">
      <img src="http://placehold.it/3000x750/CF70C3/fff?text=SLIDE" alt="Robby 1">
    </div>

    <div class="item">
      <img src="http://placehold.it/3000x750/857B30/fff?text=SLIDE" alt="Crowd Shot2">
    </div>

  </div>

  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

</div>

<div class="container-fluid text-center">
  <div class="row">
    <div class="col-md-12">
      <h1>THIS IS CONTENT NOW</h1>
    </div>
  </div>
</div>

<footer>
  <div class="container">
    <div class="row text-center">
      <div class="col-lg-12">
        <ul class="list-inline">
          <li>
            <a href="#">Home</a>
          </li>
          <li class="footer-menu-divider">&sdot;</li>
          <li>
            <a href="#about">About</a>
          </li>
          <li class="footer-menu-divider">&sdot;</li>
          <li>
            <a href="#services">Services</a>
          </li>
          <li class="footer-menu-divider">&sdot;</li>
          <li>
            <a href="#contact">Contact</a>
          </li>
        </ul>
        <p class="copyright text-muted small">Copyright &copy; Your Company 2016. All Rights Reserved</p>
      </div>
    </div>
  </div>
</footer>

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's impossible for me to align two blocks at the same level

Check out the following code snippet. I am trying to group mid_left and mid_right within a single mid div tag, but struggling with positioning mid_right correctly - either outside of the mid tag or not at the same level as mid_left. I have experimented wit ...

htmlcss

Incorporate a map (using leafletjs or Google Maps) as a subtle backdrop

I am currently working on a one-page website and I would like to include a map as a background behind the "contact" section. The map can be set to float, draggable, or positioned at the back. I have experience using both the Google Maps API and LeafletJS, ...

javascripthtmlcssgoogle-mapsleaflet

Populate div with straight lines running vertically or horizontally

I'm wondering how to create vertical or horizontal lines inside a div. I tried this in the past but lost the code, and searching for "fill div with lines" isn't giving me any relevant results. Here's an image to illustrate what I'm try ...

htmlcss

Is there a way for me to create a clickable link from a specific search result retrieved from a MySQL database using an AJAX

Currently, I am attempting to create an ajax dropdown search form that provides suggestions based on results from a MySQL database. The goal is for the user to be able to click on a suggestion and be redirected to the specific product. The code I am using ...

javascriptphpjquerymysqlajax

What could be the reason behind the malfunctioning of my media query in the

I am trying to connect an external stylesheet to my React component in order to apply different styles based on screen width. Specifically, when the screen width is less than 300px, I want the logo to have a height of 100vh. However, it seems that the medi ...

htmlcssreactjs

Updating the content within a div following the submission of a contact form 7

I'm struggling with my contact form. I want the content of my contact form div to change after clicking submit on the form. I've been searching for a solution, but so far, no luck. Here is what I have: Form (div1) with input fields, acceptance c ...

javascriptphphtmlcss

Leveraging em units in jQuery Script

I'm currently in the process of building a website and I'm facing an issue with converting measurements to em's. The script that I have reused from a previous project only seems to work with pixels, despite my efforts to make it compatible w ...

javascriptjqueryhtmlcss

Heroku Node Crash - ERR_INCOMPLETE_CHUNKED_ENCODING

After developing my app successfully, I encountered some errors upon deploying it to Heroku. The following issues are preventing my page from loading correctly. Can anyone provide assistance? Failed to load resource: net::ERR_INCOMPLETE_CHUNKED_ENCODING ...

angularjsnode.jstwitter-bootstrapherokuexpress

The layout causes issues with responsiveness on the Flask app page

I'm currently in the process of developing a web application and I've implemented a navbar.html file as the layout for each page using the following code: eachpage.html : {% extends 'navbar.html' %} {% block body %} <div class=" ...

htmlcssflask

Combining Three HTML Tags Into a Single Page

I currently have a standard PHP webpage that consists of the header, body, and footer sections. Within this setup, I use the following code: <?php include('header.html'); ?> The header.html file contains <html>... content </html& ...

phphtmlseotags

Having trouble submitting ajax form data through nodemailer

Hey there, Recently, I created a web app using node.js and express. Everything seems to be working fine except for one issue - I am struggling to get the JSON data sent by AJAX into Nodemailer. Despite confirming that my AJAX is successfully sending the ...

javascriptjquerynode.jsajaxexpress

Client-side validation with JQuery for a custom attribute

I recently developed a unique Custom Validation Attribute: public sealed class DateValidatorAttribute : DataTypeAttribute { /// <summary> /// Constructor for the DateValidator Attribute. /// </summary> publi ...

c#jqueryvalidationasp.net-mvc-3

What could be the reason for the CSS file not getting applied to the HTML in my project?

Having trouble applying an external CSS file to my HTML file. Currently working on a Cloud IDE (goormIDE, similar to C9) and trying to link an external CSS file to my HTML file on the web server using Node.js. However, the CSS file is not being applied to ...

htmlcssnode.js

Check out this Angular demonstration page!

Looking to demonstrate the features of my Angular page using a plugin like intro.js, however, only part of the page is shown upon loading. Users are greeted with an input box to fill out an id and submit before the rest of the page is displayed after makin ...

javascriptjqueryangularjsdemo

Error: Unable to access the property 'fontSize' as it is undefined

<!DOCTYPE HTML> <html> <head> <title>Interactive Web Page</title> <link id="mycss" rel="stylesheet" href="mycss.css"> <script> function resizeText(size) { va ...

javascripthtmlcssdom

What is the best way to replicate a div's background color using an image within the body element?

I am looking to achieve a layout similar to the one below: The dark grey color represents the sidebar, but I want to use this color as a repeating vertical image in the body element without covering the footer (light gray). (this is the most straightforw ...

htmlcssimagebackground

Check out the source code of the file causing the redirection

Whenever I click on a URL, it triggers a redirect using the window.location function. I am curious to examine the code within this HTML file. Unfortunately, as it is constantly redirecting, I am finding it difficult to access the source code. Is there a w ...

javascriptjquerygoogle-chrome

I am looking to continuously update the progress bar as the AJAX responses are being received

In order to update the progress bar with every response individually, I encountered an issue where multiple responses were being received at once and only the last one would update the progress bar. Despite trying async:false, the progress bar would only u ...

phpjqueryajaxcodeigniter

Increasing the level of CSS list counters

HTML <ol> <li>item1 <ol> <li>item2</li> </ol> </li> <li>item1 <ol> <li>item2</li> <li>item3</li> </ol> </li> </ol> SC ...

htmlcsscss-counter

Erase the Non-Breaking Space in jQuery Pagination

After thinking I was finished, I discovered a problem with my pagination. In the midst of my selected page numbers, such as '5', I found hardcoded non-breaking spaces &nbsp;. Unfortunately, I am unable to access the cms to fix this issue, so ...

jquery