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

What is the best way to gradually transform a continuously shifting text color into a single, consistent hue?

Hey there, wonderful people of StackOverflow! I am absolutely stumped and cannot figure out how to smoothly transition this color-changing text from its current state into a different solid color when the submit button is clicked. Is there a skilled indiv ...

javascriptjqueryhtmlcssanimation

A straightforward jQuery conditional statement for dynamically generated content

If the div '#ajax' contains content, I want to make the div '.container' clickable. Here is the basic jQuery script I have implemented: if ('#ajax:empty') { $('.container').css('pointer-events', ' ...

jquerycssajax

Having difficulty adjusting the StartIcon margin within the MUI Button example, unable to override its values

Currently, I am facing an issue with the Button component in Material UI. Specifically, I am working with a Button that contains a StartIcon. Despite trying to modify the default margin provided by the StartIcon CSS, I have been unsuccessful so far. https: ...

htmlcssreactjsmaterial-ui

Guide to customizing the appearance of a component's host element on-the-fly

For instance: https://stackblitz.com/edit/angular-mkcfsd In my project, I have an icon component called app-icon which dynamically takes a path and inserts it into an SVG viewbox. I extract the height and width of the path, then set the SVG to match those ...

cssangularangular7

Is there a way to handle specific email format designs with PHP?

When trying to send an email with specific shipping information and tracking numbers, the formatting appears strange. Here is the desired format: Dear xyz , Per your request, this email is to no ...

htmlcssphp

What is the best way to align the items in two lists at the center as if they were all individual

Q: How can I center the list-item elements of two unordered lists as if they were children of just one list? Example: {[1][1][1][1][2][2]} { [2][2] } CSS Alignment Challenge <div> <ul> &l ...

htmlcss

Swapping out data within a container

I've been experimenting with creating a hangman game using JavaScript and HTML. However, I'm facing an issue where clicking on a letter doesn't replace the "_" placeholder. var myList=["Computer","Algorithm","Software","Programming","Develop ...

javascripthtmlcss

My navigation bar's CSS code falls short of extending across the full width of my screen, leaving a gap of approximately 10 pixels before reaching the edges

Can someone help me figure out what went wrong? I've been trying to remove the margins but it's not working. The background colors of other elements seem to be seeping into this empty space. Any thoughts or suggestions would be greatly appreciate ...

htmlcss

How to Highlight Text in a textField Using Vuetify

Is there a way to dynamically set the value of a text field in Vuetify, focus it, and select its text? I encountered an error stating "select is not a function". This method works for regular text inputs but seems to be incompatible with Vuetify text fie ...

vue.jsvuetify.js

Animating back with a jQuery if statement

Is there a way to implement an if statement that triggers an animation when the right image reaches +400px, and then animates back to -400px upon hovering over the image? $('#left img').mouseenter(function() { $('#right img').animate ...

javascriptjquerycssanimation

How to disable scrolling for React components with CSS styling

When incorporating a React component into my HTML, I follow this pattern: <html> <body> <div id=app>${appHtml}</div> <script src="/bundle.js"></script> </body> </html> Within my application, th ...

javascripthtmlcssreactjs

Contrast between pre-tag in HTML and white-space: pre newline exclusion

I originally thought that the pre(html tag) would act just like 'white-space:pre'. However, it turns out that it does not behave in the same way. <pre> aaa bbb </pre> <p style="white-space:pre;"> aaa bbb </p> The <pr ...

htmlcss

What is the proper way to write the code for this form?

I am exploring alternatives to using the html TABLE tag and struggling to create the desired layout. I have attached a screenshot showing my table design. How can I achieve the same layout using divs or spans while still maintaining vertical alignment of t ...

htmlcss

Enhance your HTML page functionality with the power of jQuery

I'm working on creating a HTML page with interactive options. I want to implement an option menu that will pop up when hovered over or clicked, allowing me to customize colors, background patterns, and more. It seems like this involves altering the CS ...

htmljquerycss

Issue with the left margin of the background image

I am currently facing an issue with a series of background images that are supposed to fade in and out behind my content. These images are centered, wider than the content itself, and should not affect the width of the page. However, there is an unexpected ...

htmlcssbackground

Incorporate text directly into Bootstrap select input on a single line

I am attempting to include an asterisk in a select input field. I can achieve this easily by applying my own CSS, but the challenge is to accomplish this using Bootstrap 3.3.7 or an older version while displaying the asterisk on the same line as shown in t ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Positioning an HTML control on top of a Silverlight Application, ensuring it moves in sync with the application as it scrolls

   I am facing a challenge with my Silverlight Application (VS2010/C#) that runs in full screen mode.    There is also an HTML control positioned over the Silverlight Application.    When I maximize the brows ...

c#htmlcsssilverlightlayout

Guide to creating a parallax scrolling effect with a background image

My frustration levels have hit an all-time high after spending days attempting to troubleshoot why parallax scrolling isn't functioning for a single image on a website I'm developing. To give you some context, here's the code I've been ...

javascripthtmlcssparallaxskrollr

After a complete page refresh, Vue.js route parameters are not retained

When passing a user id from the router-link using params to display the user's detail on the profile page, everything works correctly. However, upon reloading the page, $route.params.id changes to undefined and the displayed data disappears. To retrie ...

vue.jsvuejs2vue-componentvue-router

Leverage videojs-vr within a Vue.js component

I have been experimenting with integrating the videojs-vr package, which I installed through npm, into a Vue.js component. However, I encountered an error: TypeError: videojs is not a function at VueComponent.mounted (VR.vue?d2da:23) at callHook (vue.esm. ...

javascriptnpmvue.jsvideo.js