Formatting sub-arrows

[DanM]

In the initialization of my SmartMenus ul, I have the following:

$("#main-menu-mobile").smartmenus({
  subIndicators: true,
  subIndicatorsPos: "append",
  subIndicatorsText: ""
});

In my CSS, I have:

.main-menu ul li a span.sub-arrow {
  background: url(/Resources/right-arrow-white.png) no-repeat center;
  height: 34px;
  margin-top: -17px;
  position: absolute;
  right: 2px;
  top: 50%;
  width: 20px;
}

My problem is that the arrow wants to overlap the text of the link, if the text is the full width of the list item. I realize that’s a consequence of absolute positioning. I’ve tried everything I know about CSS to add margin or padding to various parts of the link, but without success. Is there another way to style an image that is used for the sub-arrow span so there is always a gap of some amount between the right edge of the text and the left edge of the image? Thanks!

[admin]

You can target items that have sub menus and add them some right padding to make room for the sub menu indicator like this:

.main-menu ul li a.has-submenu {
  padding-right:30px;
}

Or, alternatively, you could use the subIndicatorsPos: "prepend" option and then use static position for the sub-arrow and float it to the right – something like:

.main-menu ul li a span.sub-arrow {
  float:right;
  background: url(/Resources/right-arrow-white.png) no-repeat center;
  height: 34px;
  width: 20px;
}

Or if this is just for horizontal main menu items, you could use subIndicatorsPos: "append" and something like:

.main-menu ul li a span.sub-arrow {
  display:inline-block;
  background: url(/Resources/right-arrow-white.png) no-repeat center;
  height: 34px;
  width: 20px;
}

[DanM]

Thank you! The first option worked well for me.

[jorge]

Hi..in my menu like Home… or another submenu are three little points is dectet in the html code span. sub-arrow
I check all scripts but doesent find. Idont need it because the class caret is ok
What i can do?

[jorge]

i found in the iquery.smartmenu.js on
line 143

if (this.opts.subIndicators) {
   this.$subArrow = $('<span/>').addClass('sub-arrow');

when i /* comment this line the points are gone but the menue not work anymore
so i doesn`t whats happend about this points …
i works also with bootstrap…
Have anybody any idea?

[admin]

You don’t need to modify the script core. You can disable the automatically created sub indicators by using the subIndicators: false option.

[Author]

Posts