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
Top achievements
Rank 1
Iron
Iron
Kjell asked on 12 Apr 2018, 01:09 PM

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

Sort by
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
Marin Bratanov
Telerik team
answered on 17 Apr 2018, 06:27 AM
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.
Tags
Navigation
Asked by
Kjell
Top achievements
Rank 1
Iron
Iron
Answers by
Kjell
Top achievements
Rank 1
Iron
Iron
Marin Bratanov
Telerik team
Share this question
or