Creating a Burger Navigation Menu with CSS and HTML using Image Overlapping

I'm encountering an issue with the new website I created for my local Church. I followed a tutorial on building a burger menu using just HTML and CSS, which you can view here.

The problem arises when I attempt to place an image below the navigation menus in the body of the webpage. When I resize the web resolution and click on the burger menu, it ends up being positioned under the image.

I would greatly appreciate any assistance with this issue as I've searched everywhere for a solution without luck. Being new to coding, your time and support mean a lot to me. Thank you for helping out!

 **HTML**

<!--DOCTYPE html-->
<html>
<head>
<title>Church of Christ</title>
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>The Church of Christ</h1>
<div class="nav">
    <label for="toggle">☰</label>
    <input type="checkbox" id="toggle"/>
    <div class="menu">
        <a href="#">Home</a>
        <a href="#">Contact</a>
        <a href="#">About</a>
        <a href="#"><span>Members</span></a>
    </div>
</div>
  <h2>location</h2>
     <img src="IMG_2597.jpg" alt="Church of Christ">
</body>
</html>

**CSS**

html, body {
width: 100%;
height: 100%;
margin: 0;
}
html {
font-family: "helvetica neue", "sans sherif";
}

.nav {
border-bottom: 1px solid gold;
text-align: right;
height: 70px;
line-height: 70px;
}

.menu {
margin: 0 30px 0 0;
}

.menu a {
text-decoration: none;
color: rgb(255, 255, 255);
margin: 0 10px;
line-height: 70px;
clear: right;
}

span {
color: gold;
}

label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: right;
color: gold;
}

#toggle {
display: none;
}

@media only screen and (max-width: 500px) {
label {
    display: block;
    cursor: pointer;
}
.menu {
    text-align: center;
    width: 100%;
    display: none;   
}
.menu a {
    display: block;
    border-bottom: 1px solid gold;
    margin: 0;
}
#toggle:checked + .menu {
    display: block;
}
}

h1 {
text-align: center;
font-size: 50px;
margin: 10px 0px -10px 0px;
color: gold;
}

a {
font-size: 25px;
}

h2 {
text-align: center;
font-size: 45px;
color: rgb(255, 255, 255);
}

img {
width: 100%;
height: auto;
}

body {
background-color: rgb(0, 0, 0);
}

Answer №1

To fix the issue, simply delete the CSS clear:right and insert float:right

    .menu {
      margin: 0 30px 0 0;
      float: right;
    }
    .menu a {
      text-decoration: none;
      color: white;
      margin: 0 10px;
      line-height: 70px;
    }

Answer №2

An element with position: relative; is positioned in relation to its default position.

Adjusting the top, right, bottom, and left properties of a relatively-positioned element will move it away from its default position without affecting other content layout.

html {
    font-family: "helvetica neue", "sans sherif";
    }
    
    .nav {
    border-bottom: 1px solid gold;
    text-align: right;
    height: 70px;
    line-height: 70px;
    /* this line changed */
    position: relative;
    }
    
    .menu {
    margin: 0 30px 0 0;
    }
     /* I suggest that the 'a' tag have a background-color to prevent dropdown menu covering image */
    .menu a {
    text-decoration: none;
    color: rgb(255, 255, 255);
    margin: 0 10px;
    line-height: 70px;
    clear: right;
    /* background-color: blue; */
    }
    
    span {
    color: gold;
    }
    
    label {
    margin: 0 40px 0 0;
    font-size: 26px;
    line-height: 70px;
    display: none;
    width: 26px;
    float: right;
    color: gold;
    }
    
    #toggle {
    display: none;
    }
    
    @media only screen and (max-width: 500px) {
   
    label {
        display: block;
        cursor: pointer;
    }
    .menu {
        text-align: center;
        width: 100%;
        display: none;   
    }
    .menu a {
        display: block;
        border-bottom: 1px solid gold;
        margin: 0;
    }
    #toggle:checked + .menu {
        display: block;
    }
    }
    
    h1 {
    text-align: center;
    font-size: 50px;
    margin: 10px 0px -10px 0px;
    color: gold;
    }
    
     a {
    font-size: 25px;
    }
    
    h2 {
    text-align: center;
    font-size: 45px;
    color: rgb(255, 255, 255);
    }
    
    img {
    width: 100%;
    height: auto;
    }
    
    body {
    background-color: rgb(0, 0, 0);
    }

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

Is it possible to select an input field while using jQuery animate?

This query arises indirectly from a previous question regarding an animation script for a form. The script in question is a basic jQuery function that expands the width of an input field when it is focused on and reverts to its original width when unfocus ...

When the parent element has a fixed position, the child element will no longer maintain its floating property

I'm currently working on a fixed navigation panel that sticks in place while scrolling down. Here is the code I have so far: <header> <a class="logo" href="/">Logo_name</a> <nav> <a href="#">Menu_1</a& ...

Manipulating the DOM by linking to a div and using JSON information for opening and closing

I have retrieved data from a JSON file and displayed it as a link. I am looking to implement functionality that allows me to hide and show a div when the link is clicked. Below is the code I'm currently using: $(document).ready(function() { $ ...

What might be causing my animation to not run as expected?

I recently tried to create a bouncing arrow following a tutorial, but the code I used is almost identical with minor differences. However, when I try to incorporate it into my hero unit, the animation does not work as expected. The issue could be related ...

Elements vanish when SHAKE effect is in use

I've been experimenting with this framework and I'm struggling to get the shaking effect to work properly. Whenever I hover over an element, other divs seem to disappear. I tried using different versions of JQuery and JQuery UI on JSFiddle, and i ...

Menu collapse and expand feature similar to that of Gmail

I am attempting to replicate the menu-collapse style found in the new Gmail interface. When a menu exceeds a certain height, I want it to collapse to a predetermined height. Upon hovering over the exposed menu area, I want the menu to expand back to its or ...

Convert HTML form input into a JSON file for safekeeping

<div class="email"> <section class="subscribe"> <div class="subscribe-pitch"> </div> <form action="#" method="post" class="subscribe-form" id="emails_form"> <input type="email" class="subscribe-input" placeholder="Enter ema ...

Combining strings with JQuery

Looking for help with a code snippet <script> function goToDetails($i){ $(function(){ var transValue = $('#trans'+$i).html(); var mileageValue = $('#mileage'+$i).html(); var engineValue = $('#eng'+$i).html ...

Ways to conceal overflow at the base of a container while enabling the image to break free from the top of the container

Trying to create a visual effect where an image of a person appears to be partially hidden inside a container, with the bottom part concealed by overflow: hidden. However, I want the top part of the image to extend out of the container. Is there a way to a ...

A static iframe or an alternative solution that is not interactive

I specialize in creating websites for my clients. When they log in, they are presented with 5 different design ideas for their site - each showcasing a unique layout and color scheme. Currently, I manually upload 5 screenshots of the designs created by me ...

The CSS class is specifically assigned to a single element

After every two seconds, my JavaScript function is triggered and based on certain logic, I aim to add a CSS class with an effect to an HTML element on the page. var counter = 0; $interval(function () { counter++; ...

Troubleshooting: HTML drop-down menu experiencing malfunctions

As a newcomer to the realm of HTML, I am eager to kickstart my online portfolio. After successfully setting up the navigation bar, I have now turned my focus towards creating a dropdown menu within the nav bar. Unfortunately, I've hit a roadblock as t ...

Display the spinner until the data is successfully updated in the DOM using Angular

Dealing with a large dataset displayed in a table (5000 rows), I am attempting to filter the data using column filters. When applying the filter, I have included a spinner to indicate that the filtering operation is in progress. However, due to the quick ...

The most sophisticated method for creating a 2x2 grid of divs

I have developed a quiz application similar to Buzzfeed with four answer options for each question. The layout on mobile devices is satisfactory, displayed in a 2x2 grid. However, when viewing the app on desktop screens, the answers appear horizontally in ...

During DragAndDropToObject in Selenium IDE, the initial element in the list is overlooked

I have a webpage that is split into two datagrids. The left datagrid is structured like this: <ul class="left_dg"> <li> <ul></ul> </li> <li> <ul></ul> </li> <li&g ...

Add the information from the form to a JSON document

I am trying to add form data to a json file using the code below. However, I keep getting an error response whenever I submit the data via post. Can you help me identify where the issue lies? HTML <form class="ajax form-inline"> <div class="form ...

What is the optimal HTML tag for showcasing chat text conversations?

To create a text window with fixed width and length that automatically wraps long texts without a horizontal scroll bar but with a vertical one, you can use HTML and CSS. The preview window on SO's ask question page is a good example of this. It is si ...

Is it possible to use jQuery to identify when an item is located on a new line within a textarea?

I am looking to create an array from the content within a textarea. The textarea holds a varying list of names, each consisting of only one word without any spaces. Currently, I have the following code in place. However, my issue lies in the fact that the ...

Having trouble with Github pages' responsiveness on certain devices

The responsive view in the browser appears to be working correctly. Everything is functioning fine. However, when I switch to my Android phone, the alignment is off. I've tested it on multiple devices and the results are consistent. What could be cau ...

Resizing a floated div causes the image to break out

My webpage has a container div with two floated left divs inside, positioned side by side. The right div contains a YouTube video and an image. However, when I resize the page, the video and picture flow out of the containing floated div instead of dropp ...