Is the fixed header see-through?

I have a query regarding my website design. Currently, the fixed header on my site is transparent and when I scroll down, the content overlaps the header. However, I want the header to remain above the content. Can anyone provide assistance with this issue?

The red box represents the header while the green box symbolizes the content. As you can see, the text and images are overlapping the header:

Here is a snippet of my Header.php file:

* {
  margin: 0;
  padding: 0;
}

#header {
  background-color: #F9F6F3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
}
<div id="header">
  <header id="fh5co-header" role="banner">
    Here goes the header text and logo.

  </header>
</div>

htmlcss

Answer №1

In my experience, I have not encountered this error - the content consistently appears behind the header in your provided example.

To prevent this issue, you can utilize "z-index", a CSS attribute that determines the stacking order of elements on a webpage.

In the scenario below, I assigned a z-index of 10 to your header, ensuring it remains in front of any elements lacking a z-index, such as the content.

<!DOCTYPE html>
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>TitleT</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <meta name="author" content="" />

  <!-- Facebook and Twitter integration -->
  <meta property="og:title" content="" />
  <meta property="og:image" content="" />
  <meta property="og:url" content="" />
  <meta property="og:site_name" content="" />
  <meta property="og:description" content="" />
  <meta name="twitter:title" content="" />
  <meta name="twitter:image" content="" />
  <meta name="twitter:url" content="" />
  <meta name="twitter:card" content="" />

  <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
  <!-- <link rel="shortcut icon" href="favicon.ico"> -->

  <link rel="stylesheet" href="css/animate.css">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/icomoon.css">


  <link rel="stylesheet" href="css/owl.carousel.min.css">
  <link rel="stylesheet" href="css/owl.theme.default.min.css">

  <link rel="stylesheet" href="css/style.css">
  <script src="js/modernizr-2.6.2.min.js"></script>

</head>

<body class="boxed">
  <div id="wrap">
    <div id="fh5co-page">


      <style>
        * {
          margin: 0;
          padding: 0;
        }

        #header {
          background-color: #F9F6F3;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100px;
          z-index: 10;
        }
      </style>
      <div id="header">
        <header id="fh5co-header" role="banner">
          <div class="container">
            <a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle dark"><i></i></a>
            <div id="fh5co-logo">
              <a href="/"><img src="images/logo.png" height="50" width="95" alt=""></a>
            </div>
            <nav id="fh5co-main-nav" role="navigation">
              <ul>
                <li><a href="about">sdf</a></li>
                <li class="has-sub">
                  <div class="drop-down-menu">
                    <a href="services.html">dfgdfg</a>
                    <div class="dropdown-menu-wrap">
                      <ul>
                      </ul>
                    </div>
                  </div>
                </li>
                <li><a href="portfolio.html">asd</a></li>
                <li class="has-sub">
                  <div class="drop-down-menu">
                    <a href="#">gzu</a>
                    <div class="dropdown-menu-wrap">
                      <ul>
                        <li><a href="quotation">Ser</a></li>

                      </ul>
                    </div>
                  </div>
                </li>
                <li class="cta"><a href="contact">Contact</a></li>
              </ul>
            </nav>
          </div>
        </header>
      </div>
      <br>
      <br>
      <div id="fh5co-intro" class="fh5co-section">
        <div class="container">
          <div class="row row-bottom-padded-sm">
            <div class="col-md-8 col-md-offset-2 text-center ts-intro">
              <h1>About Us</h1>
            </div>
          </div>
          <div class="row row-bottom-padded-sm">
            <div class="col-md-8" id="fh5co-content">
              <h2>History</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus possimus, quaerat tenetur quos ad nostrum eaque esse, ex blanditiis deleniti accusantium molestias perferendis odio, iste cum. Hic eius, ullam repellendus. Possimus, ratione?
                Qui, tempora, eveniet! Eveniet facilis nesciunt commodi nostrum!</p>
              <p>Illum provident, rerum hic porro doloremque alias voluptatibus fugit aliquam aspernatur molestiae debitis fuga, expedita vel animi eius, ab natus in enim repellendus harum! Est atque quae aut? Sint quis expedita illo placeat ad saepe hic
                quidem dolore laboriosam? Sapiente.</p>
              <p>Similique sint consequuntur cum ea quia placeat aliquid blanditiis atque, et earum sit sequi. Earum dignissimos omnis, hic atque ducimus quibusdam eos, exercitationem cum ea ipsum, est animi nesciunt. Consequuntur molestias ratione asperiores
                sequi nam minima dignissimos voluptas consequatur nemo.</p>
              <p>Ut sit repellat id dignissimos excepturi recusandae reprehenderit eius, voluptatem et ab quos qui sequi rem sapiente, delectus numquam officiis. Maxime aliquam unde eum quo, sit qui voluptatum odio nam. Iste vitae, sed enim facilis suscipit
                quis obcaecati quas, nobis.</p>
              <p>Cupiditate commodi velit officia quidem dolores incidunt, deserunt nam quaerat aliquam labore iure quam. Exercitationem tempora itaque error odio quasi quas illo consequatur nisi debitis, aliquam magnam voluptas, quia, impedit, architecto
                fugit suscipit officia ullam laudantium sit libero excepturi deserunt.</p>
            </div>
            <div class="col-md-4" id="fh5co-sidebar">
              <div class="fh5co-service text-left">
                <img src="images/slider_2.jpg" class="img-responsive img-bordered" alt="Free HTML5 Bootstrap Template by FreeHTML5.co">
                <h3>WDesign</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ullam unde, totam harum laboriosam dolores.</p>
                <ul class="ul_style_1">

                </ul>
              </div>
            </div>
          </div>
          <div class="row row-bottom-padded-sm">
            <div class="col-md-6">
              <p><img src="images/slider_3.jpg" alt="Free HTML5 Bootstrap Template" class="img-responsive img-bordered"></p>
            </div>
            <div class="col-md-6 padded-top">
              <h3>Creative Title Here</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum fuga rerum doloremque dolore, molestias eligendi. Nulla aliquam aut doloribus tenetur repellendus omnis dicta, unde magni.</p>
              <ul class="ul_style_1">
              </ul>
            </div>
          </div>

        </div>
      </div>

      <footer id="fh5co-footer" role="contentinfo">
        <div class="container">
          <div class="row row-bottom-padded-sm">
            <div class="col-md-4 col-sm-12">
              <div class="fh5co-footer-widget">
                <h3>About Us</h3>
              </div>
            </div>
            <div class="col-md-3 col-md-push-1 col-sm-12 col-sm-push-0">
              <div class="fh5co-footer-widget">
                <h3>Quick Links</h3>
                <ul class="fh5co-footer-link">
                </ul>
              </div>
            </div>
            <div class="col-md-3 col-md-push-2 col-sm-12 col-sm-push-0">

              <div class="fh5co-footer-widget">
                <h3>Follow us</h3>
                <ul class="fh5co-social">
                </ul>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-12">
            </div>
          </div>
        </div>
      </footer>

    </div>
  </div>

  <center>
    <center><small class='block'><font size='3'>&copy; 2015-2018 by <a href='https://auszdgfuzasdfg.com'></font></small></center>
  </center>

</body>

</html>

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

Transforming the text to be "unreadable"

I find myself in a rather odd predicament where I must display my name and contact details on a webpage. Although I am comfortable with sharing this information, I would prefer that it remain unreadable to robots or other unauthorized sources. Essentially ...

javascripthtmlcssweb

Is it possible to display this code through printing rather than using an onclick event?

I have a puzzle website in the works where users select a puzzle to solve. I am looking for a way to display the puzzles directly on the website instead of using pop-up boxes. I am proficient in various coding languages, so any solution will work for me. ...

javascriptjqueryhtmlcss

Loading CSS dynamically at runtime can be seen as a mix of both success and failure

I have been attempting to optimize my app by loading fonts on demand. By retrieving fonts from a project directory generated by the app, it is able to gather all necessary data. My primary concern is whether there is an equivalent of 'app-storage://& ...

cssruntimeexecutiontidesdk

Center text within a dropdown using Bootstrap styling

In a row within my inline form, I have both an email input and a dropdown. However, after resizing the page, the text within the dropdown is no longer positioned correctly (text on the left, arrow on the right). I attempted to fix this by using: text-alig ...

htmlcsstwitter-bootstrapbootstrap-4

Postback does not reload all controls in the NameValueCollection

Recently, I designed a custom User Control in asp.net. public class InputMask : CompositeControl, IPostBackDataHandler, IPostBackEventHandler Imagine the custom control is enclosed within a div element: <div runat="server" id="inputArea"> < ...

c#cssasp.netcustom-controls

Having trouble getting a background image to show up using node.js?

Hi there, I have a quick and simple question. I am attempting to include a div with a background-image in my *.ejs page file. <style> .signPage{ background-image: url("//back.jpg"); width: 98%; height: 98vh; top: ...

cssnode.jsejs

What is the preferred approach in JavaScript: having a single large file or multiple smaller files?

Having a multitude of JavaScript files loaded on a single page can result in decreased performance. My inquiry is this: Is it preferable to have individual files or combine them into one JavaScript file? If consolidating all scripts into one file is the ...

javascripthtmlperformance

Having trouble with clearing floats in Twitter Bootstrap CSS - any help appreciated!

Today, in an effort to learn CSS and apply it practically by creating simple themes, I decided to delve into the proper ways of clearing floats in CSS. My research led me to explore how Twitter handles this issue, so I dug into Bootstrap's CSS file an ...

htmlcsstwitter-bootstrap

manipulating dropdown visibility with javascript

I'm feeling a bit lost on how to structure this code. Here's what I need: I have 5 dropdown boxes, with the first one being constant and the rest hidden initially. Depending on the option chosen in the first dropdown, I want to display the corres ...

javascripthtmlcss

Interacting with a PNG file using a border radius in Internet Explorer 9 is causing issues with its transparency

Encountering an issue with IE9 where a white to gray gradient box appears around the transparent PNG on hover/selection. There is also a border radius applied to the thumbnail. Any ideas on how to fix this problem? Here is an example of the issue: https ...

htmlcss

Receiving input in a "textbox" rather than using an alert message

Hey there! I managed to get this jquery code that displays the number of Facebook likes: <script> $.getJSON("https://graph.facebook.com/TuamadreLeggenda?callback=?", function(data) { alert("Likes: " + data.likes); }); </script> Is there ...

jqueryhtml

Updating the text of a Mat-Label dynamically without the need to reload the page

In my application, there is a mat-label that shows the Customer End Date. The end date is fetched initially through a GET request to an API. Let's say the end date is 16-05-2099, which is displayed as it is. There is also a delete button implemented f ...

javascripthtmlangulartypescriptrest-client

How can a variable value be implemented in HTML style within Jinjia2?

Wondering how to dynamically position a small image on a web page based on a variable value? For instance, if the v_position variable is set at 50, you want the image to be centered horizontally. And if it's set at 100, the image should display at the ...

csshtmljinja2templating

Sort the currency column in an HTML table through JavaScript

I have a code snippet below that I'm currently utilizing to arrange columns in an HTML table. The code works perfectly for alphabetical sorting and also for single-digit numbers. However, when attempting to sort a column containing currency values, t ...

javascripthtml

Can data be transmitted to two separate scripts simultaneously?

Just a quick HTML inquiry: Can data from HTML forms be sent to two separate scripts using the "action" attribute, or is there an alternative method? I'd like to explore other options aside from utilizing curl. ...

phphtmlformspost

Tips on connecting a file upload button to a flip card

In my current project located in index.html, I have integrated a flip card as a profile photo feature. Additionally, I have included a file uploader button on the page. However, I am struggling to connect the functionality of the file uploader button to au ...

htmlcss

The issue of bootstrap-multiselect being clipped under a kendo window has been causing

I am encountering an issue with my kendo window while using the bootstrap multiselect dropdownlist inside it. When I try to select something from the dropdown list, the dropdown-menu is getting clipped under the window and I cannot see all the options. Ev ...

csstwitter-bootstrap-3bootstrap-multiselectkendo-window

The arrow icon that I included in my bootstrap project seems to have disappeared from my view

While trying to enhance my footer, I attempted to include an arrow-up-circle icon. However, after adding the code, the icon doesn't appear. Here is the html snippet I used: <html> <head> <link href="https://cd ...

htmlcssbootstrap-4bootstrap-5

Automatically create CSS properties for left and top using absolute positioning

When looking at these websites as models: On each of them, I noticed that there is a well-organized column of boxes for every post. I attempted to recreate this using various methods, but couldn't achieve the exact layout on my own website. It seems ...

javascriptjqueryhtmlcss

The fixed positioned div with jQuery disappears when scrolling in Firefox but functions properly in Chrome, IE, and Safari

Click here to see a div located at the bottom of the right sidebar that is supposed to behave as follows: As you scroll down the page, the div should change its class and become fixed at the top of the screen until you reach the bottom of the parent el ...

javascriptjqueryhtmlcssfirefox