Telerik Forums / UI for ASP.NET AJAX Forum / Navigation /

More RadNavigation css

Telerik UI for ASP.NET AJAX
Resources Buy Try

3 posts, 0 answers

Kjell

223 posts

Member since:
May 2011
Posted 12 Apr 2018 Link to this post

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>

dump.jpg
Kjell

223 posts

Member since:
May 2011

Posted 15 Apr 2018 in reply to Kjell Link to this post

I've solved it with RadNavigation css

However, I have left how to change the hamburger icon / color on it in css?
Marin Bratanov
Admin

4713 posts
Posted 17 Apr 2018 Link to this post

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.

change-color.png

More RadNavigation css

Kjell

Kjell

Marin Bratanov