Is there a way to keep my navbar fixed at the top as I scroll down the page? And is it possible to have a picture appear above the navbar when scrolling up to the top?

I am looking to create a design where a picture appears above my navbar, and as I scroll down, I want the picture to stay fixed at the top so that it is always visible, regardless of how much I scroll. However, when scrolling back up, I want the picture to remain above the navbar.

Check out my codepen for reference: https://codepen.io/MestreALMO/pen/LYEwLPY?editors=1000

p {
  text-indent: 50px;
}

img {
  width: 100%;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>


<div class="container-fluid bg-light" style="height: 400px; padding:0px;">
  <img class="container-fluid bg-light" style="height: 400px; padding:0px;" src="https://img.elo7.com.br/product/zoom/1B7C0CA/painel-de-festa-colors-festa-personalizada.jpg"></img>
</div>

<nav class="navbar navbar-dark bg-dark navbar-expand-sm">
  <div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
    <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link" id="hero" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" id="about" href="#">About</a></li>
      <li class="nav-item"><a class="nav-link" id="services" href="#">Services</a></li>
    </ul>
  </div>
</nav>

<div class="container-fluid bg-secondary" style="height: 5000px;">
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint, reiciendis voluptas quia qui tempora, inventore quis ad corrupti culpa nihil autem voluptatibus illo minima alias expedita hic, vel consequatur rem! Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Ratione delectus ut doloribus tempore amet pariatur cupiditate, necessitatibus id, sed eum cum? Perferendis corrupti nulla accusamus exercitationem id temporibus dicta ipsum.</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint, reiciendis voluptas quia qui tempora, inventore quis ad corrupti culpa nihil autem voluptatibus illo minima alias expedita hic, vel consequatur rem! Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Ratione delectus ut doloribus tempore amet pariatur cupiditate, necessitatibus id, sed eum cum? Perferendis corrupti nulla accusamus exercitationem id temporibus dicta ipsum.</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint, reiciendis voluptas quia qui tempora, inventore quis ad corrupti culpa nihil autem voluptatibus illo minima alias expedita hic, vel consequatur rem! Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Ratione delectus ut doloribus tempore amet pariatur cupiditate, necessitatibus id, sed eum cum? Perferendis corrupti nulla accusamus exercitationem id temporibus dicta ipsum.</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint, reiciendis voluptas quia qui tempora, inventore quis ad corrupti culpa nihil autem voluptatibus illo minima alias expedita hic, vel consequatur rem! Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Ratione delectus ut doloribus tempore amet pariatur cupiditate, necessitatibus id, sed eum cum? Perferendis corrupti nulla accusamus exercitationem id temporibus dicta ipsum.</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint, reiciendis voluptas quia qui tempora, inventore quis ad corrupti culpa nihil autem voluptatibus illo minima alias expedita hic, vel consequatur rem! Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Ratione delectus ut doloribus tempore amet pariatur cupiditate, necessitatibus id, sed eum cum? Perferendis corrupti nulla accusamus exercitationem id temporibus dicta ipsum.</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint, reiciendis voluptas quia qui tempora, inventore quis ad corrupti culpa nihil autem voluptatibus illo minima alias expedita hic, vel consequatur rem! Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Ratione delectus ut doloribus tempore amet pariatur cupiditate, necessitatibus id, sed eum cum? Perferendis corrupti nulla accusamus exercitationem id temporibus dicta ipsum.</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint, reiciendis voluptas quia qui tempora, inventore quis ad corrupti culpa nihil autem voluptatibus illo minima alias expedita hic, vel consequatur rem! Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Ratione delectus ut doloribus tempore amet pariatur cupiditate, necessitatibus id, sed eum cum? Perferendis corrupti nulla accusamus exercitationem id temporibus dicta ipsum.</p>
</div>

htmlcssbootstrap-4navbar

Answer №1

To make the navbar sticky at the top, simply add the "sticky-top" class to the nav element. For additional information, you can visit this link

<nav class="navbar sticky-top navbar-dark bg-dark navbar-expand-sm">

Answer №2

If you want an element to stick to the top as you scroll down the page, simply apply the sticky-top class.

<nav class="navbar sticky-top navbar-dark bg-dark navbar-expand-sm">

It's always good to consult the Bootstrap documentation for help. The information you need can be found here.

Answer №3

<header class="header header-expand-sm bg-dark header-dark sticky-top>

Answer №4

To ensure the menu stays at the top of the page while scrolling, add the sticky-top class to the nav element as shown below. However, I'm curious about your request for a picture above the menu.

<nav class="sticky-top navbar navbar-dark bg-dark navbar-expand-sm">
<div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
  <ul class="navbar-nav">
    <li class="nav-item"><a class="nav-link" id="hero" href="#">Home</a></li>
    <li class="nav-item"><a class="nav-link" id="about" href="#">About</a></li>
    <li class="nav-item"><a class="nav-link" id="services" href="#">Services</a></li>
    </ul>
</div>
 </nav>

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

The callback function in AngularJS filters

I'm currently using an AngularJS filter to sort through a list of items. Here is the Jade markup I am using: li(ng-repeat="parcel in parcels | filter : filterActiveAreaParcels") After the filter function runs and the elements are displayed in the DO ...

javascriptjqueryhtmldomangularjs

Prevent certain HTML content from being displayed in the input field

My input field behaves like a chat box where users can enter text that gets displayed on the page. However, I've discovered that users can also include HTML tags in their inputs to manipulate the output. For example, entering <b>Hello</b> ...

jqueryhtmlinput

Several levels piled one on top of the other

I'm in the process of designing a section for a webpage using Bootstrap 3.0, and I want to layer three divs or sections on top of each other. The stacking order should be as follows: background "squares," footer, and foreground "squares" with images. ...

htmlcsstwitter-bootstrap

Guide on serving static HTML files using vanilla JavaScript and incorporating submodules

Is it possible to serve a static html file with elements defined in a javascript file using imports from submodules using vanilla JS? Or do I need bundling tools and/or other frameworks for this task? Here's an example code structure to showcase what ...

javascripthtmlnode.jswebpack

deployJava.js injects a new <embed> element into the header section of the webpage

I've ran into an issue with the Java applets on my website. I included the deployJava.js load tag in the head section of the page, but when I look at the resulting HTML in Chrome debugger, this script seems to be breaking my head content and starting ...

javajavascripthtmlcssdeployjava

Displaying a loading indicator as content loads within the iframe

How to Display a Loading Indicator During Content Loading Within an iFrame: 1) When a postback or submit event occurs within a form inside the iFrame ...

asp.netjavascriptjqueryhtml

Tips for eliminating the border on a Twitter widget

Looking to integrate a Twitter widget into my website. The site is built using Smarty and I want to customize the widget. Currently, there is a scroll bar on the right section that I would like to remove by adding a style overflow:hidden to the class strea ...

csstwitterwidgetsmartycustomization

Height and left properties do not work with CSS transitions

I am currently working on creating a custom toolbox. I want the toolbox to slide in from the left when opened, so I added a transition from left=-1500px to left=0;, which works perfectly. However, when I attempted to add a minimization feature by adding a ...

htmlcss

How can I use CSS to customize the appearance of the elements within an iframe?

<iframe src="#link"> #document <!doctype html> <html> ... </html> </iframe> Is there a way to customize the styling of elements within the #document using CSS only, without needing to use Jquery? ...

htmlcssiframe

What is the best way to achieve a set number of columns at certain breakpoints?

Is there a way to implement the following layout using Bootstrap 4? Displaying 4 columns on a large breakpoint; 3 columns on a medium breakpoint; and 1 column on a small breakpoint. Below is my current code snippet: <html> <head> ...

bootstrap-4

Customizing Background Color of Bottom Tab Content Container in React Native

Hey there, I need some help with changing the color of the bottom tabs screens. They are currently gray by default (as shown in the image) and I want them to be white. I've tried using tabBarStyle but it doesn't seem to work. If anyone has any i ...

cssreact-native

When the mandatory option is chosen, the scroll snap type acts similar to proximity by enforcing

My goal is to have the main hero section of the website take up the entire screen, and when the user scrolls down, they are immediately brought to the main content with the hero section no longer visible. However, I am experiencing an issue where if I do a ...

htmlcssscrollscroll-snapscroll-snap-type

Interactive website that transitions to a fresh page as we scroll further

As a beginner in web design, I've noticed a trend of companies using websites that automatically transition to the next page when scrolling down. An example of this is . What is this type of template called and are there any open source designs availa ...

cssscroll

How to Access a PHP Variable within a JavaScript Function Argument

.php <?php $timeArray = [355,400,609,1000]; $differentTimeArray = [1,45,622, 923]; ?> <script type="text/javascript"> var i=0; var eventArray = []; function generateArray(arrayName){ eventVideoArray = <?php echo json_encode(arrayName); ...

javascriptphparrayshtml

Angular select automatically saves the selected option when navigating between views

I would like the selected option in my dropdown menu to stay selected as I navigate through different views and then return back. Here is the view: <select ng-model="selectedSeason" class="form-control" ng-options="season as 'Season '+ seas ...

javascripthtmljsonangularjsangularjs-directive

The background image positioned in the center may experience cropping in HTML

I am currently facing an issue with aligning a background image horizontally in a specific scenario: The background image is large and needs to be centered horizontally The page has a minimum width requirement of 960px which may result in a scrollbar on ...

htmlcss

Dynamic content with Socket.io in Node.js

I am attempting to create a scenario where nodejs triggers an event in an irc chat that causes a html page (Running on *:3000) to execute some JavaScript. However, I am facing an issue where the showDiv(); function is not being executed as expected. Curre ...

javascriptjqueryhtmlnode.jssocket.io

Showing a cell border when a radio button is chosen

I am working with a table that contains input/radio buttons, and I am trying to figure out how to apply a border to a specific cell when the user selects the radio button within it. This will give the appearance of the cell being selected. I am not sure ho ...

htmljquerycss

Using Javascript to validate passwords and Bootstrap for design enhancements

I've been working on learning Javascript and some basic HTML using bootstrap v5 recently. One of the tasks I'm currently tackling is creating a Sign-in form and implementing validation for the required fields. While following the Bootstrap docu ...

javascripthtmlbootstrap-5

Enhancing Your Website with Animation Delay using Animate.css and ViewportChecker

I am attempting to apply a delay to various elements with animated classes on a specific webpage using animate.css version 3.5.1 by Daniel Eden and jquery-viewport-checker version 1.8.7 by Dirk Groenen. My initial approach was to utilize the setTimeout fu ...

jquerycssanimationviewport