How to Fix Header in Harlowe

Question

So, I have a header and want it to be black with white text (got that). The problem is that when I scroll, The words go over the header. I am using a basic header code:

header {
position: fixed;
background-color: black;
color: white
}

What must I fix so that the words don't go over the hea

Answer 1

Please use the Question Tags to state the name and full version number of Story Format you are using, as answers can vary based on this information. I will assume you are using Harlowe v2.1.0

> The words go over the header..

Based on the CSS example you suppled I will assume that when you say 'header' you mean a HTML <header> element, and not a Harlowe header tagged special passage.

The position: fixed setting in your CSS causes the <header> element to be removed from the standard layout of the page's HTML element, which results in the <header> element being shown at a higher z-index than the rest of the content of the current passage. This is why scrolling the content of the passage causes it to move underneath the content of the <header> element.

You can do a couple of things you can add you your CSS to reduce this visual effect:

1. Add a width: 100%; property which will cause the area representing the <header> to always cover the whole width of the passage it appears above.

2. Add a top: 0; property which will move the <header> element's area to the top of the web-browser's view-port.

3. Add a padding-bottom: 1em; property which will add a small horizontal blank section to the bottom of the area representing the <header> element.

Comments

Hi! Thanks! It worked!

 

How would I make sure my <i> elements dont do the same?