Bullets only on menu item with submenu

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

Thank you,
Olivia

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.

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}

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.

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 have done snippet. Will give it later, it is on other computer.

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.

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;
}

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 :)

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.

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 :)

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.

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:

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

.item-icon:before
{
...
}

Thank you,
Olivia

Last edited 09 December 2015 by Support Team

Intense and intimidating names work perfectly because they create pressure on opponents and make your team sound powerful, while for creative groups, mysterious and artistic names work better because they express imagination and depth, and for friend groups or online squads, you can choose names that sound fun, Darkhumor nicknames, dramatic, or even poetically dark depending on your style,