[Solved] rmfocused not begin applied

[Larevenge]

Hi there,

Following your example on the TripXpert demo I wanted to style my menu exactly the same. Everything works fine, except that .rmfocused is not being applied. I have searched for hours, trying to add keyboard navigation to enable it, trying solutions from the forum like http://www.telerik.com/forums/how-to-get-rmfocused-on-menu-item or from stackoverflow but I was still not succesfull to enable this.

The thing i want to achieve is what I have attached as 1.png but the thing i get is what i attached as 2.png.

I use a masterpage with the following code:

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
    <div id="Header">
        <asp:ContentPlaceHolder ID="cphMenu" runat="server">
        </asp:ContentPlaceHolder>

 with the css applied to the header like this:

#Header {
    position: fixed;
    z-index: 10000;
    height: 100px;
    background: #fff;
    width: 100%;
}

 

 Then on the aspx page i have the following code:

<asp:Content ID="Content2" ContentPlaceHolderID="cphMenu" runat="server">
    <telerik:RadMen runat="server ID="MainNav EnableEmbeddedSkins="false CssClass="tx_desctop_nav_menu" nItemClick="RadMenu1_ItemClick">
    </telerik:RadMenu>
    <telerik:RadMen runat="server ID="MainNavMobile RenderMode="Mobile" ssClass="tx_mobile_nav_menu" nItemClick="RadMenu1_ItemClick">
    </telerik:RadMenu>
</asp:Content>

My code on the server side is this:

protected void RadMenu1_ItemClick(object sender, RadMenuEventArgs e)
{
    MpKlant.PageViews.Clear();
    RadPageView pageView = new RadPageView();
    pageView.ID = e.Item.Value;
    MpKlant.PageViews.Add(pageView);
    pageView.Selected = true;
}

 and loading the radmenu items like this:

RadMenuItem rmiNav2 = new RadMenuItem();
rmiNav2.Value = "MijnBerekeningen";
rmiNav2.Text = "Mijn berekeningen";
MainNav.Items.Add(rmiNav2);

I use the css classes from the example, but how can I get the .rmfocused being applied to the li.rmitem?

Kind Regards,

Corné

 

[Magdalena]

Hi Larevenge,

I have copied the code that you had provided into a sample project, but the appearance is different as in the 2.png. I am sending you this video that shows the result. Could you provide all CSS that is necessary to achieve the layout from the second screenshot? The other option is to open a support ticket to be able to provide us with a modified version of the tested project in the attachment.

Regards,
Magdalena
Telerik

[Larevenge]

Hi Magdalena,

I'm using the css from the TripXpert demo on your website, this is the specific part of the CSS which I use:

/*>>Desctop navigation*/
div.tx_desctop_nav_menu.RadMenu {
    font-size: 2em;
    position: absolute;
}

.tx_desctop_nav_menu.RadMenu .rmItem {
    height: 46px;
    padding: 1.2em 1.25em .5em 1.25em;
}

.tx_desctop_nav_menu.RadMenu .rmItem a {
    padding: 0;
}

.RadMenu .rmItem a:hover {
    color: #25a0da;
}

.tx_desctop_nav_menu.RadMenu .rmSelected a {
    color: #fff;
}

div.tx_desctop_nav_menu.RadMenu .rmSelected {
    height: 86px;
    background: #54a506;
    color: #ffffff;
}

div.tx_desctop_nav_menu.RadMenu .rmSelected a {
    border-top: 2px solid white;
    margin-top: -2px;
}

.tx_desctop_nav_menu.RadMenu .rmFocused a {
    color: #fff;
}

div.tx_desctop_nav_menu.RadMenu .rmFocused {
    height: 86px;
    background: #54a506;
    color: #ffffff;
}

div.tx_desctop_nav_menu.RadMenu .rmFocused a {
    border-top: 2px solid white;
    margin-top: -2px;
}

div.tx_desctop_nav_menu.RadMenu .rmRootGroup,
div.tx_desctop_nav_menu.RadMenu .rmRootGroup .rmItem {
    border: 0 none;
}
/*<<Desctop navigation*/

/*>>Mobile navigation*/
div.tx_mobile_nav_menu {
    float: right;
    margin: 20px 22px;
    display: none;
}

div.tx_mobile_nav_menu .rmRootToggle {
    color: #858585;
}

.RadMenuPopup.tx_mobile_nav_menu {
    z-index: 600;
}

@media only screen and (max-width: 768px) {
    div.tx_mobile_nav_menu {
        margin-top: .7em;
    }
}

@media only screen and (max-width: 1024px) {

    div.tx_desctop_nav_menu {
        display: none;
    }

    div.tx_mobile_nav_menu {
        display: block;
    }
}

[Magdalena]

Hi Larevenge,

I have applied all code that you have provided and when I inspected the .rmItem element, it covers all item text properly. It seems that there are some additional styles that are applied to the page.

I am sending you also the tested project in the attachment. Please, modify the project so the issue will be reproduced and open a support ticket to be able to send back to us the modified version so we will be able to test it locally and can assist you in more efficient way.

Regards,
Magdalena
Telerik