Bullets only on menu item with submenu

Vitaliy WD
198 Posts
Vitaliy WD posted this 28 January 2015

Hi.

It would be great to insert bullets only on menu item with submenu.
And also to insert bullet not only at right or left (align), but also bottom at menu item.

Is it possible?

I think, that it is important UX feature.

To users: please vote for this topic if you have interest in this feature.

Here is example (bullets only on menu item with submenu):

bullets only on menu item with submenu

Here is example (bullets bottom at menu item):

bullets bottom at menu item

Hi. It would be great to insert bullets only on menu item with submenu. And also to insert bullet not only at right or left (align), but also bottom at menu item. Is it possible? I think, that it is important UX feature. To users: please vote for this topic if you have interest in this feature. Here is example (bullets only on menu item with submenu): ![bullets only on menu item with submenu][1] Here is example (bullets bottom at menu item): ![bullets bottom at menu item][2] [1]: http://s3.postimg.org/ij98atlwj/submenu_bullets_v2.png [2]: http://s14.postimg.org/ccnvcc8jl/submenu_bullets_bottom.png

Last edited 28 January 2015 by Vitaliy WD

Vote to pay developers attention to this features or issue.
13 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 28 January 2015

Hello

It would be great to insert bullets only on menu item with submenu. And also to insert bullet not only at right or left (align), but also bottom at menu item.

Currently both these features are not supported.
I've added them to our wish list.

As for the icon at the top or bottom of the menu item, there is a little trick that can be used now:

  1. Horizontal Menu control >> Items >> Icon >> Shape >> Options >> Arrange: set position to "absolute"
  2. Horizontal Menu control >> Items >> Icon >> Shape >> Options >> Size and Position:

    • set top or bottom value (negative values are allowed)
    • set left and right to "0" to center the icon

menu-icon.png

Thank you,
Olivia

Hello > It would be great to insert bullets only on menu item with submenu. And also to insert bullet not only at right or left (align), but also bottom at menu item. Currently both these features are not supported. I've added them to our wish list. As for the icon at the top or bottom of the menu item, there is a little trick that can be used now: 1. Horizontal Menu control >> Items >> Icon >> Shape >> Options >> Arrange: set position to "absolute" 2. Horizontal Menu control >> Items >> Icon >> Shape >> Options >> Size and Position: - set **top** or **bottom** value (negative values are allowed) - set **left** and **right** to "0" to center the icon !menu-icon.png! Thank you, Olivia
Vitaliy WD
198 Posts
Vitaliy WD posted this 31 January 2015

Thanks for reply and trick, Olivia.

Hope that "bullets only on menu item with submenu" feature will be available in nearest time - it's most of logical and user friendly function in menus with sub items.

To users: please don't forget to vote for this topic if you have interest in this feature.

Thanks for reply and trick, Olivia. Hope that "bullets only on menu item with submenu" feature will be available in nearest time - it's most of logical and user friendly function in menus with sub items. **To users: please don't forget to vote for this topic if you have interest in this feature.**
Stagger Lee
1803 Posts
Stagger Lee posted this 31 March 2015

I need this one. In matter of facts almost all websites need this. I use this manually, dont know if it can help developers of Themler:

It only need one new class "menu-item-has-children" and in CSS use SVG icon as you wish.
And ::before, ::after in CSS for SVG icons. Why dont u use that already exist in WP core ?

http://codex.wordpress.org/Function_Reference/wp_nav_menu#How_to_add_a_parent_class_for_menu_item

And:

.menu-parent-item::after {svg icon something here}

I need this one. In matter of facts almost all websites need this. I use this manually, dont know if it can help developers of Themler: It only need one new class "menu-item-has-children" and in CSS use SVG icon as you wish. And ::before, ::after in CSS for SVG icons. Why dont u use that already exist in WP core ? [http://codex.wordpress.org/Function_Reference/wp_nav_menu#How_to_add_a_parent_class_for_menu_item][1] [1]: http://codex.wordpress.org/Function_Reference/wp_nav_menu#How_to_add_a_parent_class_for_menu_item And: .menu-parent-item::after {svg icon something here}

Last edited 31 March 2015 by Stagger Lee

Stagger Lee
1803 Posts
Stagger Lee posted this 31 March 2015

Meaning above is a bit unfinished. I add arrows to parent items with submenus via menu item ID. Style them directly via a class that this parent use only and add one SVG icon. But as it is now i have no clue how to do it, Themler doesnt add ID to item classes. Have to find some other functions.php snippet.

So did I with Artisteer themes. Set it once, and forget it, and dont change menu items in menu manager anymore.

Meaning above is a bit unfinished. I add arrows to parent items with submenus via menu item ID. Style them directly via a class that this parent use only and add one SVG icon. But as it is now i have no clue how to do it, Themler doesnt add ID to item classes. Have to find some other functions.php snippet. So did I with Artisteer themes. Set it once, and forget it, and dont change menu items in menu manager anymore.

Last edited 31 March 2015 by Stagger Lee

shaulhadar
404 Posts
shaulhadar posted this 05 December 2015

I once had also a fix in artisteer for this....i had a script that added an icon oly for menu items with children....i willl try and look if it can work in themler also.....

I once had also a fix in artisteer for this....i had a script that added an icon oly for menu items with children....i willl try and look if it can work in themler also.....
Stagger Lee
1803 Posts
Stagger Lee posted this 05 December 2015

I have done snippet. Will give it later, it is on other computer.

I have done snippet. Will give it later, it is on other computer.
Stagger Lee
1803 Posts
Stagger Lee posted this 05 December 2015

I had snippet for functions.php but not needed. Much simplier to add class to menu items in WP backend. It is one time work, set it and forget it. Same effect as with code snippet.

  • Add class to all menu items holding subitems: has-children.
  • Add CSS code:

    li.bd-menuitem-1.has-children a::after {
    color: #ddd;
    content: '\1b8';
    font-family: 'Billion Web Font';
    font-size: 14px;
    margin:0 0 0 3px;
    }
    li.has-children a:hover::after {
    color: #d9534f !important;
    }
    li.bd-menuitem-2 a::after {
    content: none !important;
    }

Adapt it by menu name and icon svg code.

I had snippet for functions.php but not needed. Much simplier to add class to menu items in WP backend. It is one time work, set it and forget it. Same effect as with code snippet. - Add class to all menu items holding subitems: has-children. - Add CSS code: li.bd-menuitem-1.has-children a::after { color: #ddd; content: '\1b8'; font-family: 'Billion Web Font'; font-size: 14px; margin:0 0 0 3px; } li.has-children a:hover::after { color: #d9534f !important; } li.bd-menuitem-2 a::after { content: none !important; } Adapt it by menu name and icon svg code.
Stagger Lee
1803 Posts
Stagger Lee posted this 05 December 2015

This one is better:

.bd-menuitem-1.has-children > a::after {
    color: #ddd;
    content: '\1b8';
    font-family: 'Billion Web Font';
    font-size: 14px;
    margin:0 0 0 3px;
}
.bd-menuitem-1.has-children > a:hover::after {
    color: #d9534f;
}

This one is better: .bd-menuitem-1.has-children > a::after { color: #ddd; content: '\1b8'; font-family: 'Billion Web Font'; font-size: 14px; margin:0 0 0 3px; } .bd-menuitem-1.has-children > a:hover::after { color: #d9534f; }

Last edited 05 December 2015 by Stagger Lee

shaulhadar
404 Posts
shaulhadar posted this 06 December 2015

Hi Stagger Lee, I tried your last snippet, and for some reason i can't see any difference...

I copied and pasted it into the additional css box in themler, and put some menu items as a dropdown, but i can't see any icon before the master nav item..

Is there any additional thing that needs to be done for this to work? i see you are using the builtin themler fonts, so i thought it is supposed to work straight from the start, but for some reason i can see no difference...

any help would be great man,
THanks :)

Hi Stagger Lee, I tried your last snippet, and for some reason i can't see any difference... I copied and pasted it into the additional css box in themler, and put some menu items as a dropdown, but i can't see any icon before the master nav item.. Is there any additional thing that needs to be done for this to work? i see you are using the builtin themler fonts, so i thought it is supposed to work straight from the start, but for some reason i can see no difference... any help would be great man, THanks :)
Stagger Lee
1803 Posts
Stagger Lee posted this 06 December 2015

Go to the menu management in WordPress backend and give all desired menu items custom class "has-children".
if you dont see option for custom class check in options at the top if it is made visible.

Go to the menu management in WordPress backend and give all desired menu items custom class "has-children". if you dont see option for custom class check in options at the top if it is made visible.
shaulhadar
404 Posts
shaulhadar posted this 07 December 2015

Hi Stagger, I think it works now, but i can't find the right codes for the icons for some reason.
I do a chrome inspect on them in the docs for the icons, but it finds weird stuff like /f049 and this doesn't work at all and shows weird stuff..

you used a \1b8 code... where did you find it and the list of those??

Thanks for your help man :)

Hi Stagger, I think it works now, but i can't find the right codes for the icons for some reason. I do a chrome inspect on them in the docs for the icons, but it finds weird stuff like /f049 and this doesn't work at all and shows weird stuff.. you used a \1b8 code... where did you find it and the list of those?? Thanks for your help man :)
Stagger Lee
1803 Posts
Stagger Lee posted this 07 December 2015

I know. I wrote long time ago they should improve documentation and add icon CSS codes beside names. As Fontawesome does.

Copy name of desired icon and in some code editor software (I use Adobe DW) search & find this word in theme folder. There you have your code. I dont know any faster way.

I know. I wrote long time ago they should improve documentation and add icon CSS codes beside names. As Fontawesome does. Copy name of desired icon and in some code editor software (I use Adobe DW) search & find this word in theme folder. There you have your code. I dont know any faster way.
Support Team
Support Team posted this 09 December 2015

Hi guys,

Try the following code:

.bd-menuitem-1.item-icon > a::after {
        font-family: 'Billion Web Font';
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    text-align: center;
    text-transform: none;
    width: 1em;
    content: '\23f';
}
.bd-menuitem-1.item-icon > a:hover::after {
    color: #d9534f;
}

It should work.

In general, you can also try using icon class directly:

item-icon.png

and then use item-icon class to adjust the position of the icon:

.item-icon:before
{
...
}

Thank you,
Olivia

Hi guys, Try the following code: <pre> .bd-menuitem-1.item-icon > a::after { font-family: 'Billion Web Font'; font-style: normal; font-weight: normal; text-decoration: inherit; text-align: center; text-transform: none; width: 1em; content: '\23f'; } .bd-menuitem-1.item-icon > a:hover::after { color: #d9534f; } </pre> It should work. In general, you can also try using icon class directly: !item-icon.png! and then use `item-icon` class to adjust the position of the icon: <pre> .item-icon:before { ... } </pre> Thank you, Olivia

Last edited 09 December 2015 by Support Team

You must log in or register to leave comments