Line Issue

[Kenny]

I'm running into a line after closing the mobile menu before it's clicked you can find the arrow in random places on the page. One image shows after the menu being opened the other is before the menu is clicked on. This only happens on mobile

[Dimitar]

Hello,

The issue is not reproducible on my side. In order to be able to assist you further, we would need some details about the respective scenario for replication. Could you provide a snippet which could be used for issue reproduction? In addition, could you specify the OS type and version of the mobile device as well as the browser used and its version?

Regards,
Dimitar
Telerik

[Kenny]

<div class="OneThirdMenu">
    <asp:HyperLink ID="TAGWBGLogo_Header_HyperLink" runat="server" NavigateUrl="~/Default.aspx">
        <asp:Image ID="TAGWBGLogo_Header_Image" runat="server" ImageUrl="~/images/GI-Logo.png" CssClass="NavLogo" />
    </asp:HyperLink>
</div>
<nav class="TwoThirdsMenu">
    <telerik:RadMenu ID="HeaderControl_RadMenu" runat="server" ShowToggleHandle="true" EnableTextHTMLEncoding="true" RenderMode="Mobile"

CssClass="MobileMenu" DefaultGroupSettings-Flow="Horizontal">
        <Items>

            <telerik:RadMenuItem NavigateUrl="~/Default.aspx" Text="Business solutions"></telerik:RadMenuItem>
            <telerik:RadMenuItem NavigateUrl="~/landing/wbg/HistoricTriangle/Default.aspx" Text="Incentives and

products"></telerik:RadMenuItem>
            <telerik:RadMenuItem NavigateUrl="../PopularThingsToDo/Default.aspx" Text="Contact us"></telerik:RadMenuItem>
            <telerik:RadMenuItem NavigateUrl="../Reviews.aspx" Text="About us"></telerik:RadMenuItem>
            <telerik:RadMenuItem NavigateUrl="../Reviews.aspx" Text="Career opportunities"></telerik:RadMenuItem>
            <telerik:RadMenuItem NavigateUrl="../Reviews.aspx" Text="Activate your certificate"></telerik:RadMenuItem>

        </Items>
    </telerik:RadMenu>
    <div class="DesktopMenu">
        <a onclick="return ewt.trackLink({name:'gi_topmenu_businesssolutions',type:'click',link:this  });" title="Business solutions">
            <asp:LinkButton ID="Business_Solutions_LinkButton" runat="server" PostBackUrl="~/Default.aspx">
                <div class="OneSixthMenu">
                    BUSINESS<br /><span>solutions</span>
                </div>
            </asp:LinkButton>
        </a>
        <a onclick="return ewt.trackLink({name:'gi_topmenu_incentivesandproducts',type:'click',link:this  });" title="Incentives and

products">
            <asp:LinkButton ID="IncentivesAndProducts_LinkButton" runat="server"

PostBackUrl="~/landing/wbg/HistoricTriangle/Default.aspx">
                <div class="OneSixthMenu">
                    INCENTIVES<br /><span>and products</span>
                </div>
            </asp:LinkButton>
        </a>
        <a onclick="return ewt.trackLink({name:'gi_topmenu_contactus',type:'click',link:this  });" title="Contact us">
            <asp:LinkButton ID="ContactUs_LinkButton" runat="server" PostBackUrl="~/landing/wbg/PopularThingsToDo/Default.aspx">
                <div class="OneSixthMenu">
                    CONTACT<br /><span>us</span>
                </div>
            </asp:LinkButton>
        </a>
        <a onclick="return ewt.trackLink({name:'gi_topmenu_aboutus',type:'click',link:this  });" title="About us">
            <asp:LinkButton ID="AboutUs_LinkButton" runat="server" PostBackUrl="~/landing/wbg/Reviews.aspx">
                <div class="OneSixthMenu">
                    ABOUT <br /><span>us</span>
                </div>
            </asp:LinkButton>
        </a>
        <a onclick="return ewt.trackLink({name:'gi_topmenu_careeropportunities',type:'click',link:this  });" title="Career

opportunities">
            <asp:LinkButton ID="CareerOpportunities_LinkButton" runat="server" PostBackUrl="#">
                <div class="OneSixthMenu">
                    CAREER <br /><span>opportunities</span>
                </div>
            </asp:LinkButton>
        </a>
        <a onclick="return ewt.trackLink({name:'gi_topmenu_activateyourcertificate',type:'click',link:this  });" title="Activate your

certificate">
            <asp:LinkButton ID="LinkButton1" runat="server" PostBackUrl="#">
                <div class="OneSixthMenu Green Last">
                    <span class="Green"> activate your </span><br /> CERTIFICATE <i class="fa fa-external-link"></i>
                </div>
            </asp:LinkButton>
        </a>
    </div>
</nav>


CSS -

.OneThirdMenu
{
    width: 25%;
    float: left;
    text-align: left;
}

.TwoThirdsMenu
{
    width: 75%;
    float: left;
    position: relative;
}

.MobileMenu
{
    display: none !important;
}

@media only screen and (max-width: 1024px)
{
    .ContentWrapper
    {
        width: 95%;
        margin: 0px auto;
    }
    .TwoThirds
    {
        width: 62%;
    }
    h1
    {
        font-size: 1.5625em !important; /* 25px */
    }
    h3
    {
        font-size: 1.125em !important; /* 18px */
    }

    .PageHeading
    {
        font-size: 2.5em !important; /* 40px */
    }

    .OneFourth
    {
        float: left;
        width: 40%;
        margin-right: 1%;
        text-align: center;
    }
    .GetawayBoxes
    {
        width: 26%;
        margin-right: 2%;
        min-height: 240px !important;
        max-height: 240px !important;
    }
    .MediaBoxes
    {
        width: 27%;
        min-height: 320px !important;
        max-height: 320px !important;
    }

    .MobileMenu
    {
        display: block !important;
        text-align: right !important;
        float: right;
        font-family: 'Source Sans Pro', sans-serif;
        margin: 5px;
    }

    .MobileMenu ul li
    {
        color: #000000 !important;
    }
    .MobileMenu ul li:hover
    {
        color: #f95d15 !important;
    }

    .DesktopMenu
    {
        display: none !important;
    }
    .OneSixthMenu
    {
        width: 80%;
        float: left;
    }
    .KeyPointsBoxes
    {
        min-height: 320px;
        max-height: 320px;
    }
    .HeaderVideo
    {
        width: 50%;
    }

}

[Dimitar]

Hi,

The issue comes from the custom styles applied by the MobileMenu class directly on the mobile RadMenu. You change the display property in a way that makes the respective line and arrow elements visible. To test this, just remove the MobileMenu class from the RadMenu.

The easiest way to show/hide the mobile menu depending on the screen size would be to wrap the mobile RadMenu in a div and toggle the display property for that div, instead.

Regards,
Dimitar
Telerik