Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

Little arrows - Drop down

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

10 years 3 months ago
Hello,

I would like to change the colour of the little arrows for the drop down menu.
zen-menu li.parent > a::before, .zen-menu li.parent > .zen-menu-heading::before 
{
 border-color: #fff transparent transparent;
 border-style: solid;
 border-width: 4px 4px 0;

It is possible for me to change the colour of the little arrows by changing the border colour, but then the arrows don't change their colour if you hover over.

So would like to have two different colours for the arrows: First colour should be like the rest of the button text. Second colour should be also like the rest of the button text if you hover over.

Cheers Benjamin
  • Benjamin's Avatar
  • Benjamin
  • 12 Month basic
  • 43 posts
  • Karma: 0
Last Edit: 10 years 3 months ago by Benjamin.
The administrator has disabled public write access.
10 years 3 months ago
Hi Benjamin,

Try

.zen-menu li.parent>a:before, .zen-menu li.parent>.zen-menu-heading:before:hover {border-color: red transparent transparent transparent;}

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
10 years 2 months ago
Thanks for your answer

I tried it but the result is that the little arrows are gone. Also tried some more different things myself but I couldn't figure it out.

Cheers Ben
  • Benjamin's Avatar
  • Benjamin
  • 12 Month basic
  • 43 posts
  • Karma: 0
The administrator has disabled public write access.
10 years 2 months ago
Hi Ben,

Do you have a link for the site?

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
10 years 2 months ago
Yeah sure: www.pfotenprinz.at/

Thanks Paul
  • Benjamin's Avatar
  • Benjamin
  • 12 Month basic
  • 43 posts
  • Karma: 0
The administrator has disabled public write access.
10 years 2 months ago
How did you add the css that didn't work?

What file was it added to?

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
10 years 2 months ago
I use this one as my default: /templates/venture/css/theme.corporate.css

Well I tried to add it via my ftp client and also tried with firebug. I added it here:

.zen-menu li.parent > a:before,.zen-menu li.parent > .zen-menu-heading:before{width: 0;height: 0;float: left;content: "";margin-top: 16px;margin-right: 8px;border-style: solid;border-width: 4px 4px 0 4px;border-color: #fff transparent transparent transparent}

Thanks
  • Benjamin's Avatar
  • Benjamin
  • 12 Month basic
  • 43 posts
  • Karma: 0
The administrator has disabled public write access.
10 years 2 months ago
Try adding it to the custom.css file

everything the theme is saved it be wiped

Cheers
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
10 years 2 months ago
Ok I tried it via custom.css but still no luck. The little arrows stay now but they don't change their colours.

Cheers
  • Benjamin's Avatar
  • Benjamin
  • 12 Month basic
  • 43 posts
  • Karma: 0
The administrator has disabled public write access.
10 years 2 months ago
Hi

You need to change

border-color: #01386a transparent transparent transparent

so replace this colour value #01386a with your new colour value

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
10 years 2 months ago
Well right now it stays white with and without hovering over the button.

So actually I would like to have this colour as the norm for the little arrows and if you hover over it should change to white.

In order that the little arrows behave identical to the rest of the menu.

Thanks
  • Benjamin's Avatar
  • Benjamin
  • 12 Month basic
  • 43 posts
  • Karma: 0
The administrator has disabled public write access.
10 years 2 months ago
sorry lost track of this a bit

Thanks to the guys try this

.zen-menu li.parent > a:before {border-style: solid;border-width: 4px 4px 0 4px;border-color: #01386a transparent transparent transparent}

.zen-menu li.parent:hover > a:before {
border-color: #fff transparent transparent transparent;
}

.zen-menu li.parent:hover > a:active {
border-color: #fff transparent transparent transparent;
}

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
10 years 2 months ago
It works great! Big thanks to the guys :)

One last question to this topic: I would also like that the colour changes to white when the menu is active and you do not hover over.

I tried it myself with .zen-menu li.parent > a:active {
border-color: #fff transparent transparent transparent;
} but that didn't work.

Thanks again for the exceptional support
  • Benjamin's Avatar
  • Benjamin
  • 12 Month basic
  • 43 posts
  • Karma: 0
The administrator has disabled public write access.
10 years 2 months ago
.zen-menu li.parent.active > a:before, .zen-menu li.parent.active > .zen-menu-heading:before:hover {border-color: #fff transparent transparent transparent;}

Try adding this to the existing styling we added above

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
10 years 2 months ago
I added it like this to custom.css

.zen-menu li.parent > a:before {border-style: solid;border-width: 4px 4px 0 4px;border-color: #01386a transparent transparent transparent}

.zen-menu li.parent:hover > a:before {
border-color: #fff transparent transparent transparent;
}

.zen-menu li.parent:hover > a:active {
border-color: #fff transparent transparent transparent;
}

.zen-menu li.parent.active > a:before, .zen-menu li.parent.active > .zen-menu-heading:before:hover {border-color: #fff transparent transparent transparent;}

Though the little arrow stays blue when active and you don't hover over. (Link:
www.pfotenprinz.at/im-notfall/)

Littlearrow_01.jpg


Cheers
  • Benjamin's Avatar
  • Benjamin
  • 12 Month basic
  • 43 posts
  • Karma: 0
The administrator has disabled public write access.
10 years 2 months ago
hmm I don't get that - its working for me

Have you refreshed the browser and its browser cache?

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
10 years 2 months ago
Yeah I did, but I figured it out.

It does work with Chrome, but it doesn't work with Firefox or IE 10.

Cheers
  • Benjamin's Avatar
  • Benjamin
  • 12 Month basic
  • 43 posts
  • Karma: 0
The administrator has disabled public write access.
10 years 2 months ago
hmm ok - see that as well

Can you reduce the line I last suggested so it just reads

.zen-menu li.parent.active > a:before {border-color: #fff transparent transparent transparent;}
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
10 years 2 months ago
Ok now it works just fine :cheer:

Thanks a lot Paul
  • Benjamin's Avatar
  • Benjamin
  • 12 Month basic
  • 43 posts
  • Karma: 0
The administrator has disabled public write access.
10 years 2 months ago
Happy days :)

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
The following user(s) said Thank You: porwig

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers

Close