The navigation bar is obscuring the header on my website

I am facing an issue with creating a navigation bar that covers up the header text. I tried adjusting the margins to fix this problem but ended up moving the header along with the navigation bar. How can I ensure that the navigation bar remains fixed without covering the header?

body {
  margin: 0;
  padding: 0;
  background: #2E4053;
  color: white;
  font-family: 'Raleway', sans-serif;
}

.welcome {
  height: 100px;
  margin: px; /* ? */
}

.welcome h1 {
  text-align: center;
  font-family: 'Berkshire Swash', cursive;
  color: white;
  padding: 26px;
  margin: 0 25%;
  border-bottom: 2px solid white;
}

.nav {
  height: 60px;
  width: 100%;
  background-color: lawngreen;
  position: fixed;
}

.search {
  float: right;
  margin-top: -52px;
  margin-right: 35px;
}

input {
  height: 20px;
  border-radius: 7px;
}

.nav ul {
  list-style: none;
  text-decoration: none;
}

.nav ul li a {
  text-decoration: none;
}

.nav ul li {
  display: inline-block;
  padding: 0px 20px;
  font-size: 25px;
  color: black;
  margin: 3px 50px;
  font-family: 'Boogaloo', cursive;
}

.nav ul li a:hover {
  text-decoration: line-through;
  color: blue;
  transition: 0.5s;
}

.search a i:hover {
  color: white;
  font-size: 33px;
}
<link href="https://fonts.googleapis.com/css?
family=Berkshire+Swash|Boogaloo|Lobster+Two|Raleway|Amaranth" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet">

<div class="nav">
  <ul>
    <li><a href="#me">About Me</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#gallery">Gallery</a></li>
    <li><a href="#find">Find Us</a></li>
  </ul>
  <div class="search">
    <input type="text" placeholder="Search">
    <a href="https://google.com"><i class="fa fa-search" style="font-
    size:30px;"></i></a>
  </div>
</div>

<div class="welcome">
  <h1>Welcome to My Travel Blog</h1>
</div>

htmlcss

Answer №1

What's going on?

When you apply position: fixed to an element, you are essentially removing it from the normal flow of the document.

To better understand this concept, think of a bowl of cereal. If you scoop out some fruit loops with a spoon, the space where those fruit loops were originally located is now taken up by the surrounding fruit loops, making it seem like they were never there in the first place. However, they still exist; they are just positioned above.

How to fix it

You need to compensate for the space the fixed element no longer occupies within the DOM (document object model).

This can usually be achieved by adjusting the height of the fixed element using either the margin or padding properties - whichever is more suitable.
In your situation, either property will suffice. The reason why applying margin did not produce the desired outcome previously was because there was no top property set on your fixed element (.nav), for example:

.nav {
  height: 60px;
  width: 100%;
  background-color: lawngreen;
  position: fixed;
  top: 0; /* for reference */
}

Subsequently, you can specify the appropriate margin property on the relevant element (in this case .welcome), like so:

.welcome {
  height: 100px;
  margin-top: 60px;
}

Code Example:

body {
  margin: 0;
  padding: 0;
  background: #2E4053;
  color: white;
  font-family: 'Raleway', sans-serif;
}

.welcome {
  height: 100px;
  margin-top: 60px;
}

.welcome h1 {
  text-align: center;
  font-family: 'Berkshire Swash', cursive;
  color: white;
  padding: 26px;
  margin: 0px 25%;
  border-bottom: 2px solid white;
}

.nav {
  height: 60px;
  width: 100%;
  background-color: lawngreen;
  position: fixed;
  top: 0; /* for reference */
}

.search {
  float: right;
  margin-top: -52px;
  margin-right: 35px;
}

input {
  height: 20px;
  border-radius: 7px;
}

.nav ul {
  list-style: none;
  text-decoration: none;
}

.nav ul li a {
  text-decoration: none;
}

.nav ul li {
  display: inline-block;
  padding: 0px 20px;
  font-size: 25px;
  color: black;
  margin: 3px 50px;
  font-family: 'Boogaloo', cursive;
}

.nav ul li a:hover {
  text-decoration: line-through;
  color: blue;
  transition: 0.5s;
}

.search a i:hover {
  color: white;
  font-size: 33px;
}
<head>
  <meta charset="UTF-8">
  <title>My Travel Blog</title>
  <link rel="stylesheet" href="home.css">
  <link href="https://fonts.googleapis.com/css?
    family=Berkshire+Swash|Boogaloo|Lobster+Two|Raleway|Amaranth" rel="stylesheet">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
    awesome.min.css" rel="stylesheet">
</head>

<body>
  <div class="nav">
    <ul>
      <li><a href="#me">About Me</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#gallery">Gallery</a></li>
      <li><a href="#find">Find Us</a></li>
    </ul>
    <div class="search">
      <input type="text" placeholder="Search">

      <a href="https://google.com"><i class="fa fa-search" style="font-
        size:30px;"></i></a>
    </div>
  </div>
  <div class="welcome">
    <h1>Welcome to My Travel Blog</h1>
  </div>
</body>

Answer №2

Don't forget to include the margin property in the welcome class. Additionally, make sure to add top:0 for the fixed position of the .nav element.

See below for the corrected solution:

body {
margin: 0;
padding: 0;
background: #2E4053;
color: white;
font-family: 'Raleway', sans-serif;
}

.welcome {
height: 100px;
margin: 70px 0 0 0;
}

.welcome h1 {
text-align: center;
font-family: 'Berkshire Swash', cursive;
color: white;
padding: 26px;
margin: 0px 25%;
border-bottom: 2px solid white;
}

.nav {
height: 60px;
width: 100%;
background-color: lawngreen;
position: fixed;
top: 0;
}

.search {
float: right;
margin-top: -52px;
margin-right: 35px;
}

input {
height: 20px;
border-radius: 7px;
}

.nav ul {
list-style: none;
text-decoration: none;
}

.nav ul li a {
text-decoration: none;
}

.nav ul li {
display: inline-block;
padding: 0px 20px;
font-size: 25px;
color: black;
margin: 3px 50px;
font-family: 'Boogaloo', cursive;
}

.nav ul li a:hover {
text-decoration: line-through;
color: blue;
transition: 0.5s;
}

.search a i:hover {
color: white;
font-size: 33px;
}
<head>
  <meta charset="UTF-8">
  <title>My Travel Blog</title>
  <link rel="stylesheet" href="home.css">
  <link href="https://fonts.googleapis.com/css?
family=Berkshire+Swash|Boogaloo|Lobster+Two|Raleway|Amaranth" rel="stylesheet">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet">
</head>

<body>
  <div class="nav">
    <ul>
      <li><a href="#me">About Me</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#gallery">Gallery</a></li>
      <li><a href="#find">Find Us</a></li>
    </ul>
    <div class="search">
      <input type="text" placeholder="Search">

      <a href="https://google.com"><i class="fa fa-search" style="font-
    size:30px;"></i></a>
    </div>
  </div>
  <div class="welcome">
    <h1>Welcome to My Travel Blog</h1>
  </div>
</body>

Answer №3

body {
  margin: 0;
  padding: 0;
  background: #2E4053;
  color: white;
  font-family: 'Raleway', sans-serif;
}

.nav {
  height: 60px;
  width: 100%;
  background-color: lawngreen;
  position: fixed;
}

.search {
  float: right;
  margin-top: -52px;
  margin-right: 35px;
}

input {
  height: 20px;
  border-radius: 7px;
}

.nav ul {
  list-style: none;
  text-decoration: none;
}

.nav ul li a {
  text-decoration: none;
}

.nav ul li {
  display: inline-block;
  padding: 0px 20px;
  font-size: 25px;
  color: black;
  margin: 3px 50px;
  font-family: 'Boogaloo', cursive;
}

.nav ul li a:hover {
  text-decoration: line-through;
  color: blue;
  transition: 0.5s;
}

.search a i:hover {
  color: white;
  font-size: 33px;
}

.welcome {
  height: 100px;
  position:relative;
  top: 7%;
}

.welcome h1 {
  text-align: center;
  font-family: 'Berkshire Swash', cursive;
  color: white;
  padding: 26px;
  margin: 0px 25%;
  border-bottom: 2px solid white;
}
<div class="nav">
    <ul>
        <li><a href="#me">About Me</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#gallery">Gallery</a></li>
        <li><a href="#find">Find Us</a></li>
    </ul>
    <div class="search">
        <input type="text" placeholder="Search">

        <a href="https://google.com"><i class="fa fa-search" style="font-
    size:30px;"></i></a>
    </div>
    </div>
    <div class="welcome">
      <h1>Welcome to My Travel Blog</h1>
    </div>

Added position:relative; top: 7%; to .welcome div.

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

Incorporating additional information into the database

When I run the code, I see a table and a button. After entering data in the prompts as instructed, the table does not get updated. I'm unsure why this is happening. Can someone please explain? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...

javascripthtmlhtml-table

Mastering the Art of Content Swapping in SPA

Hey there! I'm in the process of creating a webpage using tornado io and incorporating various graphs. To add some single page app magic, I decided to swap out content within a div like so: <div id="chartType"> Chart goes here</div> <a ...

javascriptjqueryhtml

How can I achieve transparency for an element while it is nested within multiple parent

Is there a clever method to achieve transparency for an element that allows the background of its parent element to shine through and display the body background, for example? Consider this scenario: <body style="background: url(space.jpg)"> <di ...

csshtmlbackgroundtransparentmask

Align bootstrap button to the center on xs screens

I've spent countless hours on this issue - I just can't seem to get the button centered properly in xs mode. It keeps aligning itself based on the left side, no matter what I try. I've searched through Bootstrap but couldn't find a clea ...

htmlcsstwitter-bootstrap

Issues with the Diagonal HTML Map functionality

I'm seeking assistance to implement a unique Google Maps Map on my webpage. I have a particular vision in mind - a diagonal map (as pictured below). My initial approach was to create a div, skew it with CSS, place the map inside, and then skew the ma ...

javascripthtmlcss

Looking to display the view source of an HTML page, but it keeps redirecting to another site when I try. Anyone know how to diagnose and fix this issue?

Can anyone assist me in displaying the HTML source of a page without it redirecting to another site? Here is the URL: ...

html

What is the best method for properly inserting images into a Vue Carousel 3D slider?

I'm currently exploring the Vue Carousel 3D documentation and I am having trouble displaying a single image on each slide. Let me elaborate: I aim to create a slider similar to the one shown in the Controls Customized example in the documentation. Th ...

javascripthtmlcssvue.js

Arrange images in a fluid manner around other images

Check out the website I'm currently working on: metroweb.tk I'm in the process of designing a website that mimics the Windows 8 metro UI. However, I've encountered an issue with larger app icons such as notes and clocks sticking out. Is the ...

javascriptjqueryhtmlcssmicrosoft-metro

How can I send the input from a textbox to an email?

I'm looking to create a basic sign-up form where individuals can enter their email and submit it. The goal is to have this information sent via email to the site owner. I initially thought the code below would do the trick, but it doesn't seem t ...

phphtml

Tips for resolving conflicts between CSS files

My index.html file contains multiple css and js files, including MaterializeCSS and a style.css file. However, when both are included simultaneously, using elements from Materialize such as tabs results in them not appearing correctly. Despite initializing ...

htmlcssmaterialize

Solution to ensure fixed header with correct z-index placement

Everything is functioning correctly, except for the issue that arises when scrolling down to view thumbnails. The left bar covers the thumbnail section, making it impossible to select items. I suspect that the z-index of a div is causing this problem. I ha ...

cssz-index

Opening a Text File via an ASPX Web Page

Currently, I am immersed in a Web Pages project. The goal is to retrieve text from a Text File and display it within a div element. To achieve this, I utilized the ajax xmlhttprequest method, following a tutorial available at http://www.w3schools.com/ajax/ ...

javascriptjqueryhtmlasp.netajax

"After clicking the button for the second time, the jQuery on-click function begins functioning properly

(Snippet: http://jsfiddle.net/qdP3j/) Looking at this HTML structure: <div id="addContactList"></div> There's an AJAX call that updates its content like so: <div id="<%= data[i].id %>"> <img src="<%= picture %&g ...

javascriptjqueryhtml

Enhancing Canvas with a JPEG layer using the Caman library

I'm currently working with the Caman library to manipulate an image. My goal is to overlay a jpeg onto the manipulated image, but I'm facing a challenge. Although I can briefly see the jpeg beneath the manipulated image, it quickly gets overlai ...

htmlcanvashtml5-canvascamanjs

Switch out the arrow icon in the dropdown menu with an SVG graphic

Looking for a way to customize the dropdown caret in a semantic-ui-react component? Here's how it currently appears: https://i.sstatic.net/GpvfC.png <Dropdown className="hello-dropdown" placeholder="Comapany" onChange={th ...

javascripthtmlcssreactjssvg

I'm having trouble displaying the Facebook page plugin on my HTML website

I encountered a minor issue. I attempted to add the "Facebook page plugin" on a test website. I copied the code from the official Facebook plugin page: <!-- 1. Include the JavaScript SDK on your page once, ideally right after the opening <body> t ...

htmlfacebookplugins

Running the NPM build command results in an error specifically related to an HTML file

I encountered an issue in my AngularJS application when running the command: npm run build -- -prod The error message I received was: ERROR in ng:///home/directoryling/appname-play.component.html (173,41): The left-hand side of an arithmetic operation ...

htmlangulartypescriptnpm

Gain command over the underline style of text without relying on the border property

Ingredients: just a simple text input field. Question: Is there a way to customize the size, color, and position of the underline styling on an input tag? I noticed that the property text-decoration-color is supported in the moz browser engine, but I&apos ...

htmlcss

Displaying and hiding a div element using Vue.js dynamically

I have a scenario with two different sized divs: <div class = "bigger"> </div> <div class = "smaller"> </div> The goal is to hide the bigger div and show the smaller div when the screen width is ...

javascripthtmlvue.js

What is the best method for flipping the sequence of elements in media queries?

I am facing an issue with two divs, left and right, on my webpage. When the screen size is less than 500px, I want the left div to move to the bottom and the right div to move to the top. Essentially, I need to swap the positions of these divs in the DOM. ...

htmlcssflexbox