Content floating into the header - not wanted

I would like the h1 and p to be on a white background (and it is when in large screen) but when i shrink to small screen it gets tucked into the header. It has something to do with the transition from horizontal nav to the hamburger toggle push nav. iv tried to wrap the content in its own div and give it a background color but it doesnt work. giving the body a background colour doesnt work either.

shelby, if you were ill, you wouldn’t send the doctor a photo and expect him/her to tell you what is wrong with you, woruld you?

Likewise, we need a link to your site or a working page that demonstrates the problem so we can see the code to troubleshoot the problem.



If you have not read our posting guidelines, please take a few minutes and give them a look.

Forum Posting Basics

Thanks again.

my bad, i just havent pushed it to the live site because im still working on it. im using java script so iv got it open in my terminal to preview

No prob, shelby. When it is in a form that we can troubleshoot, we’ll be glad to help.

If you’re just trying to get HTML/CSS/JavaScript to work properly there are websites such as Codepen and JSFiddle that will do the trick for testing purposes.

how should i put it in a form for you to read it?

thank you. the javascript is running smoothly i was just mentioning i was using it because i could not send a link to my site because I have not pushed it to the live site and im building it in preview with my terminal open

You could create a test site in the same place as the live site but with a different name.

Depending on the size of your site, you could make a copy of the essentials and pare down the HTML, etc., so it demonstrates the issue. Zip that bundle and post it in a message. That way we can see what you see as well as the code that 's causing the issue. Remember that relative paths are useless unless your folder maintains your site’s structure.

You could create a CodePen demo.

It’s usually easiest if you have a test site or have the knowledge and time to create simplified working page. By working page, I mean it starts with and ends with and contains the code needed to demonstrate the issue and little else.

I doubt the problem is difficult to solve unless JavaScript is involved, then someone other than me will have to help.

Do any of these possibilities sound practical?

yeah, im either not sure what your talking about or its just not working. i tried to create a test site and it was broken. thanks anyways, im just going to ask around and try to fix it myself…

I don’t know how you are managing the site, but would it cause any problems if you published the real site briefly for testing purposes? “briefly” meaning an estimated hour or less while we look at the problem?

The forum sometimes won’t accept exceptionally long posts, but as described in the page linked to in post # 2 putting three backticks on their own lines before and after the code should work. eg.
code here

<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style type="text/css">
// script needed before the DOM is loaded here
// script that needs the DOM to be loaded here

i dont want to publish it because im working in a group, and id have to merge my branch into the main repository and I can’t do that because im not finished and dont want to deal with merging errors from what other people have been working on until we are done our own pages

Ah, OK.

Well, consider the “working page” approach. If you can put together just the HTML and CSS that demonstrates the problem in a single file (or two) and post it in a message, we can copy your code to a file and replicate the issue on our computers. It sounds like you will especially need to include the media queries at which the problem occurs.

Just make sure the code demonstrates the problem for you before posting the code for us.

but id need to include the javascript because the content gets messed up when the navigation (using jscript) pushes off the page into a toggle menu. the javacsript isnt broke, but the issue only occurs when its triggered

JavaScript (or jQuery) will run on anyone’s PC. Coincidence doesn’t mean that the problem is being caused by the JS. It could still be a CSS issue. If it turns out to be JS, then we move the post to the JS category.


Reading again, I see that you said “jscript” which is Microsoft’s version of JavaScript so it may not be compatible with other browsers, but that’s out of my element.

So are you using JavaScript or jScript? They are two different languages.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.