Tip needed - how do I do a page marker?

I Need Help
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);

21

Does with flat colour too.

That works, but on the index, it adds grad to logo (.png).

Screen Shot 2017-09-06 at 7.49.22 pm.png2380×320 294 KB

22

@apswoodwork That’s great Andy.
Congratulations, you finally got it working :+1:

23

Id check to see if it has the class attached to it, might have to make a separate class or something. I can play around with it a bit later if you dont get it working.

24

I’ll fiddle (with the code)!