How to change menu button color in Protostar template

Everything to do with Joomla! 3.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
User avatar
daisysmom
Joomla! Intern
Joomla! Intern
Posts: 94
Joined: Tue Oct 16, 2007 12:34 pm

How to change menu button color in Protostar template

Postby daisysmom » Thu Aug 10, 2017 2:27 pm

Hi all,
I need to change the color of rollover button in the Protostar template.

Thanks in advance!!

User avatar
imanickam
Joomla! Master
Joomla! Master
Posts: 26268
Joined: Wed Aug 13, 2008 2:57 am
Location: Chennai, India

Re: How to change menu button color in Protostar template

Postby imanickam » Thu Aug 10, 2017 4:54 pm

Try the following:

Code: Select all

.nav > li > a:hover, .nav > li > a:focus {
    background-color: black !important;
    color: white !important;
}

You could add the css entry mentioned in the file user.css. This file has to be located in the directory \templates\protostar\css. If the file already exists you can add the css entry at the end of the file.
- Ilagnayeru (MIG) Manickam | இளஞாயிறு மாணிக்கம்
http://www.eegan.org - helping the poor and underprivileged
educate. empower. enrich.
Support the poor and underprivileged

User avatar
daisysmom
Joomla! Intern
Joomla! Intern
Posts: 94
Joined: Tue Oct 16, 2007 12:34 pm

Re: How to change menu button color in Protostar template

Postby daisysmom » Thu Aug 10, 2017 8:23 pm

I see no user.css file in that folder

User avatar
sozzled
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 3498
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: How to change menu button color in Protostar template

Postby sozzled » Thu Aug 10, 2017 8:43 pm

This is easy. If you don't see a file named user.css in that folder you create one. Then add the lines of code suggested by @imanickam; save the file and refresh your frontend. 8)
https://www.kuneze.com/blog
Former member of Kunena project team
If you think I’m wrong then say “I think you're wrong.” If you say “You’re wrong!”, how do you know?

User avatar
daisysmom
Joomla! Intern
Joomla! Intern
Posts: 94
Joined: Tue Oct 16, 2007 12:34 pm

Re: How to change menu button color in Protostar template

Postby daisysmom » Fri Aug 11, 2017 1:31 am

Okay, I did that and see no change. I'm sorry to be a bother. Obviously, I'm no genius with css. The menu item I really want to change the color for is the secondary, dropdown button. It's currently a dark teal color. I'd like it to be dark orange. Thank you in advance for any and all help. I really appreciate it.

User avatar
sozzled
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 3498
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: How to change menu button color in Protostar template

Postby sozzled » Fri Aug 11, 2017 2:05 am

Can you post the URL of your website. I'll have a look to see if you created the user.css file properly (and located it in the right place) and we may be able to fix the problem quickly that way.

One quick question: what version of Joomla are you currently using?
https://www.kuneze.com/blog
Former member of Kunena project team
If you think I’m wrong then say “I think you're wrong.” If you say “You’re wrong!”, how do you know?

User avatar
daisysmom
Joomla! Intern
Joomla! Intern
Posts: 94
Joined: Tue Oct 16, 2007 12:34 pm

Re: How to change menu button color in Protostar template

Postby daisysmom » Wed Aug 16, 2017 2:15 pm

Sorry to be slow to get back with you. We were on a trip.

Here's the url of site in question. http://lexalumni.org/

The submenu I want to change color for is under 'LHS Graduates' after you click on it and hover over you'll see 'Class Rosters' submenu come up. I wish it would show itself in the first place as you hover over 'LHS Graduates'. I must not have something set correctly.

Thanks for any help.

User avatar
sozzled
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 3498
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: How to change menu button color in Protostar template

Postby sozzled » Wed Aug 16, 2017 7:02 pm

daisysmom wrote:I wish [the submenu] would show itself in the first place as you hover over 'LHS Graduates'
I think I understand the problem here. The problem is that the main menu item (LHS Graduates) loses it focus when the mouse moves fractionally outside the border and, therefore, the submenu doesn't have a enough "opportunity" to obtain focus and display the hidden elements. In other words, there's too large a margin between the bottom of the menu item and the top of the submenu item (or it's just pot-luck if you can move the mouse between the two elements to get the submenu to display).

One possible way of correcting the inability for the user to obtain focus for the submenu might be to add the following lines of CSS to the end of the file user.css:

Code: Select all

.navigation .nav > li > .nav-child::after {
    top: -5px;
}
.navigation .nav-child {
    margin: 1px 0 0
}

Try that first and we'll see about the first question you asked which I think was about how to change the submenu colour. ;)
https://www.kuneze.com/blog
Former member of Kunena project team
If you think I’m wrong then say “I think you're wrong.” If you say “You’re wrong!”, how do you know?

User avatar
daisysmom
Joomla! Intern
Joomla! Intern
Posts: 94
Joined: Tue Oct 16, 2007 12:34 pm

Re: How to change menu button color in Protostar template

Postby daisysmom » Thu Aug 17, 2017 2:09 pm

Thanks for your reply and code. I added that to the user.css file as you suggested. I've refreshed and see no change in the submenu appearing when hovering.

User avatar
sozzled
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 3498
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: How to change menu button color in Protostar template

Postby sozzled » Thu Aug 17, 2017 8:08 pm

daisysmom wrote:I wish [the submenu] would show itself in the first place as you hover over 'LHS Graduates'
I now see a big difference; the submenu "shows itself" when you hover over the parent menu and, more importantly, the submenu remains on the screen when you move the mouse in a downwards direction over the submenu contents. Before you made the change, when you hovered the mouse over the parent menu and moved the mouse in a downwards direction, sometimes the submenu disappeared. Now the submenu remains on the screen so that you can see its contents.

We can therefore go ahead and look at the first question you asked which was about how to change the colour of the submenu items. I thought it more important to address the point I quoted above.

Therefore, when you say that you "see no change", what exactly do you mean?
https://www.kuneze.com/blog
Former member of Kunena project team
If you think I’m wrong then say “I think you're wrong.” If you say “You’re wrong!”, how do you know?

User avatar
daisysmom
Joomla! Intern
Joomla! Intern
Posts: 94
Joined: Tue Oct 16, 2007 12:34 pm

Re: How to change menu button color in Protostar template

Postby daisysmom » Thu Aug 17, 2017 8:54 pm

Okay, the submenu does show nicely when I hover over it on it's parent page, but it's fine. when I hover over it I'd like the color to be orange or light orange instead of the dark blue. Thank you!!

User avatar
sozzled
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 3498
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: How to change menu button color in Protostar template

Postby sozzled » Thu Aug 17, 2017 9:20 pm

daisysmom wrote:Okay, the submenu does show nicely when I hover over [the parent menu].
That's all I was trying to do in my previous offering. It was important that we made this change before attempting to make the colour change you requested.

Returning now to the "original question" (I suppose we could say): to change the colour of the submenu item when that item has focus, add the following lines to the file user.css that I have included in the attached file. Unfortunately I cannot display the CSS code here on this forum.
You do not have the required permissions to view the files attached to this post.
https://www.kuneze.com/blog
Former member of Kunena project team
If you think I’m wrong then say “I think you're wrong.” If you say “You’re wrong!”, how do you know?

User avatar
daisysmom
Joomla! Intern
Joomla! Intern
Posts: 94
Joined: Tue Oct 16, 2007 12:34 pm

Re: How to change menu button color in Protostar template

Postby daisysmom » Thu Aug 17, 2017 11:29 pm

YES!!!!
THANK YOU SO MUCH!!!
I may play around with the color, but this gets me there!!
I don't know what I'd do without your help!!

Thanks again so much!!


Return to “Templates for Joomla! 3.x”

Who is online

Users browsing this forum: No registered users and 6 guests