Using Bootstrap 4 to create a fixed-top navbar and other sticky-top elements

Check out the reproduction here: https://jsbin.com/lawafu/edit?html,output

Could this be a bug, an error, a challenge, or an unattainable concept?

Prior to scrolling:

After scrolling:

What I require:

Essentially, I need the sidebar to remain visible as I scroll down the page, utilizing padding-top of the body for the fixed-top navbar.

This is the code snippet I am using for the sidebar:

<div class="sticky-top">
  <ul class="list-group">
    <li class="list-group-item active">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
htmlcsstwitter-bootstrapbootstrap-4sticky

Answer №1

When using Bootstrap's sticky-top, keep in mind that it does not have an offset for the Navbar by default as it sets top:0. To adjust for the Navbar height, you can introduce a custom class.

.sticky-offset {
    top: 56px;
}

<div class="sticky-top sticky-offset">
  <ul class="list-group">
    <li class="list-group-item active">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

See a live demonstration here:

For more information on this topic, check out: Bootstrap 4 fixed top nav and fixed sidebar

Answer №2

While Zim provided a helpful answer, it unfortunately did not solve my issue in Safari 12.0.1 on MacOS. However, Chrome 70 worked perfectly as expected.

The problem seems to be that the sticky-top class has a top:0px value which was taking precedence over the custom class I added.

To resolve this, I decided to simply include the following code:

.sticky-top{
  top:56px;
}

This adjustment successfully fixed the issue in Safari as well. Additionally, there is no necessity to apply the custom class to the div element.

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

I'm having trouble aligning this div in the center of the screen. It looks like the position is slightly off

<!DOCTYPE html> <html> <head> <style> body { background-color: #7a64fa; } .container { background-color: #ffffff; position: fixed; top: 50%; left: 50%; margin-top: -50px; ...

htmlcss

Adjust the CSS of the currently dragged item using jQuery sortable

I am currently using jQuery-ui sortable and facing an issue with changing the appearance of a dragged item. I would like the text value of the component inside the red background container to be displayed while dragging. Can someone please assist me with t ...

jqueryhtmlcssjquery-uijquery-ui-sortable

Unable to conceal adjacent element when z-index is set as 1

I encountered an issue where a modal is overlapping another element, and the close button of the underlying element has a z-index of 1. Despite creating a new modal with its own close button, the original close button remains visible on top. I attempted t ...

javascripthtmlcssreactjs

Variation in `th` & `td` Width in Table

Is it possible to have different widths for th and td, such as 50px for th and 500px for td? To address this issue, I am utilizing datatable. To enable others to help me, here is a simple code snippet: .abc { width: 500px; } .def { width: 50px; } ...

htmlcss

What could be causing the p tag to be displacing the parent div downwards?

Can someone help with an issue I'm having? I have two divs that are supposed to take up half of the screen each. However, when I add a p tag inside the second div, it gets pulled down. I am working on creating an HTML email, so I can only use inline s ...

htmlcssinline-styles

Vuejs: Develop an intermediate component that utilizes one of the props and passes on all other content to the <button> element

Just getting started with Vue and struggling to articulate the problem, possibly a duplicate issue. We have a common pattern in our codebase where there is a button accompanied by a message depending on whether the button is disabled. Here's a simpli ...

htmlvue.jsvuejs2

Prevent users from tabbing to the next input field in a web form

Is it possible to prevent users from using the tab button on their keyboard to navigate to the next field in a form? <form action="/action_page.php"> First name:<br> <input type="text" name="firstname"> <br> Last name:< ...

javascriptjqueryhtmlweb

Allow editing for only a specific part of a text box

Creating a customized personal URL page for users on my site is important to me. I envision the value of a text box being "example.com/username," with the "example.com/" part displayed in the text box, but not editable. I've noticed that Tumblr accom ...

javascriptjqueryhtmluser-input

Creating a layout with two divs displayed next to each other using CSS

Just when I thought I had it figured out, my two side-by-side divs are not behaving as intended inside the parent div. Why is the orange "Content" div ending up below the navigation bar? Can anyone spot what I did wrong here? Thank you in advance! CSS: ...

css

Utilizing Django fixtures: Importing HTML content as JSON into a Text Field

Currently in the process of transitioning my website to Django from another content management system, I am facing challenges with importing HTML into Django using fixtures. The specific issue revolves around "Events", which is a model within my Django app ...

pythonhtmljsondjangofixtures

How to Set a Button as Inline Text in a React Native Component

Below is the code snippet I am working with utilizing the Text and Button components provided by react-native-paper: <Text>See also </Text> <Button mode="text" compact onPress={this.nav( name )}>Compass</Button> <Text&g ...

cssreact-nativebutton

Ways to eliminate the Horizontal scroll bar

Currently, I am in the process of transforming a Static Page into a Responsive Page. However, when I resize my page to a lower width, I notice that a horizontal scroll-bar appears along with some margins at the bottom and right side of the last div/Footer. ...

htmlcssresponsiveness

Guide to implementing onhashchange with dynamic elements

Hey there! I've encountered a problem with two select boxes on my webpage, each in different anchors (one on the page, the other in an iframe). What I'm trying to achieve is for the code to recognize which anchor it's in and then pass the se ...

javascriptjqueryhtmlurlhashchange

Pair objects that possess a specific attribute

I have a HTML snippet that I want to modify by adding the CSS class HideEdit to hide specific columns. <th class="rgHeader" style="text-align: left;" scope="col" _events="[object Object]" control="[object Object]" UniqueName="Edit"> This particular ...

jqueryhtmlcss.nettelerik

Exciting transition effect for font sizes in CSS

Issue: Hover over the X and wait for the div to collapse completely. Move away from the X Notice how the div jumps to the bottom and then back up. Inquiry: How can I prevent text wrapping while expanding the div during animation? (Currently using del ...

htmlcsscss-transitions

Why doesn't setting the SVG viewBox to "0 0 100 100" scale my path to 100%?

My current dilemma involves an SVG path that is only displaying at 50% of its intended size. How can I adjust it to show at 100%? Below is the code snippet in question: <div className="svgPathContainer"> <svg width="100%" he ...

cssreactjssvgpathviewbox

Is there a way to manipulate the appearance of a scroller using JavaScript?

I'm intrigued by how fellow front-end developers are able to customize the scrollbar shape on a webpage to enhance its appearance. Can anyone guide me on using JavaScript to accomplish this? ...

javascriptjqueryhtmlcss

Guide on achieving horizontal scrolling in Ionic 3

Check out this image I have a list of 10 names in an ion-scroll, but they are appearing on separate lines like paragraphs. Below is my HTML code: <ion-scroll scrollX="true" style="width:100vw; height:50px" > <ion-row class="headerChip"& ...

cssangularscrollionic2ionic3

What is the best way to show TypeScript code using "<code>" tags within an Angular application?

I am looking to showcase some TypeScript (angular code) as plain text on my website using prismjs. However, the Angular framework is executing the code instead. How can I prevent it from running? I have attempted enclosing it within pre and code tags wit ...

htmlangulartypescript

Setting specific variables in an array with corresponding key-value pairs

I need help with extracting specific columns from a table that has 5 columns. The columns in question are: column1, user_id, column3, column4, and user_exp. Let's say I have the following select query: $mat_sql = mysql_query( "SELECT * FROM users ...

phphtml