Unable to scroll content above the header/banner

Hey there, I'm looking for some assistance to achieve a similar effect to the one on this page: https://jsfiddle.net/WsXP6/126/

However, my goal is to have the top section be a solid color instead of an image. I've been struggling to make it work... The content part doesn't seem to overlap the top section for some reason. Just a heads up, I am relatively new to working with HTML & CSS.

Here is my CSS & HTML:

html {
    height: 100%;
    width: 100%;
}

body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

#logo {
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    float: left;
    margin-left: 40px;
    margin-top: 35px;
}

nav {
  float: right;
  margin-top: 40px;
  margin-right: 40px;
}
  a {
    color: #ffffff;
    font-weight: 400;
    font-size: 80%;
    text-decoration: none;
    margin: 0 auto;
    margin-left: 3rem;
}

.header {
    background: #0F1014;
    background-size: cover;
    height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
}


.content_top {
  margin-top: 260px;
  padding: 4rem 0 8rem 0; }
  .sub_title, .under_title {
    color: #ffffff;
    text-align: center;
  }

  .sub_title {
    font-weight: 400;
    font-size: 0.85rem;
    margin: 0 0 5px 0;
  }

  .logo_middle {
    display: block;
    margin: auto;
  }

  .under_title {
    font-weight: 400;
    font-size: 0.85rem;
    margin: 5px 0 5px 0;
  }

.content {
    background-color: #ffffff;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
<html>
  <head>
    <title>Jakob Hoeg</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=0">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
  </head>
  <body>
    <div class="header">
      <header>
        <a href="index.html"><img id="logo" src="images/logo_top.png" draggable="false"/>
        <nav>
          <a href="#">HOME</a>
          <a href="#">PORTFOLIO</a>
          <a href="#">CONTACT</a>
        </nav>

        <div class="content_top">
          <h4 class="sub_title">HELLO, MY NAME IS</h4>
          <img class="logo_middle" src="images/logo_big.png" draggable="false"/>
          <h4 class="under_title">MULTIMEDIA DESIGN STUDENT</h4>
        </div>
      </header>

    </div>
    <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>

  </body>
</html>

htmlcss

Answer №1

Feel free to experiment with the code snippet below: https://jsfiddle.net/WsXP6/268/

Your CSS:

html {
    height: 100%;
    width: 100%;
}

body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

#banner{
  background-color:#fff;

}
#logo{

}
nav{
  position:absolute;
  right:10px;
  top:10px;
  }
nav a{
  text-decoration:none;
  color:#444;
  padding:0 5px;
}
h4{
  margin:0;
  padding:10px 0;
}
.content{
  background-color:#fff;
  padding:60px 0;
}
.sub_title{
  text-align:center;
}
.content img{
  display:block;
  text-align:center;
}
.under_title{
  text-align:center;
}

Answer №2

If you're looking to add a parallax effect to your website, check out this awesome javascript parallax plugin. To achieve the desired effect, you will need to incorporate some javascript into your code.

Explore the Paraxify.js plugin here

Answer №3

Can parallax effects be achieved with a solid color backdrop? It's uncertain, but perhaps utilizing an image with the desired color could work. Parallax effects are typically designed for images. Keep me updated on your progress!

Answer №4

The background color has been successfully changed to red.

html {
    height: 100%;
    width: 100%;
}

body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

#logo {
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    float: left;
    margin-left: 40px;
    margin-top: 35px;
}

nav {
  float: right;
  margin-top: 40px;
  margin-right: 40px;
}
  a {
    color: #ffffff;
    font-weight: 400;
    font-size: 80%;
    text-decoration: none;
    margin: 0 auto;
    margin-left: 3rem;
}

.header {
    background-color: red;
    background-size: cover;
    height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
}


.content_top {
  margin-top: 260px;
  padding: 4rem 0 8rem 0; }
  .sub_title, .under_title {
    color: #ffffff;
    text-align: center;
  }

  .sub_title {
    font-weight: 400;
    font-size: 0.85rem;
    margin: 0 0 5px 0;
  }

  .logo_middle {
    display: block;
    margin: auto;
  }

  .under_title {
    font-weight: 400;
    font-size: 0.85rem;
    margin: 5px 0 5px 0;
  }

.content {
    background-color: #ffffff;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

https://jsfiddle.net/crystaloakley/WsXP6/275/

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

Execute button click automatically upon page loading in AngularJS

I'm trying to figure out how to automatically trigger a button click on an AngularJS page when the page loads based on a querystring value. In a traditional asp.net web forms page, I could easily handle this scenario by calling Button1_Click(sender,e) ...

javascripthtmlangularjsbuttonclick

Having difficulty with submitting a modal form via Ajax Request in Laravel

Attempting to delete a user based on input from a modal form, but encountering difficulty. No error message is showing in the console. As a beginner, struggling to pinpoint the mistake. Error: Ajax request issue. Code snippet below: Blade modal section: ...

phphtmljqueryajaxlaravel

What happens when HTML5 Video quality starts to decline?

Exploring the capabilities of the HTML5 video tag has left me pondering the best approach for graceful degradation in cases where a codec is not supported. Handling older browsers (or IE) that lack support for the video tag altogether is quite straightfor ...

firefoxvideohtmlaccessibilityfirefox3.5

Checking for CSS-truncated text with JavaScript

I am currently working on a JavaScript project to determine if text is truncated. While I found a useful solution mentioned here, there is one edge case that needs to be addressed. Despite the visual truncation of the text, the first block on mouse hover i ...

javascripthtmlcsstexttruncate

Issues with CSS hovering effects

this is my unique code snippet CSS Stylesheet .Navigation-signIn { background-color: #c8db5a; } .Navigation-signIn։hover { background-color: #ffffff; } JSX Component import { NavLink } from "react-router-dom"; import { BrowserRouter } fro ...

cssreactjs

Creating a dynamic process for assigning unique identifiers to objects in JavaScript

Struggling with JavaScript while working on a project in .Net. I am looking for a way to trigger a click on the 'generate' button that extracts data from the dropdown menu after the click event. I have a button named 'btn', which, whe ...

javascripthtml.netweb-applications

Is there a problem with the alignment of

<s:form id="inputThresholdForm" name="inputThresholdForm" theme="simple"> <table border="0" class="display-table" cellspacing="2" cellpadding="2" height="100%" width="100%"> <tr> <td colspan= ...

javascriptjqueryhtmlcss

Show content based on information from an array using JavaScript

I am currently working on developing a user-friendly step-by-step form using AngularJS and UI-router to navigate through different sections. The data collected from each form is stored in a JavaScript array, and I am trying to dynamically show or hide a di ...

javascripthtmlangularjs

Display MQTT information on a Django template

I've been utilizing paho-MQTT successfully to receive messages. However, I'm facing a challenge in displaying the received data in a template. Below is an excerpt of my code: import paho.mqtt.client as mqtt import json def on_connect(client, use ...

pythonhtmldjangomqttmessagebroker

Adjust the element to occupy the entire height

To achieve center alignment on the page, I want to expand an element's margin. The first and third elements should stick to the top and bottom, while the second element has a fixed height and needs to be centered. If my explanation isn't clear e ...

htmlcssresponsive-design

Is there a way to use jQuery to focus the cursor on a specific field in a form?

In my form, the first field is a dropdown with options such as "student" and "employee". Below that, there are two text fields for "college name" and "company name". If a person selects "student", then the "college name" text box should be enabled and t ...

jqueryhtmlcursor

What is the best method for displaying a custom print and paginated preview complete with Page Boxes using a combination of Javascript and CSS

I am looking to display a scrollable print preview of HTML content on a single page. Please carefully review the following information and offer suggestions for a solution. When given dynamic raw data that can be extensive, is it possible to utilize cust ...

javascriptcssdhtml

Include a class in the HTML code if a certain condition is met in PHP

As I work with the html navigation panel, here is an example of an open tab: <li class="nav-item active open"> Currently, I am looking to have 'active open' applied when my url contains \testing\one. To retrieve the URL, I am u ...

phphtmlcsscodeigniter

Retrieve a particular HTML element from an object that has been mapped

After reproducing my issue on a smaller scale for easier handling, I am now aiming to implement an onclick function that reveals the hidden content inside each column. The plan is to initially hide the content using display: none and then switch it to disp ...

javascripthtmlcssreactjs

Utilize the power of the Web Audio API to play incoming audio chunks in real-time

Is there a way to listen to the audio I am recording in real-time as it is being recorded? I have written some code for recording audio and processing it using the Web Audio API. However, I am unsure of how to play the audio back through my speakers while ...

javascripthtmlaudiowebrtcweb-audio-api

How can a JQuery function be used with SVG to trigger a second animation immediately after the first animation is finished?

For the handwriting effect animation, I utilized the animation-delay technique by dividing the object wherever it intersected, drawing paths, and converting them into clipping masks. This involved breaking the letter "W" into four parts, creating different ...

htmljquerycsssvgsvg-animate

HTML documents do not show images

I'm having trouble displaying the same picture three times. It seems like a simple task, but for some reason, it's not working correctly. ...

htmlimage

Guide on centering an unfamiliar element in the viewport using HTML, CSS, and JavaScript

In the process of developing my VueJS project, I have successfully implemented a series of cards on the page. However, I am now facing a challenge - when a user selects one of these cards, I want it to move to the center of the screen while maintaining its ...

javascripthtmlcssdom

Snap to the top of the table with merged columns using scroll feature

I am currently attempting to create a table with horizontal scrolling and snapping behavior for the yellow header columns that span multiple columns. These headers should snap to the end of the red column, while always maintaining alignment at the beginnin ...

htmlcssscroll-snap

extracting json data in php from an api

Requesting an array of specifications from flipkart's API. Successfully fetching the response from the API: { "nextUrl": "https://affiliate-api.flipkart.net/1.0/affiliate/feeds/fnkygygma/category/reh/55ab6c2673a4773ffb8e4019.json?expiresAt=1452 ...

javascriptphphtmlangularjs