Tip needed - how do I do a page marker?

I Need Help
1

I’ve been playing with custom classes but can’t make anything work - what I need is a marker to show what page the website user is on.

I’ve got two websites, one where a red line above or below the sticky menu item would work, something like this:

And one with different coloured pages, where the menu item is the same colour as the selected page, something like this:

Any help would be gratefully received!

Thanks.

1 Like
2

Same question for me.

3

Something like this?

Cheers / Johny

1 Like
4

Exactly!!! Could “the wizard” spend some hints for simple mortals? :slight_smile:

5

@csuhr

Ok here’s a very quick and dirty video tutorial.

Cheers / Johny

1 Like
6

Man, YOU ARE FAST! THANX!!!

1 Like
7

Ha ha… well I said quick and dirty :wink:

1 Like
8

Another way to do it if you want to use the global navigation:
Add this to the add code in page properties on each page.
Then add the class navbar to the navigation on the pages.
You can edit the color and background color to go with your page.

<style>
.navbar .active {
    color:            #F8F8F8;
    background-color: #4f81bd;
}
</style>
<script>
    $(function(){
        $('a').each(function(){
            if ($(this).prop('href') == window.location.href) {
                $(this).addClass('active'); $(this).parents('li').addClass('active');
            }
        });
    });
</script>
4 Likes
9

@cincyplanet that’s a slick solution :+1:

1 Like
10

Thank you!

2 Likes
11

Wow! I had me dinner and find the problem solved!

Thanks so much guys!!!

3 Likes
12

Will this work with side menu also?

13

I haven’t tried it but it should.

14

Hi @cincyplanet.
Very nice, thanks.
A few intermediate questions.
The 2 .navbar colors apply to what? I assume the color applies to the current page, but is the background-color transparency?
“Then add the class navbar to the navigation on the pages.” Sorry, but I don’t follow.
Do I need to add a class? I hope so, then I can add a gradient.

15

Hi @Jakerlund
I worked out the hotspots, and with advice from @blocs-user, used browser inspector ( and trial and error) to alter the spot classes, and came to this.

Screen Shot 2017-09-06 at 7.01.52 pm.jpg2450×1330 577 KB

I’m a happy chap now.
Cheers, Andy

16

The first: color would be the text color for the active page,
The Second: background-color is the highlight color for the active page

The other nav items should stay with how you originally have them.

17

Got it!
So I can ignore (or remove) that line?
Then add the class navbar to the navigation on the pages?

18

That’s Correct.

19

Very nice thanks; that’s a keeper.
How can I add a grad background to the current button only, or is that pushing my luck too far?

20

Havent tried it but try adding:

background: linear-gradient(red, yellow);