Hi Team,

I want to customise the css for the navigation bar to remove the gradient.

How can this be achieve?



    CommentAdd your comment...

    1 answer


      Hi Aman,

      In my opinion, this should be done by template designer. However, if you want to play with it try to comment out lines that are responsible for the gradient in Maguire Menu CSS.

      1. Go to your template and locate Navigator Chevrons ( if you are using Maguire template, create a new one that will extend Maguire and switch your form to use your custom  )
      2. In "Styles" property tab select the Maguire Menu style and click on Edit Custom CSS
      3. Comment out all that you need 

      Please find below a screenshot after changes that I have made.

      I'm not sure if my answer will cover all issues, but at least it works fine at first look.



      1. Unknown User (akohli)

        Hi Lukasz,

        Thanks for your response.

        I want to achieve this by creating a custom style sheet rather than commenting out in Maguire Menu Style. How can that be achieve, because it does not reflect styles from the custom style sheet.



      2. Lukasz Kusiak

        Hi Aman,

        Are you sure that you are using correct selectors?

        I was able to create a custom stylesheet that has the disabled background gradient on the navigator.

        What I did was:

        1. Go to Navigator Chevrons in the template and create New Shared Style ( new class will be applied to navigator at the same level as "av-menu")
        2. Copy Maguire Menu style to notepad and delete everything that you want to leave without any changes, so your file will look similar to below screenshot ( I have already changed background style on navigator chevrons)
        3. Replace ".av-menu.mg-menu, .mg-menu > .av-menu" selector, with your custom class, and delete unnecessary variables from the top. Save your style and everything should work.

        Please note that if you have an extension point at the form level ( so navigator is editable from form ), you will need to apply style manually.

        Hope that this will work for you

      3. Unknown User (akohli)

        Hi Lukasz,

        Thanks for the detailed response. It worked for me.

        I was not doing Point 3 initially.

        Warm Regards,


      CommentAdd your comment...