Create a CSS menu that remains fixed at the top of the page and highlights the current submenu as

When explaining a concept, I find it easier to include a drawing to ensure clarity.

https://i.stack.imgur.com/IChFy.png

My goal is to keep the menu at the top of the page after scrolling past the header.

https://i.stack.imgur.com/3fzJ6.png

Using Bootstrap, I am also seeking guidance on how to activate the selected submenu when scrolled to.

<div>
                <nav class="navbar navbar-expand-lg navbar-light bg-light" style="background-color: white !important">
                    <div class="collapse navbar-collapse" id="navbarTogglerDemo03" style="background-color: white">
                        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                            <li class="nav-item active">
                                <a class="nav-link navbar-whitepanel selected" href="#raceAbout">{{$t('race.about')}} <span class="sr-only">(current)</span></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link navbar-whitepanel" href="#raceJourney">{{$t('race.parcours')}}</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link navbar-whitepanel" href="#racePictures">{{$t('race.photos')}}</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link navbar-whitepanel" href="#raceRate">{{$t('race.opinions')}}</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link navbar-whitepanel" href="#raceResults">{{$t('race.results')}}</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link navbar-whitepanel" href="#similarRaces">{{$t('race.similarRaces')}}</a>
                            </li>
                        </ul>
                    </div>
                </nav>
                <div style="margin: 2em;"></div>
            </div>
cssvue.jsbootstrap-4

Answer №1

To create a sticky navigation menu, it is recommended to utilize the CSS property position: sticky;. For more detailed information on how to implement this type of menu, visit the following website.

Explore this resource

Answer №2

My answer should meet your expectations.

To make the navbar sticky, include the following CSS properties:

position: sticky; 
top: 0;
z-index: 1;

Please view my answer in full-screen mode as the navbar is designed for larger screens only.

Check out the demo: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
  <p>some text</p>
  <p style="margin-top:100px;">some text</p>

</div>

<nav class="navbar navbar-expand-lg navbar-light bg-light" style="background-color: white !important;position:sticky; top:0;z-index:1;">
  <div class="collapse navbar-collapse" id="navbarTogglerDemo03" style="background-color: white">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link navbar-whitepanel selected" href="#raceAbout">{{$t('race.about')}} <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link navbar-whitepanel" href="#raceJourney">{{$t('race.parcours')}}</a>
      </li>
      <li class="nav-item">
        <a class="nav-link navbar-whitepanel" href="#racePictures">{{$t('race.photos')}}</a>
      </li>
      <li class="nav-item">
        <a class="nav-link navbar-whitepanel" href="#raceRate">{{$t('race.opinions')}}</a>
      </li>
      <li class="nav-item">
        <a class="nav-link navbar-whitepanel" href="#raceResults">{{$t('race.results')}}</a>
      </li>
      <li class="nav-item">
        <a class="nav-link navbar-whitepanel" href="#similarRaces">{{$t('race.similarRaces')}}</a>
      </li>
    </ul>
  </div>
</nav>
<div style="margin: 2em;"></div>



<div class="jumbotron text-center">
  <h1>some contents </h1>
  <p>lorem ipsum dolor sit amet, consectetur .....</p>
</div>
<div class="container">
  <p style="margin-top:100px;">some text</p>

  <p style="margin-top:100px;">some text</p>
  <p style="margin-top:100px;">some text</p>
  <p style="margin-top:100px;">some text</p>
  <p style="margin-top:100px;">some text</p>

  <p style="margin-top:100px;">some text</p>
  <p style="margin-top:100px;">some text</p>
  <p style="margin-top:100px;">some text</p>
  <p style="margin-top:100px;">some text</p>

  <p style="margin-top:100px;">some text</p>
  <p style="margin-top:100px;">some text</p>
  <p style="margin-top:100px;">some text</p>
</div>

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

Ways to center Bootstrap panel in the middle of a webpage

Is there a way to center this entire panel on the web page? I could use some guidance with this. Does anyone have recommendations for a good book to learn Bootstrap design? <div class="panel panel-default" style="max-width:500px;margin-left:auto;margi ...

htmlcssasp.net-mvctwitter-bootstrap

The Vuex store has been refreshed, but the DOM remains unchanged

I've scoured all the discussions on this topic and can't find a solution. My Vuex store is updating correctly, but the DOM isn't reflecting the changes. Here's a screenshot of the issue One of my getters, called returnAmazonCredential ...

vue.jsvuex

The z-index of 999 in CSS is not functioning as expected on both Google Chrome and Safari browsers

To ensure the slider text is readable in white color, we have applied a black background with 0.65 opacity CSS on the slider image. This allows the white text to stand out effectively. The following CSS code was used for this effect: .zlslides .ms-slide- ...

csswordpressgoogle-chromez-indexopacity

"Trouble with Express.js: CSS isn't loading, yet HTML displays

Click here to view folders and files server.js is the code I have created so far //importing packages const express = require('express'); const admin = require('firebase-admin'); const bcrypt = require('bcrypt'); const path = ...

javascripthtmlcssexpressnpm

What causes a horizontal line to form when a user enters white space?

I have written a piece of code which seems to be causing an issue when running it. Whenever I input empty spaces, it results in creating a horizontal line. import React, { Component } from 'react'; export default class App extends Component { co ...

javascriptcssreactjs

Arranging HTML components in Vue.js using v-for loop

Recently, I started using vue.js and I have a requirement where I need to display an HTML structure based on API data. The structure should look like this: <div class="row"> <div><p>text1</p><img src="{{imgurl1}}" /></di ...

javascripthtmlvue.js

What is the best way to customize the woocommerce.css file in the parent theme?

Currently, I have incorporated an ecommerce-friendly wordpress theme for my website in conjunction with woocommerce. To customize the design, I created a child theme and transferred the woocommerce.css file from the plugin into the css of the child theme, ...

csswordpresswoocommerce

Having trouble transferring data to an object in VueJS

Is there a way to properly capture the uploaded file in FilePond, as the base64 data of the file is not being transferred to my object? Any suggestions on how to resolve this issue? Within the template: <FilePond v-on:addfile="catch" /> Inside ...

vue.js

Tips for adjusting image size to take up only half of the screen in NextJS

Struggling to resize an image to fit only 50% of the screen in NextJS? The Image component provided by NextJS comes with its own inline styling, making it tricky to customize. Currently, I attempt to style the image by wrapping the Image component in a spa ...

javascriptcssreactjssassnext.js

Conceal the content within the body and reveal a uniquely crafted div element using Print CSS

I came across numerous resources on using CSS to hide specific parts of a webpage. However, I am not looking to hide multiple divs like this: #flash,#menu,#anuncios { display:none; } Instead, my goal is to hide the entire body of the page and only displ ...

htmlcss

Looking for assistance with text alignment?

23 Years Young From: The Boogie Down Bronx Heritage: Puerto Rican Pride Trade: Master Tailor For a demonstration, click on this link ...

htmlcss

Looking to enhance my JavaScript skills - Codepen samples welcome!

I have incorporated this code pen in my website to create a menu button for mobile view: http://codepen.io/anon/pen/LNNaYp Unfortunately, the button sometimes breaks when clicked repeatedly, causing the 'X' state to appear even when the menu is ...

javascriptjqueryhtmlcss

Adjust the styling of the anchor tag within the selected div by utilizing jQuery

I am struggling with changing the color of a specific anchor tag when clicked inside a div with class .product_wishlist. Currently, all anchor tags within .pw div are changing colors. Is there a way to apply selected css only to the clicked element? Any he ...

javascriptjqueryhtmlcss

Unable to send information to Vue component

I have two main components: ProfileComponent and UserSettingsComponent. I link the navigation bar to both of these components using <NavbarComponent :user="user"></NavbarComponent>. In the NavbarComponent, I pass the user data retriev ...

vue.js

When I apply properties in JavaScript, I find that I am unable to utilize the CSS "hover" feature

For a personal project I am currently working on, I decided to experiment with setting background colors using Javascript. However, I have encountered an issue where my CSS code that changes the hover property does not seem to work after implementing the J ...

javascriptcss

Automatically choose the initial <select> option when loading asynchronous choices in Vue 3

My challenge is to bind a <select> HTML element with the v-model directive to a ref value in Vue.js 3's setup() method. I want the Form.ProductID ref to be updated when a user selects a different option. This is the code for the <select> ...

javascriptvue.jsvuejs3vue-composition-apivue-reactivity

Encountering a compilation error when attempting to import a shader from a file in a project using THREE.js, Vue.js

I've encountered an error and spent hours searching for a solution, but unfortunately found nothing. The correct way to import shader code from a file is: import {ColourShader} from '../shaders/ColourShader.js' Here is the content of my &a ...

javascriptvue.jsthree.jswebglshader

Conceal the initial modal beneath the overlay when the second modal is activated

I have a situation where I am using a modal that contains a button to trigger a second modal. The issue is that the overlay of the second modal does not hide the first modal, it simply darkens the background. How can I make the overlay of the second modal ...

jquerycsstwitter-bootstrapmodal-dialogoverlay

Trouble with setting up sub sections in VueJS

Currently, I am developing a vuejs application that involves creating sections and subsections. I encountered an issue when attempting to add a subsection, as it resulted in an error message: Uncaught TypeError: sections[1] is undefined Here's a gli ...

arraysvue.jsfilevuejs3

Customize the progress bar color in Bootstrap by setting a unique color to it

Is it possible to apply a custom color to the progress bar in Bootstrap that is not one of the standard options like success, info, warning or danger? I attempted adding the following code snippet to my bootstrap-theme.css file: .progress-bar-custom { b ...

htmlcss