Changing the navigation menu style


#1

I have followed the video instruction to set a Subclass of navigation container background but it doesn’t make any changes to my navigation menu. I have a light background and the menu text is changing to white. I would like to make the text another colour and increase the size. Im looking to buy the software but if I can’t change this it is a deal breaker.


Custom styling for navbar sub menu items
#2

I should add that the menu is in the global header if that makes a difference


#3

Hello there,

I wanted to change the appearance of my navigation menu too. I had to change the Data Source from Primary Menu to None, the set up and apply a Class to each of the menu items.

Hope this advice is accurate/helpful.

Cheers,

Razzerman


#4

Yes, this is exactly how it works.


#5

Thanks

Does that mean you can change the data source back to primary after and the style sticks? (My demo has expired so I can’t test)


#6

I’m afraid not - if you change the data source to primary, it will revert back to the default.


#7

Well that is a good workaround but I guess that takes me back to my original quest, what is the technique
to change the menu without changing the source?


#8

Bump: so judging from the advice it isn’t possible to change a menu colour style without changing the source to none. Correct?


Active State on the navigation
#9

Hello,

you can make this using the “Class Manager” at the bottom left in the right side bar.

There you have to create a new class “.navbar .nav” for the background and “.navbar .nav a” for the text.

If you want to change the active Menu, you have to add the class “.navbar .active” and adding the following script to your page:

$(function(){
    $('a').each(function(){
        if ($(this).prop('href') == window.location.href) {
            $(this).addClass('active'); $(this).parents('li').addClass('active');
        }
    });
});

(The Code is from @cincyplanet. Thank you very much. Tip needed - how do I do a page marker? )

This will not work in the preview of the BlocsApp, but you can preview it in any Browser.


Create Menu Navigation Class
#10

Thanks - the “A” appendix was what I needed.

cheers John