Menu item has submenu - Icon

Stagger Lee
1796 Posts
Stagger Lee posted this 12 June 2016

Can you use pseudo-element ::after instead of ::before ?

There is not much logic to have icon before menu item on responsive menu, looks ugly.
But it is not main reason for asking. Position:absolute, or float:right on icon makes lot of problems in IE11 and below.

Just look how menu icons here look on Chrome and IE11:
http://templates.themler.com/Themes/Preview?id=2162320

Can you use pseudo-element ::after instead of ::before ? There is not much logic to have icon before menu item on responsive menu, looks ugly. But it is not main reason for asking. Position:absolute, or float:right on icon makes lot of problems in IE11 and below. Just look how menu icons here look on Chrome and IE11: http://templates.themler.com/Themes/Preview?id=2162320

Last edited 12 June 2016 by Stagger Lee

Vote to pay developers attention to this features or issue.
7 Comments
Order By: Standard | Newest
Stagger Lee
1796 Posts
Stagger Lee posted this 12 June 2016

Anyway, I decided to remove icon in IE11. Tweak after tweak and you ruin it for other more normal browsers.

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */  
   .bd-menu-17.nav-pills .bd-menuitem-22 > a:before, .bd-menu-17.nav-pills .bd-menuitem-22 > a:link:before, .bd-menu-17.nav-pills .bd-menuitem-22 > a:visited:before {
    content: none !important;
}
}

Anyway, I decided to remove icon in IE11. Tweak after tweak and you ruin it for other more normal browsers. @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* IE10+ specific styles go here */ .bd-menu-17.nav-pills .bd-menuitem-22 > a:before, .bd-menu-17.nav-pills .bd-menuitem-22 > a:link:before, .bd-menu-17.nav-pills .bd-menuitem-22 > a:visited:before { content: none !important; } }
Support Team
Support Team posted this 16 June 2016

Hi,

I've added your request to our wish list.
But this may help in case of specific icon alignment. This feature requires creating of different elements depending of the icon alignment and adding of the alignment option itself.

Thank you,
Olivia

Hi, I've added your request to our wish list. But this may help in case of specific icon alignment. This feature requires creating of different elements depending of the icon alignment and adding of the alignment option itself. Thank you, Olivia
Stagger Lee
1796 Posts
Stagger Lee posted this 16 June 2016

Can you explain it with other words ? I am not sure if I understand.

Can you explain it with other words ? I am not sure if I understand.

Last edited 16 June 2016 by Stagger Lee

Support Team
Support Team posted this 20 June 2016

Hi,

I'm passing this issue to developers for closer analyses, we will let you know when we receive the results.

Thank you,
Themler Team

Hi, I'm passing this issue to developers for closer analyses, we will let you know when we receive the results. Thank you, Themler Team
Support Team
Support Team posted this 28 June 2016

Hi,

We receive a response from our developers. The issue happens because there is problem in IE. To fix the reported issue you can use a workarround. Add custom CSS code to your theme.

  1. Open Settings on Ribbon Home tab.
    settings-button-on-ribbon.jpg
  2. Add Custrom CSS code
    additional-CSS.jpg

Code:

.bd-menu-1.nav-pills .bd-menuitem-2 > a > span {
 margin-right: 23px;   
}

.bd-menu-1.nav-pills .bd-menuitem-2:last-child > a > span {
 margin-right: 0px;
}

.bd-menu-1.nav-pills .bd-menuitem-2 > a:before {
    margin-left: 0px !important;
}

This should help. Please keep us posted about the progress.

Thank you,
Themler Team

Hi, We receive a response from our developers. The issue happens because there is problem in IE. To fix the reported issue you can use a workarround. Add custom CSS code to your theme. 1. Open Settings on Ribbon Home tab. !settings-button-on-ribbon.jpg! 2. Add Custrom CSS code !additional-CSS.jpg! Code: .bd-menu-1.nav-pills .bd-menuitem-2 > a > span { margin-right: 23px; } .bd-menu-1.nav-pills .bd-menuitem-2:last-child > a > span { margin-right: 0px; } .bd-menu-1.nav-pills .bd-menuitem-2 > a:before { margin-left: 0px !important; } This should help. Please keep us posted about the progress. Thank you, Themler Team
Stagger Lee
1796 Posts
Stagger Lee posted this 29 June 2016

If I hit it right it dramatically change menu item spacing in all browsers. It is used together with float:right, or not ?
Cannot get it to work.

If I hit it right it dramatically change menu item spacing in all browsers. It is used together with float:right, or not ? Cannot get it to work.
Support Team
Support Team posted this 30 June 2016

Hello Stagger Lee,
to make the CSS be applied to IE only you may use media queries or conditional comments.
Refer to following articles for more details
http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer
https://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/

regards,
Aileen

Hello Stagger Lee, to make the CSS be applied to IE only you may use media queries or conditional comments. Refer to following articles for more details http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer https://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/ regards, Aileen
You must log in or register to leave comments