Navigating with a Stuck Navigation Bar Using BootstrapretaF

My website has a sticky navbar with a dropdown menu that allows users to jump to different sections of the page. However, I've noticed that when I navigate to a new section, the navbar covers part of the content at the top. After inspecting the navbar element, I found that it has a height of 58 pixels including padding. How can I adjust the jump offset by 58 pixels so that the section is aligned perfectly with the sticky navbar and doesn't block any important content?

As shown below on my website:

https://i.sstatic.net/2oF1L.png

When I click on "Education," it cuts off the header text and isn't flush with my navbar.

https://i.sstatic.net/1sh3H.png

htmlcssbootstrap-4

Answer №1

The :before pseudo class is a useful tool for adding a hidden space before a section.

Code Snippet

body {
  margin: 0;
}

ul.menu {
  background: #000;
  margin: 0;
  position: sticky;
  top: 0;
}

section[id]:before {
  display: block;
  height: 38px;   /* equal to the header height */
  margin-top: -38px;  /* negative margin equal to the header height */
  visibility: hidden;
  content: "";
}

ul.menu li {
  list-style: none;
  display: inline-block;
}

ul.menu li a {
  color: #fff;
  padding: 10px;
  display: block;
  margin-right: 20px;
}

section {
  height: 500px;
}
<ul class="menu">
  <li><a href="#link1">Link1</a></li>
  <li><a href="#link2">Link2</a></li>
</ul>
<section id="link1">Link1</section>
<section id="link2">Link2</section>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues arise when using Bootstrap-select with multiple options

Currently, I am in the process of developing a web application using Angular 6. In order to implement a customizable combo-box, I integrated the bootstrap-select library developed by Silvio Mureto into my project. However, I have encountered an issue with ...

htmltwitter-bootstrap-3angular6bootstrap-select

How can I retrieve the input value on the current page using PHP?

Hey there, so I'm pretty new to PHP and I have a question. Is it possible to retrieve the input value from an existing input field on a page using PHP when the page loads, and then assign that value to a variable? For instance, let's say I have ...

javascriptphpjqueryhtml

"The combination of Windows, @font-face, and Cyrillic characters presents a

I am encountering an issue with font-face and Cyrillic characters. The fonts display properly in any browser on OS X, but fail to render on a Windows 7 machine (chrome, ie etc). Even after putting the fonts through Font Squirrel and testing the demo files ...

htmlcsswindowsfont-facewebfonts

Executing a JavaScript function to submit an HTML form and circumvent the default behavior

Currently, I am utilizing a virtual keyboard that was created using JavaScript for the user interface on an embedded system. If you would like to access the source code for this virtual keyboard, you can find it here: https://codepen.io/dcode-software/pen ...

javascripthtmlformsdomevents

Creating visually appealing tables in React.js

Having trouble with table rendering in React. The buttons in the table cell are not styled properly and do not center within their div. Additionally, the table border is cut off where there are buttons or empty headers. Need help figuring out what's g ...

javascriptcsswebreactjsstyling

Tips for preserving CSS styling following a hover event

While working on implementing a Menu control using jQuery and CSS, I encountered the following issue: Here is a live demo that demonstrates my current problem When I hover over 'Menu Item 1', this item successfully changes its style (background ...

jquerycss

javascript create smooth transitions when navigating between different pages

As a newcomer to JS, I am currently working on creating a website with an introduction animation. My goal is to have this animation displayed on a separate page and once it reaches the end, automatically redirect to the next webpage. <body onload="setT ...

javascriptjqueryhtmlcss

Creating CSS-style overlayed images that are resizable

I have a collection of images all the same size, and I want them to be overlaid on top of each other. I've tried setting the position of the images to absolute, but this causes an issue with the container not adjusting its size accordingly. Additiona ...

htmlcss

Adjust the background color of a non-selected Material-UI checkbox

Currently, I am working with a combination of React-Redux and Material-UI to style my project. Within this setup, I have a checkbox component that is placed on a toolbar with a blue background color (#295ED9). So far, I have successfully altered the color ...

cssreactjscheckboxreact-reduxmaterial-ui

Activate hover effect on desktop screen (excluding tablets and phones) by utilizing media queries

Applying hover state styling to a div can be done like this: div { &:hover { color: red !important; border: 3px solid red !important; } } To exclude iPads and other tablets from this CSS style, you can util ...

htmlcssipadlessmedia-queries

The image begins rotating only after the second click has been made

Having trouble with jQuery and rotation effects on an image? I have a solution for you. The image should rotate while toggling at the same time, but there's a twist - on the first click, it won't rotate but will still toggle. From the second clic ...

javascriptjqueryhtmlrotation

How to disable a select list in HTML using vue.js when it is checked

I need assistance with a form that includes an "age" field. There are two possible scenarios: if the "unknown" box is checked, then the user should not be able to enter/select an age (the option should be disabled). If the box is unchecked, then the user s ...

htmlvue.js

What measures can be taken to guarantee that a user is only able to delete designated records?

When it comes to writing SQL commands directly, it's simple to specify which records to delete using identifiers like ID. However, when dealing with webpages that contain a list of links pointing to different records (with the ID embedded as a query ...

javascriptjqueryhtmlnode.jspostgresql

Exploring the asynchronous for loop functionality in the express.js framework

I'm attempting to use a for loop to display all images. I have stored the paths of the images in an array called Cubeimage. However, when trying to display them using <img>, I encountered an error. How can I write asynchronous code to make it wo ...

javascripthtmlexpressweb

"When using FireFox, you can easily create a hyperlink that scrolls to a specific section of a webpage,

I have created a style for image button: .sticky { position: fixed; top: 50px; width: 120%; z-index: 1; } @media screen and (min-device-width : 100px) and (max-width: 600px) { .sticky{ display:none; } } and also implemented a script for it: ...

javascriptcssfirefox

Drop-down menu in a table cell overflowing with lengthy text, causing the table to collapse

I'm facing an issue with my table where I have inputs and selects inside <td>. The problem arises when the text in the options of the <select> element is too long, causing the <td> to expand and disrupt the overall layout of the tabl ...

htmlangularjscsssass

Dynamically updating the ng-class name in AngularJS

Exploring the integration of animate.css with AngularJS. Attempting to assign a class to an element on ng-click, but facing difficulties in updating the element. Various strategies were attempted, including modifying scope values through functions, without ...

htmlcssangularjsanimate.css

Dompdf is outputting the HTML Bootstrap code as col-sm-x instead of col-lg-x

Currently, I am utilizing Dompdf in my PHP project to generate PDF reports. However, I have encountered an issue where the HTML bootstrap code does not render as expected on the PDF document. Specifically, when viewing the grid on a smaller device, it coll ...

htmltwitter-bootstrapdompdf

Issues with aligning text in TextBoxes

I'm struggling to center align my text boxes and write labels on either side. I want it to look like this: https://i.stack.imgur.com/6QsNv.png Despite trying different solutions, I can't seem to get the boxes to align in the center. Is there a ...

csshtmltextboxalignment

What is the simplest method for transferring data to and from a JavaScript server?

I am looking for the most efficient way to exchange small amounts of data (specifically just 1 variable) between an HTML client page and a JavaScript server. Can you suggest a script that I can integrate into my client to facilitate sending and receiving d ...

javascripthtmlnode.jsclient-server