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
0

Kjell
Top achievements
Rank 1
Iron
Iron
answered on 15 Apr 2018, 12:39 PM
I've solved it with RadNavigation css
However, I have left how to change the hamburger icon / color on it in css?
0
Hi Kjell,
Regards,
Marin Bratanov
Progress Telerik
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.