When I apply a position: fixed; attribute to my navigation, the following elements overlap it. The following image shows what happens - I am hovering over my div class=“pageMain” element so you can see where it is positioned. I expect the div class=“pageMain” element to be displayed below the navigation - view second image to see what the expected result is.
The image below is how I expect my work to look. However, this is only displayed in this way when the position: fixed; attribute is removed from my navigation.
When you use position:fixed you are removing the element from the flow of the document just like absolute positioning. That means that any other elements on the page will ignore that element as far as layout is concerned. This is why your main content is now covered by the fixed element.
When you use fixed (or indeed absolute) elements ‘you’ must ensure that other elements on the page avoid these elements if overlaps occur.
For a fixed navigation menu at the top of the page that would mean ensuring that the first item on the page starts a certain distance down the page so that it avoids the fixed header. This can be done with a padding top (preferably in ems) on the main page content. Or applying a padding-top to the body element to create space for the fixed element. (There is no automatic way to do this other than scripting.)
The problem with fixed headers (and fixed elements in general) is that you end up resorting to ‘magic numbers’ to cater for the header size and of course run into problems if the header wraps and the header size increases.
Therefore fixed elements are best suited to small amounts of content that are unlikely to wrap.
These days people tend to use sticky headers where the header only becomes fixed after the page has scrolled. This avoids the initial problem with overlaps but does require scripting.
Here’s my basic version but there are better ones if you google.
Thank you for responding. I’ll definitely look into sticky headers and consider implementing one of these instead of a position: fixed; navigation. After playing around with the code, I surrounded the navigation list with a div class=“navMenu” and simply applied a fixed height for it. This fixed my problem and all elements are now in place.
I have uploaded the navigation menu to CodePen and simply added a few buttons to the page.
It will do the same job as your fixed height extra div.
It’s not that important and your method is fine but usually you want to avoid adding extra elements when there’s no real need.
Also your height:1000px on .mainPage is a big error and you shouldn’t fix the heights of elements that hold fluid content. I realise you may have just done this for the demo but don’t let it creep into production. Generally you let content dictate the height so that the element can grow or shrink as required by its content.
If you wanted a minimum height then use min-height as that will allow the element to grow but I would still look suspiciously at pages that enforce me to have a 1000px min height when not needed.
