Community Forums › Forums › Archived Forums › Design Tips and Tricks › Adding a button to the menu
- This topic has 17 replies, 4 voices, and was last updated 10 years, 10 months ago by Brad Dalton.
-
AuthorPosts
-
June 17, 2013 at 4:22 am #46323cdt21470Member
I have the Outreach theme and would like to have a button added to the menu. It can be part of the menu but I want it to be a different color so Im assuming the button would be the better option. The color we need it to be is red while the menu is blue.
I was told this will need some code changes which don't surprise me. Any ideas would be much appreciated
Thanks
http://192.110.165.140/June 17, 2013 at 7:34 am #46333rfmeierMemberHello,
What is the purpose of this button? A link to a site? You could always add a custom link through the menu and add a custom class and define the color within your style.css file for that custom class.
June 17, 2013 at 4:47 pm #46455cdt21470MemberHi Ryan
The button will be used to link to a page within the site. I get what your saying and sounds pretty simple however I am very new to this code stuff and would need to know what to add to the css to achieve it so I don't mess something up in the process.
Thanks a bunch
Chad
June 17, 2013 at 4:50 pm #46457rfmeierMemberChad,
In order for me to help, it would be easiest to add the link with a custom css class. After that I can help you will the css that will need to be pasted into your style.css file.
June 17, 2013 at 6:26 pm #46466cdt21470MemberHi Ryan
If you look at the menu the "help a child" tab in the menu is the one I want to at least change the color of to red. I can probably add enough to the menu to get it to the far right of the menu so that's not such a big problem. I guess all I need is the code to change the color to red and then the hover color to green.
Im not sure what you mean with adding the custom css class though. Im assuming I would find the menu in the css and add "custom" in there somewhere around that tab?
Thanks for the help Ryan
Chad
June 17, 2013 at 6:32 pm #46467rfmeierMemberChad,
When you are on the Menu screen within the WordPress dashboard, there is an 'Options' tab on the top right corner of the screen. After you click that, a menu will drop down and you can select to show the 'CSS Classes' option.
After that is selected, you will be able to add custom css classes to menu elements.
June 17, 2013 at 8:04 pm #46478cdt21470MemberCool done that. Do I need to add the custom classes to the css and if so where and what do I put?
Sorry this is very new to me 🙂
Chad
June 18, 2013 at 7:17 am #46514rfmeierMemberChad,
Add the custom class. We can just call it 'help-a-child'. I can then help you will the styling.
June 23, 2013 at 10:00 pm #47409cdt21470MemberHi Ryan
Im still not sure exactly where I would add the custom class. The last thing I want to do ids mess it up LOL. I also want to eliminate the subfooter. Im guessing its just a matter of deleting something in the CSS but not sure what.
Thanks
Chad
June 24, 2013 at 6:22 am #47445rfmeierMemberChad,
If you followed the instructions above, enabling 'CSS Classes' will allow you to add a custom class to an individual menu item.
https://www.diigo.com/item/image/40chg/btxw
Adding an random class name like 'help-a-child' will not break the site. Until we add a styling rule to that class, it won't do anything to the site. So you are okay.
June 24, 2013 at 8:09 pm #47607cdt21470MemberOk cool.
Ok all set with that. I thought it was something I would add to the CSS LOL.
Will I be able to see that in the CSS now?
Thanks
June 25, 2013 at 7:03 am #47643rfmeierMemberOkay.
Change the 'Help A Child' class to help-a-child. You really shouldn't have spaces within css class name. I always stick to lowercase too.
After you have changed that, you can add this to your style.css file and make the changes you want;
I just used a red background as an example.
.help-a-child { background: #ff0000; }
June 25, 2013 at 9:21 am #47659vinacapitaladminMemberHi there,
I'm trying to something similar, can you clarify where in the style sheet the code should go?
I'm trying to change the "donate" menu item to a button that reads "Help save a child's life, donate now." and takes the user to another page with the donation form.
http://vinacapitalfoundation.org.westhostsite.com/
Thanks in advance
June 25, 2013 at 9:24 am #47662rfmeierMemberIf you are going to change the text, you will want to do that through the menu interface.
Any css changes you want to make, you can add to the bottom of your style.css file.
June 25, 2013 at 5:08 pm #47729cdt21470MemberHi Ryan
That's awesome. Looks great. Now I need it to change to green when I hover the cursor over it. Im thinking just adding some code for the hover inside what I just added will do but would appreciate your input.
I am also curious if I can get that tab on the menu to slide to the right side of the menu?
Thanks a bunch
Chad
June 25, 2013 at 5:20 pm #47733rfmeierMemberI took a look at the css. Add this to the end of the style.css file;
.menu-primary li.help-a-child { float: right; } .outreach-blue .menu-primary li.help-a-child a:hover { background: #00ff00; }
June 30, 2013 at 12:31 am #48484vinacapitaladminMemberThat still didn't work for me.
I would prefer to use a button generated from a plugin such as MaxButtons so that the client can easily make edits on their own without any coding. However, I can't get it to appear in the menu.
Any advice?
June 30, 2013 at 1:08 am #48494Brad DaltonParticipantI don't think you can parse short codes in the menu.
You will have to use CSS or an image.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.