Add Menu Arrow

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

8/29/2023 4:33:11 AM
kok
Gravatar
Total Posts 47

Add Menu Arrow

Hi there,

How to add the Menu Arrow? As checked and try add this code "li.AspNet-Menu-WithChildren > a", but the Menu Arrow still not appear. 

Please guide.

Thanks.

 

8/29/2023 9:55:12 AM
Gravatar
Total Posts 3
Community Expert
Web Support Guru at i7MEDIA.

Re: Add Menu Arrow

Hello,

Would you mind sending a link to the site so that we can take a look?

8/29/2023 8:42:46 PM
kok
Gravatar
Total Posts 47

Re: Add Menu Arrow

Hi Joseph,

The site link: http://greenpolypack.hanwebfusion.com/about-us.aspx. Please advice.

Thanks.

8/30/2023 11:07:53 AM
Gravatar
Total Posts 216
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: Add Menu Arrow

Hi,

Based on the classes currently being used by the site, the following CSS will add a down arrow to root-level menu items with children:

li.has-popup > a::after {
position: absolute;
content: "";
border-top: 5px solid #31a19b;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
display: inline-block;
top: 10px;
right: 28px;
}
li.has-popup span.t {
padding-right: 44px;
}

You'll need to add additional similar CSS to make arrows show on sub-menus if you wind up having sub-menu flyouts.

Otherwise, if you want to use the .AspNet-Menu-WithChildren class you'll need to set that as the class for menu items with children in your theme.skin. To do this, first you need to look in your layout.master for the "SiteMenu" control, and find if it has a MenuSkinId="" property. If it does, then open the theme.skin and search for whatever Skin Id is between the "" quotes. If it doesn't, then open the theme.skin and search for the   <portal:SiteMenu> with the SkinId "SiteMenu" - that should be the default.

Once you've found the right menu, add the setting LiCssClassWithChildren="AspNet-Menu-WithChildren" - This should make that class render on your menu items with children, that way any CSS you add for that class will work!

Don't forget you may need to reset the app after changing the theme.skin for it to reload. To do this browse to /Admin/ServerInformation.aspx on your site and click the "restart application" button. If no button appears, you'll need to touch the web.config in your wwwroot - just open it and type a space anywhere and save, that will also restart the app.

Hope this helps.