← Back to support

Custom Bullet Styles

Resolved

Requested: 1 year and 8 months ago

My Menu looks like this https://i.imgur.com/fNW8S5t.jpg

Here “Blogging” is the Highest Level Parent Element.

I don’t want a bullet point for the highest level parent.

Also, I want the children of the highest level parent to be nested. Currently, it is at the same level as its children.

I want the circle bullet for the currently selected page to be replaced with an arrow pointing down. ▼

I want the circle bullet for all other pages to have an arrow pointing to the right. ▶

Hoping to get something like this

Blogging
▼ Start a Blog
▶ Food
▶ Fashion
▶ Blog Sites

Any help is appreciated.

OnPoint Plugins
1 year and 8 months ago
Hi Abhi,

You may convert the list bullets to arrows and adjust the indents with a bit of custom CSS.

#advanced_sidebar_menu-2-wrap ul li { list-style: none !important; } #advanced_sidebar_menu-2-wrap ul ul li { position: relative; padding-left: 15px } #advanced_sidebar_menu-2-wrap ul ul li::before { content: '▶'; position: absolute; left: 0; } #advanced_sidebar_menu-2-wrap ul ul li.current_page_item::before { transform: rotate( 90deg); } #advanced_sidebar_menu-2-wrap ul ul ul { margin: 0; }

If you would like to change all Advanced Sidebar – Pages menus on the site you could:
- Change the widget setting for Bullet Style to “none”.
- Use the following CSS instead.
.advanced-sidebar-menu ul li { list-style: none !important; } .advanced-sidebar-menu ul ul li { position: relative; padding-left: 15px } .advanced-sidebar-menu ul ul li::before { content: '▶'; position: absolute; left: 0; } .advanced-sidebar-menu ul ul li.current_page_item::before { transform: rotate( 90deg); } .advanced-sidebar-menu ul ul ul { margin: 0 !important; }

Have a great day!

New Response Cancel reply

You must be logged in to respond. Only PRO members are allowed to respond to support requests.