Home Menu Item

mw360
(@mw360)

4 years, 11 months ago
Hello,

Turns out this plugin is very useful for the type of sites I work with – so thanks for that.

I will typically have a home page with a few sections in it (i.e. like a 1 page site), but then also have links to other separate pages. I have worked this out in my CSS to work well with your plugin, except for one thing:

The ‘Home’ link. If I try to apply CSS to simply the ‘current-menu-item’, of course they all become highlighted along with ‘Home’. If I add an extra class to ‘Home’ such that it is then the only one highlighted, it of course remains highlighted as the user scrolls down the page, i.e. doesn’t turn off as the next one turns on.

So, I’m trying to figure out of I can somehow apply the required class to the Home link and have it highlighted by default, but then turn off as lower page sections are scrolled so that those menu items take over.

Note: I considered linking the home link to a top section DIV, but I really want the home link to remain clean, so that in the address bar, the URL displays cleanly (with no extra /#…) when that button is clicked. Maybe there is a way to override this effect to create the desired result…?

Hope I was able to describe this issue effectively… thanks for any thoughts
- This topic was modified 4 years, 11 months ago by mw360.

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Author malihu
(@malihu)

4 years, 11 months ago

You won’t be able to do what you describe unless you do it manually via javascript (a custom script which will toggle a class on your home button depending on how much the page has scrolled).

The plugin cannot highlight elements out of its scope (elements that it doesn’t handle) and in order to enable it on a link, you have to have a hash (#) in its URL.

I don’t know exactly how your menu works but it seems to me that you’re trying to create one visual indicator for two different behaviors of the “Home” link. What I mean is this:

If the “Home” link is not scrolling the page to the top (i.e. it’s not handled by the plugin), then it should be styled the way you did with the current-menu-item and the extra class. Staying highlighted as the user scrolls down would indeed make sense, because its functionality is to redirect and indicate the homepage.

On the other hand, if the “Home” link does scroll the page to the top (and it is handled by the plugin), then it should be normally highlighted by the plugin’s classes (since its functionality is to go to the top section, which is basically considered “home”).

I hope all the above make sense 🙂

I could give you an example of a custom js script like the one I described on the first paragraph if you want, so let me know.
Thread Starter mw360
(@mw360)

4 years, 11 months ago
Hi, and thanks.

Yes, it is a bit tough, I thought of all the same things you mentioned in fact.

In the end, as far as simple menus are concerned – I prefer that only one menu item within a single set of choices should be highlighted at any given time – and the default expectation that if you click a menu link, you will be taken to that designated location, and upon arrival that link will then be the only item highlighted, to announce you’ve arrived.

Before your response, I was thinking something like:

A special class that could be applied – in this case, to the home button – which could be used to show a highlight effect by default – and then a javascript event tied to your script such that any time another menu item is triggered to be highlighted, that ‘special class’ would be changed , i.e. appended with -off or something similar, against which alternate CSS could reverse the highlight.

Of course then it would need to be reversed back when there is no longer a highlight condition active.

I suppose in this case it is not so much scroll position but simply turning something off when another designated target area is activated… whether one is better than the other I don’t know.

Curious as to your thoughts on this, (oh and if there might be a donation amount in mind that could help some variation of this make it into the plugin?? 😉
- This reply was modified 4 years, 11 months ago by mw360.
Plugin Author malihu
(@malihu)

4 years, 11 months ago
You could try a script like the following which will toggle a highlight class on your home link:
```
<script>
    (function($){
        $(window).on("load resize scroll",function(){
            $(".home-link-special-class a").toggleClass("home-highlight",$("a.mPS2id-highlight").length);
        });
    })(jQuery);
</script>
```
You normally would want the above to apply only on the homepage, so you should wrap the script in a wordpress condition like is_home(). Alternately, if your theme uses the standard wordpress classes on the body tag, you could change the selector to:
```
$(".home .home-link-special-class a")
```
An issue you may encounter is that the home-highlight class will be applied on the home link when there’s no other link highlighted. This could happen even when the page is scrolled all the way to the bottom while it happens that there are no sections highlighted.

Another solution

Another completely different way of approaching this would be to simply add the #top hash on your home link but only on the homepage. This way your site’s URL will stay “clean” while “Page scroll to id” handles the link:
```
<script>
    (function($){
        $(window).on("load resize scroll",function(){
            var homeLink=$(".home .home-link-special-class a"),
                href=homeLink.attr("href");
            homeLink.attr("href",href+"#top");
        });
    })(jQuery);
</script>
```
With the above, by giving a top target element the id top the plugin will highlight the home link like any other.

Please not that I haven’t tested these scripts so try them and let me know 🙂
Thread Starter mw360
(@mw360)

4 years, 11 months ago
Hi,

Hey thanks so much for taking the time to expound on a solution, I really appreciate it!

Using Genesis w/gen child theme FYI.

I tried the first option, and technically it worked – but when scrolling down the page, the home link highlight effect flickers, and on stop – sometime on, sometimes off – which I presume is a reflection of the ‘scroll’ checking somehow not keeping up on screen?

Nonetheless, you bring up a good point about inconsistency should another section on the page not be attached to a trigger section.

So, I tried the second option… Note that before I could, I had to hook a div with id=top into ‘before header’, which I never realized wasn’t already there, since calls to #top always worked (??) – at any rate, once I added that, it DID work – but two problems:

1) The highlight would turn off before the next section triggered the next menu item – presumably too far down from the div containing id=top in this case…

2) On scroll (or resize) the script would keep adding #top to the home link, so #top#top#top, etc… which of course killed the effect 😉

So, I found another ID on the home page covering enough of the top section to hold the highlight, ‘front-page-1’, and that worked (removed ‘scroll’ check to test)… and so now, just trying to stop the repeat issue.

I’m not a javascript guru, so here is my current – but failing – effort at that:
```
<script>
    (function($){
        $(window).on("load resize scroll",function(){
            var homeLink=$(".home .home-link-special-class a"),
                href=homeLink.attr("href");
                   if(href.indexOf("#front-page-1")>=0){
                       homeLink.attr("href",href+"#front-page-1");}
        });
    })(jQuery);
</script>
```
If you would be so kind as to offer a little extra consult I would greatly greatly appreciate it…
- This reply was modified 4 years, 11 months ago by mw360.
Plugin Author malihu
(@malihu)

4 years, 11 months ago
Oh I’m sorry, it’s my fault. I just quickly copied the code and kept window events which is not even remotely correct… Try the following and let me know
```
<script>
    (function($){
        $(document).ready(function(){
            var homeLink=$(".home .home-link-special-class a"),
                href=homeLink.attr("href");
            homeLink.attr("href",href+"#front-page-1");
        });
    })(jQuery);
</script>
```
- This reply was modified 4 years, 11 months ago by malihu.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Home Menu Item’ is closed to new replies.

WordPress.org

Home Menu Item

Views