Topic: Move progress bar under the sticky navigation menu

chimpanzee01

March 24, 2024 at 6:49 am

I’ve managed to get a progress bar working well on two websites with the following code and the wp_head hook. I can’t seem to get the progress bar to be at the bottom of the sticky navigation menu. Right now it’s at the top of the menu when scrolling.

Reading Progress Bar CSS

<style>
.header {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  background-color: #f1f1f1;
}

.progress-container {
  width: 100%;
  height: 5px;
  background: #ccc;
}

.progress-bar {
  height: 5px;
  background: #b39294;
  width: 0%;
}

.top-bar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-float-right .is_stuck.main-navigation:not(.toggled) {
    top: 5px !important;
}
</style>

Reading Progress Bar HTML

<div class="header">
  <div class="progress-container">
    <div class="progress-bar" id="myBar">
    </div>
  </div>  
</div>

Reading Progress Bar JavaScript

<script>
// When the user scrolls the page, execute myFunction 
window.onscroll = function() {myFunction()};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.width = scrolled + "%";
}
</script>

Ying
March 24, 2024 at 10:17 am
Hi there,

1. Use generate_before_header hook for the bar.

2. Disable GP’s sticky navigation in the customizer.

3. Add this CSS:
```
.header-wrap {
    display: flex;
    flex-direction: column;
    position: sticky;
    top:0;
}

.site-header {
    order: -1;
}
```
chimpanzee01
March 24, 2024 at 12:33 pm

I tried this but the sticky navigation doesn’t show up with the CSS. I’d like the sticky navigation with the progress bar at the bottom of the sticky navigation. I wonder if the CSS you provided needs a tweak or two.

David

March 25, 2024 at 3:58 am

Hi there,

your current function hooks the progress bar above the header, and it needs to be attached to the sticky nav.
Remove the current HTML, CSS and Script you have for the progress bar.

Enable the GP Sticky navigation.

Add this Script:


<script>
window.onscroll = function() {updateScrollPercentage()};

function updateScrollPercentage() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  
  // Set CSS variable
  document.documentElement.style.setProperty('--scroll-percentage', scrolled + '%');
}
</script>

and this style:


<style>
:root {
  --scroll-percentage: 0; /* Default value */
}
.navigation-stick .inside-navigation {
    position: relative;
}
.navigation-stick .inside-navigation:after {
    content: '';
    pointer-events: none;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: var(--scroll-percentage);
    background-color: #0092FF;
}
</style>

Its a pure CSS method that will add the line to the sticky navigation only.

chimpanzee01
March 26, 2024 at 6:15 am

Thank you. This is resolved!
David
March 27, 2024 at 2:12 am

Glad to hear that!
chimpanzee01
March 31, 2024 at 10:30 am

Is there a way to create CSS to add exceptions to the sticky navigation menu (disable it) for certain pages?
David
April 1, 2024 at 7:07 am
A simple way would be this CSS:
```
body:is(.page-id-77, .page-id-75 ) #mobile-header.navigation-stick{
    display: none !important;
}
```
Note here:
body:is(.page-id-77, .page-id-75 )

It includes the page-id-XX for the specific pages. You can comma separate more IDs if you need.
David
April 1, 2024 at 7:07 am
A simple way would be this CSS:
```
body:is(.page-id-77, .page-id-75 ) #mobile-header.navigation-stick{
    display: none !important;
}
```
Note here:
body:is(.page-id-77, .page-id-75 )

It includes the page-id-XX for the specific pages. You can comma separate more IDs if you need.
chimpanzee01
April 2, 2024 at 5:32 pm

Ok thank you!
David
April 3, 2024 at 3:17 am

You’re welcome

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Move progress bar under the sticky navigation menu