I am trying to fix the alpa-nav to the top of the screen when anchor link is clicked the nav always stays visible but the rest of the page is scrolled down to the target. I have been trying to reference solutions but I cannot make them work properly. Advice?
Also the wrapping of the alpha-nav is overlapping please increase your browser window
You have top: 100 applied to the nav which has no units defined, but gets interpreted as 100px, that brings it a bit low, top: 0 seems better.
Then you should have a top margin for the main container to clear it.
I would also remove width: 100% to revert to auto which is the default width value of a div and adjusts to full width better.
Anyone with a screen less than 1100px does not have that option.
Increase the line height to let wrapped items clear those on the top line.
It will again start to overlap the main content when wrapping, you could add a media query to increase the top margin, or try position: sticky for browsers that support it.
Thank you for the tips. It works better. Do you know how I can keep the content from going under when scrolling versus just cutting off under the nav bar?
Not sure what you meant but if you mean you want the content that you just linked to to stop before it is obscured by the top links then you could use this method.
a[name] {
position:absolute;
z-index:-1;
left:0;
margin-top:-100px;
}
You should probably class that element if you have other a name elements around (Note that in html5 name attributes are deprecated. Just use ids on existing elements instead. except in the trick above you will need separate elements <div id="highlight-a"></div>).
You will also need to use media queries to decide when to wrap those links to a new line and then at the same time increase the negative margin to compensate for the increased height. (Probably better to use ems for the negative margin anyway to compensate for text resize).
It may also be an idea to make the text under the links slightly opaque as they look annoying.
e.g.
.alpha-nav{
background:rgba(255,255,255,0.8);
}
(although you will probably need to apply that code to a full width wrapper instead as your nav doesn’t go to the boundaries.)
For firefox and Chrome you could add the scroll-behaviour propertyso that the page
scrolls smoothly to the link because otherwise it just jumps and frightens most users 
html{ scroll-behavior: smooth;}
This old codepen shows the basic concept.
Thank you. I will experiment more. I appreciate your insights as always
This statement does not make sense. Can you elaborate or restate your request using different words?
@ronpat My wording was not proper. I meant what @PaulOB tired to outline. I will have to get it working with my code. Basically, I am trying to get a fixed header where the content scrolls behind the fixed header. In my case, it would be H1 Heading then the sub-navigation. Specifically, am trying to get both the H1 heading and sub-navigation to be fixed while the content is scrolled behind. Thanks.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.