Wrapper Css - Conflicting with RADMENU css

Posted by Community Admin on 04-Aug-2018 22:15

Wrapper Css - Conflicting with RADMENU css

All Replies

Posted by Community Admin on 14-Apr-2011 00:00

So when I added my 'name.css' to the Wrapper CSS class (Skin) it seems to pull 60% of my styles, the other 20% is being overwritten by SiteFinity's RadMenu.css!! Is there a way to tell the system not to from the RadMenu?


Posted by Community Admin on 15-Apr-2011 00:00

Hello Scott,

Applying CSS  to RadMenu should not cause any troubles, can you, please, make sure you've addressed the desired classes properly in your CSS? Another thing you might want to try is to create a customized CSS for RadMenu using our Visual Style Builder and test with it. Please inform me if the problems persist about the exact classes that do not get set, and maybe provide some screenshots and the .css file you're using, so that I can inspect this issue further.

Boyan Barnev
the Telerik team

Posted by Community Admin on 15-Apr-2011 00:00

The Radcontrol styles usually live in their own little world and don't bug anything else on the page.  They do this by prefixing the classes with "r" then, 2-3 letters of the control type....so .rm (radmenu), .rlb(RadListBox).  There shouldnt be any global element defining.

So if the Radmenu is overriding some styles you have...see if your styles begin with .rm?

If not use firebug to see the offending style overlap and if possible, like Boyan said, attach a screenshot?

Posted by Community Admin on 18-Apr-2011 00:00


The suggested approach is to use the specific css selectors, so you do not mix styles. It is possible that there is some mismatch with general css classes that applies for some elements link  "a"

Ivan Dimitrov
the Telerik team

Posted by Community Admin on 19-Apr-2011 00:00

Attached is the CSS I am using to control the Nav as well as a screendshot using Firebug. Two of my biggest problems are:

1.) I can't get the list items in the dropdown to become 2 lines Instead of one.
2.) I need to have the page that is active, be highlighted in RED in the nav. I added '.RadMenu .rmHorizontal .rmFocused' - but it doesn't seem to work.

* note - I did try the 'Telerik Visual Style Builder' - as a second alternative, but the styles it spit out didn't have any hover states, nor the right fonts & padding. (even though I addressed them in the editor).

So I am back to using my original css - which is below, as it seems to be the closest.

I have attached 2 screenshots as well:
Corrected - Nav (what I am trying to achieve)
Sitefinity - nav - problems (what I am currently seeing)

/* -- Navigation    
--------------------------------------------------------------------------------- */
div.nav float: right; width: 440px; margin: 42px 0 0 0;
div.nav, div.nav ul list-style: none;
div.nav ul margin: 0; padding: 0 0 0 0;
.RadMenu .rmHorizontal .rmText padding: 0 ;
.RadMenu rmLink padding: 0; margin: 0;
.rmLink rmRootLink rmExpanded color: #ee3124;
.RadMenu .rmHorizontal .rmFocused color: #ee3124!important;
div.nav li float: left;
div.nav li a margin: 0; padding: 7px 11px 7px 8px !important; display: block; font: normal .75em/1em Arial, Helvetica, sans-serif; color: #231f20; text-decoration: none; text-transform: capitalize;
div.nav li a:hover,
div.nav li a.current color: #ee3124;
/* second-level lists */
div.nav li ul margin: 0 0 0 -1000em; padding: 16px 0 20px 0!important; width: 116px; position: absolute; background: url(../../images/bg-nav.png) bottom left;
div.nav li ul li    width: 116px; display: block;
div.nav li ul li a  margin: 0; padding: 6px 12px 6px 18px !important ; color: #636466; font: normal .7em/1em  Arial, Helvetica, sans-serif; text-transform: capitalize; 
div.nav li ul li a:hover color: #ee3124;
/* third-and-above-level lists */
div.nav li ul ul    margin: -1em 0 0 -1000em;
div.nav li:hover ul ul,
div.nav li.sfhover ul ul margin-left: -1000em;
/* lists nested under hovered list items */
div.nav li:hover ul, div#nav li.sfhover ul margin: 1px 0 0 -15px;
div.nav li li:hover ul, div#nav li li.sfhover ul margin: -25px 0 0 270px;

Posted by Community Admin on 19-Apr-2011 00:00

Okay. I found solution to the wrapping issue. 'white-space:normal' - which I have never knew existed. Now it works.

So, my last problem is getting the Hover color to stay highlighted on FOCUS. Any help would be appreciated. 

Posted by Community Admin on 19-Apr-2011 00:00

So with the BUILT-IN nav control you want to know what the current node is to style it right?


Posted by Community Admin on 19-Apr-2011 00:00

Well, in the early versions of SiteFinity (where I left my sanity) :) We were able to highlight the active page with a simple CSS class (below):

 .RadMenu .rmHorizontal .rmFocused

However I am not getting any response when viewing my pages. After reviewing this POST, I get the feeling its a little more involved?? Is this correct?

Posted by Community Admin on 19-Apr-2011 00:00

I haven't used the built-in nav yet, but from my understanding IN THAT POST they have not built in the ability to denote the current page via a CSS class.  So in the current menu you really have no idea what the current node is unless you create a usercontrol to do it yourself, and thus lose all the designer functionality of the provided nav control.

...dont shoot the messenger ;)

Posted by Community Admin on 19-Apr-2011 00:00

Hmm, that makes sense - at least its consistent with most of my 4.0 problems. Thanks for reaching out Steve!.

Maybe I will see if I can decipher that original post. Changing 'NULLS', and 'Variables' and all that non-sense.

Posted by Community Admin on 21-Apr-2011 00:00

Hello Steve and Scott,

Please, excuse us for the inconvenience. We have logged a feature request for the ability to add a CSS class for the currently active page in the built-in Navigation control. You can track its status and vote for it in PITS on this public URL . Please don't hesitate to write back if you have other questions.

Best wishes,
Boyan Barnev
the Telerik team

This thread is closed