How to add submenu triangle to the right

Sparkling
1

Hi there,

How to add submenu triangle to the right?

Thank you,
Marko

2

Hello there,

I hope you are doing well today.

The triangle is already on the right but I may not have understood your request correctly, could you please clarify the issue?

Best Regards,
Support

3

Hi

It is visible in the main navbar emapuu with position right and angle down, but i would like to have it also where is the postitused with position to the right and angle also right, showing the way to the viited text. So for website users is it would be visible, that postitused has more menu links.

Hope it is now more clear.

Best regards,
Marko

4

hi Marko

Sorry but it’s not possible to change the current style and to be honest triangle as is right now is kind of standard, so it’s easy to understand for everyone

5

Hi Noda,

I do not want to change the style, i just want it to be also in the sub menu, that opens after someone hovers emapuu from sparkling theme main menu.

Right now
emapuu > postitused viited

Should be
emapuu > postitused > viited

With gratitude and love,
Marko

6

Hi again,

I want caret to show also in the drop down menu.

If i change dropdown menu colors and hide one triangle to let it be same color as menu color then this code would help me, but i would like to have better solution for that. Triangles are not aligned between menu and submenu with this code in my theme at the moment.

.dropdown:after {
transform:rotate(90deg);
position: absolute;
top: 17px;
right: 3px;
border-right: 4px solid transparent;
border-bottom: 4px solid #363636;
border-left: 4px solid transparent;
content: ‘’;
}

If we get above menu and submenu triangles aligned, then it is possible to remove existing dropdown with this code

.navbar .nav li.dropdown>a:focus .caret, .navbar .nav li.dropdown>a:hover .caret, .navbar .nav li.dropdown .caret {
border-top-color: transparent;
}

I am sure we can use better solution, just adding my own findings at the moment.

Thank you,
Marko

7

hello Marko

Sorry, not clearly understand your question but now i get it and i agree with you, please use this css:

.navbar-default .navbar-nav .dropdown-menu>li.menu-item-has-children a:before {
display: block;
position: absolute;
width: 5px;
height: 5px;
background: #77a464;
content: “”;
right: 0px;
top: 16px;
}

8

Hi Noda,

Thank you!

Now i have this:
.navbar-default .navbar-nav .dropdown-menu>li.menu-item-has-children:before {
display: block;
position: absolute;
content: ‘’;
right: 10px;
top: 16px;
border-style: solid;
border-width: 4px 0 4px 4px;
border-color: transparent transparent transparent #fff;
}

Topic resolved :slight_smile:

Best regards,
Marko

9

On hover also:
.navbar-default .navbar-nav .dropdown-menu>li.menu-item-has-children:before {
display: block;
position: absolute;
content: ‘’;
right: 10px;
top: 16px;
border-style: solid;
border-width: 4px 0 4px 4px;
border-color: transparent transparent transparent #77a464;
}
.navbar-default .navbar-nav .dropdown-menu>li.menu-item-has-children:hover:before {
display: block;
position: absolute;
content: ‘’;
right: 10px;
top: 16px;
border-style: solid;
border-width: 4px 0 4px 4px;
border-color: transparent transparent transparent #fff;
}

Thank you,
Marko

10

Good evening

Marko thank you for sharing your solution :slight_smile:

If you’re happy with our service, don’t forget to rate us: [Illdy] Reviews | WordPress.org