How to Highlight the Menu

[edison]

Hi,

I am building this app and I want the app to be clean. I am wondering, is it possible to highlight the menu instead of labeling it on the page itself?

Instead of putting the title page to where you currently at, the Menu is highlighted. Is this possible at the tadabase?

Thank you

[tim.young]

Hey @edison

Here is a quick guide on how to do this but fair warning - it will not work with dropdown menu items. Someone with more JavaScript knowledge will have to help with that

1. Click on Page Builder

2. Click on a Page Layout

We're going to add some custom code to a Page Layout. This will ensure that the code takes effect on every page within that Layout. You are free to add this to as many Layouts as necessary.

3. Click on the CSS tab

4. Click on highlight

5. Paste CSS into text area

.navbar-default .navbar-nav>.active>a {
    text-decoration: none;
    color: #323377 !important;
    background-color: #fff !important;
    border-radius: 10px;
}

This CSS uses the same colors as the hover effect for the Fresh theme. Feel free to change any of these values.

6. Click on Save

7. Click on the Javascript tab

8. Paste Javascript into text area

$('.navbar .item').on("click",function(){
    $('.navbar .item').removeClass('active');
    $(this).addClass('active');
});

9. Click on Save

---

[edison]

@tim.young

$('.navbar .item').on("click",function(){
    $('.navbar .item').removeClass('active');
    $(this).addClass('active');
});

Perfect. Thank you!