I try to see when I click navbar then I want to see the topic, but it is showing the topic under navbar. I try to give margin, but it doesn't work. Is someone help me with how can I solve this problem.
there is code: https://codepen.io/rero34/pen/mdqGyVo
CodePudding user response：
So you are using Bootstrap which is great. But my first impression was you have too many manual styles going on, especially for using a CSS framework. Without over-explaining it, the main reason your anchors aren't starting at the top of the section is because your id's are starting at the span, which is not the start of the section. You should put the id's on the sections themselves.
Then, the next issue comes from the use of padding on your sections and excessive margins on headings. Without going through and cleaning all of those up, let's look at ways around it.
scroll-margin is used to adjust an element’s snap area (the box that defines where the element will be snapped to).
I added some scroll-margin-top on each section. I found that roughly 5.5em is the sweet spot in your case.
Your code has too many characters for a stack snippet, so take a look in the CodePen.
CodePudding user response：
I think it is a natural z-index side-effect of using a fixed navbar. See if it makes a difference to add margin-top to the element immediately following the navbar. That seems to be div id="myCarousel". The margin you add should be the same 'px' tall as your navbar.
CodePudding user response：
Because there is set the margin-top: 0; in the _robot.css file. for the 3rd-level header tag.
You can overcome this default settings with your custom style of the H3 tag to set the appropriate margin-top: 100px !important;. Customize it to your needs, I take the 100px as random value.
h3{
font-weight: 700;
margin-bottom: 50px;
margin-top: 100px !important;
}
Edit
I found you have the margin-top for h3 defined several times. There might be the conflict which cause it. Next occurenc in your style is later in
.services h3{
margin-top: 80px;
}