Applying user defined CSS to the Navigation control

Hello Team,

how i can add my own css settings to the existing Navigation control. i want to change the existing look and feel and mouse over effect of the navigation control, so i created a new CSS and added the class name in the Wrapper class input field but it is not reflecting. kindly guide me to apply user defined css to existing Navigation control.

Hello Shekar,

 See if the attached file helps. You can add your CSS file either by the CSS widget or by creating a custom theme. Note the class name in the CSS file.

Thanks for the reply,

can you please guide me how to add a CSS file for navigation controls.

Thanks for your support 

Hello Shekar,

1. Save your CSS file in App_Data\Sitefinity\ folder of your project.
2. Lets say your custom class is called custom. In your CSS file it has to look like this:

This depends on the Rad Control being used for navigation. By default it's RadTabStrip.

3. Add the CSS widget from the toolbox to your page.



4. Click on the widget to open it's designer.



5. Click on the "Select" button and choose your CSS file.



6. Check if the is "App_Data\" in the URL. If there is - delete it.



8. Click "Save".
7. Click Edit your navigation control.
8. Expand "Design Settings".



8. Type your css class name int the "Wrapper CSS class" field.
9. Click "Save".

You should be able to see your CSS applied to your navigation control. Greetings,
Boyko Karadzhov
the Telerik team

Hello Boyko,

Thanks for the pictorial presentation, it was really helpful, the problem was the the Class name, by viewing the source code i came to know that the control id is RadMenu and when i changed the class name in the css file to .RadMenu_Custom it worked.

Thanks again for the support.