Fresh HTML Division located above the Homescreen and fixed to the top of the webpage

I have successfully implemented a full page video background on the homepage of my website. However, I am facing an issue where the "About" section is stuck at the top of the site and I cannot seem to figure out why. I want the video background to remain fixed and cover the entire site, along with a sidebar that displays menu options. Something seems off with the positioning of these elements.

/* Your CSS code here */
<script src="your/script/source.js"></script>

<section class="showcase">
  <header>
    <div class="logo-container">
      <a href="#"><img class="logo" src="/images/logo.png" alt=""></a>

    </div>
    <div class="toggle"></div>

  </header>

  <div class="overlay"></div>

  <video src="/your/video/source.mp4" muted loop autoplay></video>


  <div class="text">
    <h2>Your Heading Here</h2>
  </div>

  <div class="images">
    <div class="image1">
      <img src="/images/image1.jpg" alt="">
    </div>
    
    <!-- Add more image divs as needed -->
  </div>

  <ul class="social">
    <li class="social-icon"><i class="fab fa-facebook-f"></i></li>
    <li class="social-icon"><i class="fab fa-instagram"></i></li>
  </ul>

  <div class="contact-container">
    <a class="cool-link" href="#">Contact</a>
  </div>

  <!-- Scroll arrow -->
  <a class="scroll-down-arrow" data-iconfont="<Your Icon Font Library>" data-icon=""></a>

</section>

<div class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Product</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

<section id="about">
  <h1>About Us</h1>
  <p>
    Brief description about your company or website.
  </p>

  <h2>Follow Us On Social Media</h2>

  <div class="social">
    <a href="#" target="_blank"><i class="fab fa-twitter fa-3x"></i></a>
    <a href="#" target="_blank"><i class="fab fa-facebook fa-3x"></i></a>
    <a href="#" target="_blank"><i class="fab fa-github fa-3x"></i></a>
    <a href="#" target="_blank"><i class="fab fa-linkedin fa-3x"></i></a>
  </div>
</section>

If anyone can provide insights into what might be causing this issue, I would greatly appreciate it!

javascripthtmlcssvideoposition

Answer №1

To achieve the desired effect, you can add the following CSS for the showcase element:

.showcase {
  position: relative;
  right: 0;
  width: 100%;
  min-height: 100vh;
  padding: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #111;
  color: #fff;
  z-index: 2;
  transition: 0.5s;
}

If you need to have the showcase as absolute positioning, you can make use of the following CSS for the about ID:

#about {
  position:absolute;
  top:100vh;
  width:100vw;
}

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

Custom AngularJS directive that permits only alphabetic characters, including uppercase letters and the ability to input spaces

I'm currently working on an AngularJS directive that is meant to only allow alphabetical characters, however, I've encountered an issue where it disables caps lock and space functionality. While the main goal is to prevent special characters and ...

javascriptangularjsdesign-patternsinput

Using Javascript is a great method to efficiently confirm if a given name is made up of specific characters

My current project involves creating a system that requires users to input multiple names of their choosing. To ensure the validity of these names, I am looking to develop a "name verifier" that checks if all characters in the entered string are either let ...

javascript

Trigger a pop-up alert box when the jQuery event $(document).ready is fired within a Smarty template

I'm currently attempting to make a popup message display when the document is fully loaded. Although I have successfully integrated Google Maps on another page, this task seems to be more challenging. Below is the code snippet: <html> < ...

javascriptjquerysmarty

Dealing with the challenge of sorting and editing one div at a time

I'm encountering an issue with my script where the input textbox becomes uneditable when I use sortable for a div element. In my code, I have drag and drop functionality where after dropping, the div should be sortable and the input should be editabl ...

javascriptjqueryhtml

Issue with displaying Vue.js page within iframe in Firefox

We are facing an issue where a Vue.js page with an Echarts pie chart is not displaying in Firefox, even though it shows up perfectly in Chrome and IE. Replacing the Echarts page with basic numbers did not solve the problem in Firefox. Here is how i ...

javascripthtmlvue.jsiframe

Updating form in react requires a double click

I'm facing an issue with the popup form in my note-taking project. The popup form displays when a user wants to edit a note, and it should already contain the contents of the selected note. While the form shows the correct contents, I've noticed ...

javascriptreactjsmern

Adjust the height of videos automatically on columns

I need help figuring out how to display two videos with different dimensions side by side without any weird gaps. I've already tried using flex display with no luck. My current code looks like this: <div class="row"> <d ...

htmlcssbootstrap-4

Choose an item from a list that does not have a particular class

Here is a list of items: <ul id='myList'> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li class='item-selected'>Item 4</li> <li>Item 5</li> & ...

javascriptjqueryhtmlcss

Dynamic fade effect with GSAP on scroll

Currently, I am attempting to implement a fade out animation with GSAP Scroll Trigger. The aim is for the page to first scroll across the X axis of the title before scrolling up and fading out. While I have made some progress, I am facing an issue where th ...

javascriptvue.jsanimationgsapscrolltrigger

Store the current user's authentication information from Firebase in the Redux state using React-Redux

I am facing an issue with persisting the state of my redux store using the currentUser information from Firebase Auth. The problem arises when I try to access auth.currentUser and receive null, which I suspect is due to the asynchronous loading of the curr ...

javascriptreactjsfirebasereduxfirebase-authentication

Avoid using background images in HTML/CSS

I'm struggling to get my background image to show up despite trying various approaches. Any suggestions on how to fix this issue? ...

htmlcss

Using JavaScript, you can manipulate the position of a line on a canvas to

I want to create a feature where users can manipulate lines on a canvas by skewing them. This means they would be able to drag one end point of the line to a desired point on the same x-axis using JavaScript and HTML5 canvas. Can someone please provide g ...

javascripthtmlcanvas

Utilizing AJAX to call an HTML file that incorporates JavaScript and CSS components

Currently, I am incorporating AJAX to fetch an HTML file that contains jQuery and JavaScript. Despite already including these scripts on the page, the JavaScript (and CSS) are not running as expected. Any suggestions on how to make my JavaScript function ...

javascriptcssajax

Configuring environment variables during Jest execution

A variable is defined in my `main.ts` file like this: const mockMode = process.env.MOCK_MODE; When I create a test and set the variable to true, it doesn't reflect as `'true'` in the main file, but as `'false'` instead. describe ...

javascriptnode.jstypescriptunit-testingjestjs

What causes the selection of the menu item $invalid to always return as true?

I have an HTML form with a select menu: <form name="form"> <select name="gender" ng-model="model" ng-required="true" ng-model-options="{ updateOn: 'mousedown blur'}"> <option value="" disabled>--Select--< ...

javascriptangularjs

Difficulties with Bootstrap, JQuery, HTML, and CSS

Currently in the process of revamping a university society's website, I have some experience in web development but nothing too advanced. You can view the current website here: . Here is a sneak peek at the new design I am working on: . However, I& ...

javascriptjqueryhtmlcsstwitter-bootstrap

External CSS stylesheets

I have encountered the following HTML code: <div class="entry"> <p></p> //text-indent here <blockquote> <p></p> //no text-indent here </blockquote> </div> I am trying to apply a ...

htmlcss

Application designed for use with jQuery Mobile or HTML5 technology

I'm currently working on creating an application that needs to be compatible across different platforms and should function like a native android app. While I have experience building apps using PhoneGap, I haven't been able to achieve the desire ...

androidjquerycssjquery-mobilecss-transitions

What is the best way to retrieve the contents of the first and second lines from a textarea input field?

I'm seeking a way to extract the content of the first and second lines from a textarea in HTML. The challenge lies in the fact that the first and second lines may have varying lengths, making it impossible to simply copy a set number of characters. ...

javascripthtml

Constant variable class

I need to create a unique ID for each object in a class using node. For instance, I want each instance of a Person class to have an ID starting from 1, 2, and so on. In Java, this problem can be solved with the following code: public class Person { st ...

javascriptnode.js