Requesting for Nav to be positioned directly below the header, in a fixed manner, with no overlapping

After successfully resolving the issue of my header overlapping content, which was thanks to your help, I encountered a new challenge. I was advised to group my navigation bar with my h1 header for a fixed position but doing so caused everything to go haywire. Now I seek assistance in keeping my navigation bar right under my header without any overlap. You can see the desired layout when viewing my website in full screen, and the problem that occurs when resizing the webpage.

You can access the first page of my website here.

Here is the code snippet for this particular page:

    <!DOCTYPE html>
    <html lang="en-us">
    <link rel="stylesheet" href="normalize.css">
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" href="style.css">
            <link rel="stylesheet/less" type="text/css" href="style.less" />
            <script src="less.js" type="text/javascript"></script>
            <title> Knox Enterprises Inc.</title>
        </head>
        <body>
            <header>
                <h1>Knox Enterprises Inc.</h1>
                <div class="nav">
                    <a href="index.html">Home</a>
                    <a href="About.html">About</a>
                    <a href="Contact.html">Contact</a>
                </div>
            </header>
            <div class="content">
                <div class="home">
                    <div class="home-pictures">
                        <img src="http://i64.tinypic.com/14o91c1.jpg" width="300px" height="225px">
                        <img src="http://i63.tinypic.com/2rpzh3p.jpg" width="300px" height="225px">
                    </div>
                    <div class="home-pictures2">
                        <img src="http://i68.tinypic.com/rswqoy.jpg" width="300px" height="225px">
                        <img src="http://i66.tinypic.com/2lm8bdg.jpg" width="300px" height="225px">
                    </div>
                    <div class="home-description">
                        <ul>
                            <h5>Riveredge, NJ</h5>
                            <h5>Date Completed: June 2014</h5>
                        </ul>
                </div>
                <div class="home">
                    <div class="home-pictures">
                        <img src="home_5.jpg" width="300px" height="225px">
                        <img src="home_6.jpg" width="300px" height="225px">
                    </div>
                    <div class="home-pictures2">
                        <img src="home_7.jpg" width="300px" height="225px">
                        <img src="home_8.jpg" width="300px" height="225px">
                    </div>
                    <div class="home-description">
                        <ul>
                            <h5>Teaneck, NJ</h5>
                            <h5>Date Completed: March 2015</h5>
                        </ul>
                </div>
                <div class="home">
                    <div class="home-pictures">
                        <img src="home_9.jpg" width="300px" height="225px">
                        <img src="home_10.jpg" width="300px" height="225px">
                    </div>
                    <div class="home-pictures2">
                        <img src="home_11.jpg" width="300px" height="225px">
                        <img src="home_12.jpg" width="300px" height="225px">
                    </div>
                    <div class="home-description">
                        <ul>
                            <h5>Tenafly, NJ</h5>
                            <h5>Date Completed: August 2016</h5>
                        </ul>
                </div>
            </div>  
        </body>
    </html>

CSS styling:

    html, body {
        margin: 0;
        padding: 0;
        background-image:url("backround.jpg");
        background-repeat: repeat-y;
    }
    header {
        height: 220px;
    }
    #about-header{
        height: 100px;
    }
    #contact-header{
        height: 100px;
    }
    /*Knox Header*/
    h1 {
        position: fixed;
        top: -40px;
        width: 100%;
        font-family: Georgia;
        color: white;
        text-shadow: 4px 4px black;
        background-image: url("header.jpg");
        font-size: 60px;
        text-align: center;
        text-transform: uppercase;
        border-bottom: 5px solid orange;
        border-top: 5px solid orange;
        z-index: 1;
    }
    /*Nav Menu/Home Page*/
    .nav {
        position: fixed;
        top: 78px;
        background-image:#606060;
        overflow: hidden;
        }
    .nav a {
        font-family: Helvetica;
        background-color:black;
        float: left;
        color: #f2f2f2;
        text-align: center;
        padding: 10px 12px;
        text-decoration: none;
        font-size: 12px;
        border-right: 2px solid orang...

Answer №1

The issue you are facing with your CSS code is that the position: fixed property is applied to your <h1> tag instead of the header itself. To fix this, you should transfer all the styles from h1 to #about-header:

#about-header {
  position: fixed;
  top: -40px;
  width: 100%;
  font-family: Georgia;
  color: white;
  text-shadow: 4px 4px black;
  background-image: url("header.jpg");
  font-size: 60px;
  text-align: center;
  text-transform: uppercase;
  border-bottom: 5px solid orange;
  border-top: 5px solid orange;
}

Remove the hardcoded heights of 100px and 220px in #about-header and header respectively. These values are set on line 10 and 7 of your style.css.

Also, get rid of top: -40px, reduce the font-size to 0.9em, and consider using a media query for different font sizes.

Lastly, utilize z-index to ensure your header stays visible above other content while scrolling:

#about-header {
  z-index: 1;
}

Your updated #about-header section should look like this:

#about-header {
  position: fixed;
  width: 100%;
  font-family: Georgia;
  color: white;
  text-shadow: 4px 4px black;
  background-image: url(header.jpg);
  font-size: 0.9em;
  text-align: center;
  text-transform: uppercase;
  border-bottom: 5px solid orange;
  border-top: 5px solid orange;
  z-index: 1;
}

By making these changes, your sub-header will remain attached to the main header across various devices and screen resolutions, appearing over all other content.

Hope this solution works for you! :)

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

Enhancing button images with gradient effects on hover

I'm currently working on adding a color gradient effect to a PNG graphic used as a button. I specifically want the color gradient to appear only when the user hovers over the image, and not just for background images like most solutions seem to provid ...

Box size adjusts to fit its content, including any form fields

Looking to create a box that adjusts its size based on content and center it without resorting to using tables for layout or setting fixed sizes. How can this be achieved while keeping the markup clean? I've almost got it, but the form fields are not ...

Small jumps occur when implementing the scrollTop jquery animation

I've encountered an issue with the scrollTop jquery animation that I can't seem to resolve. It seems to micro-jump right before the animation, especially when there is heavier content. I'm puzzled as to why this is happening... Here's ...

Solve the problem with SCSS at the component level in NextJS

I've decided to transition my regular React app to Next.js. In the past, I would simply import SCSS files using: import from '.componentName.scss' However, now I need to import them using: import style from 'componentName.module.scss ...

Displaying AngularJS content as text in an HTML file

I have been learning from the AngularJS Tutorial on Code School, but I'm experiencing an issue where my JavaScript code is not rendering properly in the HTML. Below is the snippet of HTML code: <html ng-controller="StoreController as store"> & ...

Multiple buttons in a single field

I am attempting to replace a Dropdown list with a series of buttons that will streamline the choices previously displayed by the dropdown list. Specifically, we are using graphic png files for the types of buttons. We experimented with checkboxing and ra ...

Textfield style in Struts2 customization

How can I change the appearance of the textfield? [https://i.sstatic.net/TkQ0i.png] I am trying to remove the background color The code snippet in question: <s:form action ="Update_datos_XML"> <s:hidden id="id" name="id_sesion" value=" ...

scrolling smoothly to a specific div on another webpage

Incorporating a smooth scrolling feature on my website's menu bar has been quite challenging. Specifically, I want the page to redirect to another HTML page and smoothly scroll to a specific div when a sub-item is clicked. To achieve smooth scrolling ...

Error in Typescript: Function not being triggered on button click

As someone who is just starting out with typescript, I've been tackling a simple code that should display an alert message in the browser when a button is clicked. I've experimented with the button and input tags, as well as using both onclick ev ...

The data retrieved from the $.ajax() request in Vue.js is not properly syncing with the table

After setting up an $.ajax() function and ensuring the data binding is correctly configured, I expected the data to append to a table on page load without any issues. However, the data is not appearing as expected. Is there something that I might be overlo ...

Is it possible in Javascript to trace the origins of a particular element's property inheritance for debugging purposes?

I'm currently dealing with an issue where the computed style font-size of a particular element is "16px". I've been attempting to pinpoint where in the CSS or JavaScript this font size setting is coming from, specifically within one of its parent ...

Emphasize the content within the table cell

Currently, I am working with an HTML table that is being generated by Java. My goal is to highlight the text within a table cell without changing the background color of the entire cell. I should mention that I am aware of the option to achieve this by ma ...

A more sophisticated approach to button creation, such as utilizing a single HTML element

Trying to find a sleeker way to create the following HTML button. https://i.sstatic.net/Eanuy.png Currently using an <a href="..."> with 2 child <span> elements like this: - <a href=""> <span class="box_button">Read more</ ...

Retrieve information from a variety of selected checkboxes

Is there a way to retrieve the values of check boxes that are generated dynamically? @ $db = mysql_connect("abc", "abc", ""); mysql_select_db("abc"); $strSQL = "SELECT * FROM student"; ...

Proper alignment of multiple elements with Bootstrap

I am currently incorporating Bootstrap panels into my project, and I have a design mockup that looks like this: https://i.sstatic.net/pHArl.png The Profile text and progress bar need to be aligned to the left, while the collapse icon should be aligned to ...

What is the best way to incorporate the value of a textbox into a list?

I currently have a list structured like this: <p>Please choose from the following options:</p> <script type="text/javascript"></script> <select id='pre-selected-options1' multiple='multiple'> <opt ...

Ensure that the navigation menu is consistently displayed properly, without any of its contents extending beyond the

I am experiencing an issue with the navigation menu on my website. Everything looks great in normal view, but when I resize the browser window to a smaller width, the menu ends up overflowing below the main content. I want the navigation menu to always dis ...

Struggling with the navbar-toggler in Bootstrap 4 Beta 2?

As part of my Bootstrap practice, I have implemented a navbar on my webpage. However, I am facing issues with the nav-bar toggler not working for small screens and the icon navbar-toggler-icon not appearing. Below is my current navbar code: <nav class ...

Dependencies in AngularJS factories

I'm currently using AngularJS to extract data from mongodb. I have been attempting to utilize a factory to retrieve this information through the $http method. Despite researching and trying numerous approaches, none seem to work for me. In addition t ...

Locate a specific element by utilizing xpath

Recently, I encountered a coding issue that has been puzzling me. Here's the html snippet in question: <div class="Main"> <div> <div class="display">First:</div> <div class="price">$0.01</div> ...