This is a migrated thread and some comments may be shown as answers.

More RadNavigation css

2 Answers 268 Views

Navigation

This is a migrated thread and some comments may be shown as answers.

Kjell asked on 12 Apr 2018, 01:09 PM

dump.jpg

How fix the css like the attached image, like the blue text..

My css now

<style>

html .RadNavigation .rnvRootGroup .hiddenNode {

display: none;

}

html .RadNavigation {

font-size: 18px;

font-family: 'Roboto', sans-serif;

font-weight: 400;

color: #204b9b;

background-color: #dfd10e;

}

html .RadNavigation .rnvRootGroupWrapper {

border-width: 0;

}

html .RadNavigation .rnvRootGroup > .rnvItem {

margin: 12px;

}

html .RadNavigation .rnvMore,

html .RadNavigation .rnvRootLink {

margin: 0;

padding-top: 0;

padding-bottom: 0;

border-width: 0;

}

html .RadNavigation .rnvHovered.rnvMore,

html .RadNavigation .rnvSelected.rnvMore {

margin: 0;

border-width: 0;

}

html .RadNavigation .rnvHovered.rnvMore.rnvRight,

html .RadNavigation .rnvSelected.rnvMore.rnvRight {

margin: 0;

}

html .RadNavigation .rnvHovered .rnvRootLink {

background-color: #f1e890;

}

html .RadNavigation .rnvToggle {

line-height: 1.6em;

}

.rnvPopup {

background-color: white;

border-color: #cfd8dc;

font-size: 16px;

font-family: 'Roboto', sans-serif;

color: #204b9b;

}

.rnvPopup .rnvHovered {

background-color: #eceff1;

border-color: #cfd8dc;

color: #159eda;

}

</style>

2 Answers, 1 is accepted

answered on 17 Apr 2018, 06:27 AM

change-color.png

Hi Kjell,

You can inspect the rendered HTML of the control to see the class it uses so you can cascade through it.
Here is an example I made for you and below you can find attached a screenshot of just the color change rule:

<style>

.customHamburgerIcon .rnvMore::before {

color: red;/*to change the color*/

/*to change the icon*/

content: "\e123";

/*how to change the icon font if you will not be using ours*/

font-family: myFontIconFont;

}

</style>

<telerik:RadNavigation runat="server" ID="Nav1"

CssClass="customHamburgerIcon">

<Nodes>

<telerik:NavigationNode Text="Guitars & Basses">

<Nodes>

<telerik:NavigationNode Text="Classical Guitars">

<Nodes>

<telerik:NavigationNode Text="1/2 Size Classical Guitars"></telerik:NavigationNode>

<telerik:NavigationNode Text="3/4 Size Classical Guitars"></telerik:NavigationNode>

<telerik:NavigationNode Text="7/8 Size Classical Guitars"></telerik:NavigationNode>

<telerik:NavigationNode Text="4/4 Size Classical Guitars"></telerik:NavigationNode>

<telerik:NavigationNode Text="Lefthanded Classical Guitars"></telerik:NavigationNode>

<telerik:NavigationNode Text="Concert Guitars"></telerik:NavigationNode>

</Nodes>

</telerik:NavigationNode>

<telerik:NavigationNode Text="Steel String Guitars">

<Nodes>

<telerik:NavigationNode Text="3/4 Size and Travel Guitars"></telerik:NavigationNode>

<telerik:NavigationNode Text="Dreadnought Guitars"></telerik:NavigationNode>

<telerik:NavigationNode Text="Jumbo Guitars"></telerik:NavigationNode>

<telerik:NavigationNode Text="Folk Guitars"></telerik:NavigationNode>

<telerik:NavigationNode Text="12-String Westernguitars"></telerik:NavigationNode>

<telerik:NavigationNode Text="Lefthanded Acoustic Guitars"></telerik:NavigationNode>

</Nodes>

</telerik:NavigationNode>

<telerik:NavigationNode Text="Acoustic Basses">

<Nodes>

<telerik:NavigationNode Text="Electric Guitars">

<Nodes>

<telerik:NavigationNode Text="ST Models"></telerik:NavigationNode>

<telerik:NavigationNode Text="T-Models"></telerik:NavigationNode>

<telerik:NavigationNode Text="LP-Models"></telerik:NavigationNode>

<telerik:NavigationNode Text="SG Models"></telerik:NavigationNode>

<telerik:NavigationNode Text="7-String Guitars"></telerik:NavigationNode>

<telerik:NavigationNode Text="8-String Guitars"></telerik:NavigationNode>

<telerik:NavigationNode Text="Lefthanded Guitars"></telerik:NavigationNode>

</Nodes>

</telerik:NavigationNode>

<telerik:NavigationNode Text="Electric Basses">

<Nodes>

<telerik:NavigationNode Text="4-String J-Basses"></telerik:NavigationNode>

<telerik:NavigationNode Text="5-String J-Basses"></telerik:NavigationNode>

<telerik:NavigationNode Text="4-String P-Basses"></telerik:NavigationNode>

<telerik:NavigationNode Text="Misc. 4-String Basses"></telerik:NavigationNode>

<telerik:NavigationNode Text="Misc. 5-String Basses"></telerik:NavigationNode>

</Nodes>

</telerik:NavigationNode>

<telerik:NavigationNode Text="Amplifiers for Acoustic Guitars"></telerik:NavigationNode>

<telerik:NavigationNode Text="Amplifiers for Electric Guitars"></telerik:NavigationNode>

<telerik:NavigationNode Text="Bass Amplifiers"></telerik:NavigationNode>

</Nodes>

</telerik:NavigationNode>

</Nodes>

</telerik:NavigationNode>

<telerik:NavigationNode Text="Drums & E-Drums">

<Nodes>

<telerik:NavigationNode Text="Acoustic Drumsets">

<Nodes>

<telerik:NavigationNode Text="Acoustic Drumsets"></telerik:NavigationNode>

<telerik:NavigationNode Text="Shell Sets"></telerik:NavigationNode>

<telerik:NavigationNode Text="Bass Drums"></telerik:NavigationNode>

<telerik:NavigationNode Text="Tomtoms"></telerik:NavigationNode>

</Nodes>

</telerik:NavigationNode>

<telerik:NavigationNode Text="E-Drums">

<Nodes>

<telerik:NavigationNode Text="Electronic Drumsets"></telerik:NavigationNode>

<telerik:NavigationNode Text="E - Drum Sound Modules"></telerik:NavigationNode>

<telerik:NavigationNode Text="E - Drum Bass Pads"></telerik:NavigationNode>

<telerik:NavigationNode Text="E - Drum Tom Pads"></telerik:NavigationNode>

<telerik:NavigationNode Text="E - Drum Snare Pads"></telerik:NavigationNode>

<telerik:NavigationNode Text="E - Drum Cymbal Pads"></telerik:NavigationNode>

</Nodes>

</telerik:NavigationNode>

<telerik:NavigationNode Text="Drum Thrones"></telerik:NavigationNode>

</Nodes>

</telerik:NavigationNode>

<telerik:NavigationNode Text="Percussions">

<Nodes>

<telerik:NavigationNode Text="Percussion sets"></telerik:NavigationNode>

<telerik:NavigationNode Text="Congas"></telerik:NavigationNode>

<telerik:NavigationNode Text="Bongos"></telerik:NavigationNode>

<telerik:NavigationNode Text="Djembes"></telerik:NavigationNode>

<telerik:NavigationNode Text="Cajons, Cajintos, Yambus"></telerik:NavigationNode>

<telerik:NavigationNode Text="Hand Drums"></telerik:NavigationNode>

<telerik:NavigationNode Text="Tambourines"></telerik:NavigationNode>

<telerik:NavigationNode Text="Maracas"></telerik:NavigationNode>

</Nodes>

</telerik:NavigationNode>

<telerik:NavigationNode Text="Pianos & E-Pianos">

<Nodes>

<telerik:NavigationNode Text="Grand pianos"></telerik:NavigationNode>

<telerik:NavigationNode Text="Upright pianos"></telerik:NavigationNode>

<telerik:NavigationNode Text="Disklavier"></telerik:NavigationNode>

<telerik:NavigationNode Text="Silent pianos"></telerik:NavigationNode>

<telerik:NavigationNode Text="Hybrit pianos"></telerik:NavigationNode>

<telerik:NavigationNode Text="Digital pianos"></telerik:NavigationNode>

<telerik:NavigationNode Text="State pianos"></telerik:NavigationNode>

<telerik:NavigationNode Text="Accessories"></telerik:NavigationNode>

</Nodes>

</telerik:NavigationNode>

<telerik:NavigationNode Text="Strings">

<Nodes>

<telerik:NavigationNode Text="Violins and Violas"></telerik:NavigationNode>

<telerik:NavigationNode Text="Electric Violins and Violas"></telerik:NavigationNode>

<telerik:NavigationNode Text="Accessories for Violins and Violas"></telerik:NavigationNode>

<telerik:NavigationNode Text="Electric Cellos"></telerik:NavigationNode>

<telerik:NavigationNode Text="Double Basses"></telerik:NavigationNode>

</Nodes>

</telerik:NavigationNode>

<telerik:NavigationNode Text="Wind Instruments">

<Nodes>

<telerik:NavigationNode Text="Saxophones"></telerik:NavigationNode>

<telerik:NavigationNode Text="Trumpets"></telerik:NavigationNode>

<telerik:NavigationNode Text="Flugelhorns"></telerik:NavigationNode>

<telerik:NavigationNode Text="Trombones"></telerik:NavigationNode>

<telerik:NavigationNode Text="Horns"></telerik:NavigationNode>

<telerik:NavigationNode Text="Flutes"></telerik:NavigationNode>

<telerik:NavigationNode Text="Clarinets"></telerik:NavigationNode>

</Nodes>

</telerik:NavigationNode>

<telerik:NavigationNode Text="Audio & PA">

<Nodes>

<telerik:NavigationNode Text="Loudspeakers"></telerik:NavigationNode>

<telerik:NavigationNode Text="Power Amplifiers"></telerik:NavigationNode>

<telerik:NavigationNode Text="Intecoms"></telerik:NavigationNode>

<telerik:NavigationNode Text="Audiotools"></telerik:NavigationNode>

<telerik:NavigationNode Text="Microphones"></telerik:NavigationNode>

<telerik:NavigationNode Text="Mixing Desks"></telerik:NavigationNode>

<telerik:NavigationNode Text="Studio Monitors"></telerik:NavigationNode>

<telerik:NavigationNode Text="Digital Converters"></telerik:NavigationNode>

<telerik:NavigationNode Text="Synchronizers"></telerik:NavigationNode>

<telerik:NavigationNode Text="Controllers"></telerik:NavigationNode>

<telerik:NavigationNode Text="Audio Interface"></telerik:NavigationNode>

<telerik:NavigationNode Text="MIDI Equipment"></telerik:NavigationNode>

</Nodes>

</telerik:NavigationNode>

<telerik:NavigationNode Text="Lighting & Stage">

<Nodes>

<telerik:NavigationNode Text="Club & Disco"></telerik:NavigationNode>

<telerik:NavigationNode Text="Stage"></telerik:NavigationNode>

<telerik:NavigationNode Text="Cinema & TV"></telerik:NavigationNode>

<telerik:NavigationNode Text="Architectural & Decorative Lighting"></telerik:NavigationNode>

<telerik:NavigationNode Text="Controller & Dimmer"></telerik:NavigationNode>

<telerik:NavigationNode Text="Lighting Stands & Grip"></telerik:NavigationNode>

</Nodes>

</telerik:NavigationNode>

<telerik:NavigationNode Text="Video & Multimedia">

<Nodes>

<telerik:NavigationNode Text="Camera support"></telerik:NavigationNode>

<telerik:NavigationNode Text="Video Processing"></telerik:NavigationNode>

<telerik:NavigationNode Text="Displays"></telerik:NavigationNode>

<telerik:NavigationNode Text="Projectors"></telerik:NavigationNode>

<telerik:NavigationNode Text="Screens"></telerik:NavigationNode>

<telerik:NavigationNode Text="Interactive Screens"></telerik:NavigationNode>

</Nodes>

</telerik:NavigationNode>

<telerik:NavigationNode Text="Cables & Connectors">

<Nodes>

<telerik:NavigationNode Text="Instrumental Cables"></telerik:NavigationNode>

<telerik:NavigationNode Text="Microphone Cables"></telerik:NavigationNode>

<telerik:NavigationNode Text="Guitar Cables"></telerik:NavigationNode>

<telerik:NavigationNode Text="XLR connectors"></telerik:NavigationNode>

<telerik:NavigationNode Text="Jack"></telerik:NavigationNode>

<telerik:NavigationNode Text="Banana Connectors"></telerik:NavigationNode>

</Nodes>

</telerik:NavigationNode>

<telerik:NavigationNode Text="Accessories">

<Nodes>

<telerik:NavigationNode Text="Stands"></telerik:NavigationNode>

<telerik:NavigationNode Text="Seats and Stools"></telerik:NavigationNode>

<telerik:NavigationNode Text="Metronomes and Tuners"></telerik:NavigationNode>

<telerik:NavigationNode Text="Batteries and Charging sets"></telerik:NavigationNode>

<telerik:NavigationNode Text="Clothing"></telerik:NavigationNode>

</Nodes>

</telerik:NavigationNode>

</Nodes>

</telerik:RadNavigation>

Regards,
Marin Bratanov
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.