How to Add Button to WordPress Header Menu (No plugin needed!)
ฝัง
- เผยแพร่เมื่อ 2 ส.ค. 2024
- I’ll show you how to add a button to the WordPress menu. We will add the button to the header navigation. No plugins needed! Just a few lines of code that you need to copy and paste.
You will be able to choose if you want to add an icon inside the button and obviously change colors and so on.
CSS code used in this video: github.com/tipswithpunch/yout...
Emojis: emojipedia.org/
Add a button to the WP header navigation:
00:00 What we will do
00:25 Add a link to the menu with a CSS class
02:41 Alternative CSS
03:55 Customize button color
06:28 Customize button icon
06:59 Customize button hover
Let’s add a button to the WordPress menu with a bit of CSS, so it will appear in the header navigation. The call-to-action (CTA) will include an icon and you will be able to adjust the color, size, and some other basic settings.
Hosting I'm using: punchsalad.com/hostpapa/ (60% discount)
Where I get my domains: punchsalad.com/namecheap-domain/
WP plugins I'm using: punchsalad.com/recommendation...
Some of the above links might be affiliate links. - แนวปฏิบัติและการใช้ชีวิต
Thank yo so much!!! I can't tell you how long I have been trying to do this with no luck...very much appreciate you!!
Glad I could help Darlene!
Thank you for this guide, it's AMAZING and very easy to follow.
Glad it helped Julio!
So obvious, which probably explains why I never thought of it. Thanks, Robert, very useful little tip!
no problemo David. I had to do this on my website recently. And indeed super simple when you know that you can add some custom CSS classes to the menu!
Thank you so much. You helped me a lot and you explained it so well and simple.
Glad to hear that!😀
You are incredible! Easy to understand and worked perfectly!
Wow, thanks!
Extremely helpful. Thank you so much!
Glad it was helpful!
Thank you Robert! Very helpful as always!
awesome 🙌
Just what i needed. Thank you!
You're so welcome Natoya!
Thanks for sharing this. It's super helpful
Glad it was helpful!
Fantastic tutorial, THANK YOU SO MUCH!!!
You're very welcome!
Thank you Robert. Great content.
Glad you enjoyed it
amazing! didn't know this could be done!!!
yeah it's pretty easy with a bit of CSS 😇
super helpful ! thanks Robert
Happy to help Romain!
Fun and easy to implement. thanks chmap!
You're welcome!
Thanks mate, it was very simple and clear.
Glad it helped
@@tipswithpunch i did button and all work well but on Mobile view it show white on white ... How i can change color on mobile version :)
Thank you so much for this video! It was so helpful :)
I'm so glad!
Best type of video! Perfectly executed.
I was in and out with exactly what I wanted within 2 minutes.
Gets a like and subscribe from me, thanks my man!
Glad you liked it Darren!
@@tipswithpunch Looking a bit strange on mobile though. Do I need different CSS for that or is there perhaps conflicting code somewhere else in the site?
you probably just need a bit of CSS to fix it :)
Worked perfecly! Thanks man!!
You're welcome Pedro!
So awesome! Thank you 🙏🏽
You're so welcome!
Amazing video, thank you!!
Glad you liked it Marina!
Super awesome! Thank You!
Glad you like it!
Thank you so much!! Helped me do something I didn't know how to 🤣
Glad I could help!
Thanks for this
My pleasure!
Hi Rob, which screen recorder do you use? I'm using OBS but I really like the zoom in effect there at 1:14. Is that done in post-production or directly from your screen recording software? Thanks 👍
I'm also use OBS for screen capture, but I add the zoom during editing. I use Davinci Resolve to edit my videos.
thank you so much!
Glad it helped!
Thanks man!
Happy to help!
Brilliant👍
thanks!
Thanks man
You're welcome!
Thanks!
my pleasure Juanita, thanks for the tip! :)
Hi Rob, great tutorial! Thank you for sharing and it was really helpful. I wonder if there is a way to create 2 different styles of custom buttons on the headers using this method?
You could but you need to adjust the code for it to work
This worked very well, thanks!
Do you have a tutorial on how you created the moving dust like particles in the background of your website? Thanks!
Glad it worked. And yes I do have particles tutorial: th-cam.com/video/E6l5U4LJh7Y/w-d-xo.html
Hello, I would like to add a full custom menu header on my website, I already have a menu on the website, I would like to create a custom one over it do you have any code for that?
I'm sure there is, but you would need to know some PHP to modify it to your liking...
I niticed though that it has the tendancy to place the button from top downwards. Hiw did you detach/ create a space between the top of the header and button?
you can add this to the button CSS:
margin:20px 20px;
this will add 20 pixels of margin, you can change the values to what you like.
Hi, I am managing a new website and there is a button in the header of one page but I cannot find the code for it and I need to relink it.
Sorry Xavier, hard to say where it comes without seeing it.
one issue I run into, is whatever the color is of my other header text is, will be the same color of the button text, and I havent been able to override it with code. any suggestions?
you just need a bit more CSS that targets that specific button.
You can just try to add !important at end of the color in the code I provide.
so in CSS: color: #FFF!important;
Notice the !, it's there on purpose.
Your videos calm me down. Great Brother.
Also, I was thinking if in responsive mode I can show that button with hamburger icon.
Thjanks Raja, yes should be possible on mobile too. But you might need to adjust the code for your mobile menu.
I got it mostly there but my text wont turn white. I did use the hex code any idea?
maybe something is over writing it in your theme. do you have a link to your website? I can take a quick look
copy your code but still the button is not seen, I did place the span as you said but it still does not work, is there any way you can help me?
sure, what's your website? I can take a look at the structture
Can I change the location of the button like upper of my menu bars?
nah, this code is specifically for the WP menu
Hello, first off thank you for your help, much appreciated. I'm wanting to use this button with a drop down menu item...is it possible as I'm not having luck. The drop down doesn't stay dropped in order to select an item in the drop down...if that makes any sense!
Hi Aline, from personal experience, buttons are usually not used in combination with drop downs. But again, that's just the common way.
To your issue, it sounds like either the code from this video conflicts with the hover effect or then there is an error in the javascript. But it's hard to tell without seeing it
@@tipswithpunch alright, I will look at those areas..thanks for the tip! I'm most impressed at your quick reply. Enjoy your day...
Hi, I Have changed the colour of the button but cant change the colour of the text?
wow that's not good.
Did you change the value of "color", if you did and it didn't work then your theme is somehow overwriting it.
In that case you can add !important to the end. So something like
color: #ffffff!important;
Hi Rob! Thank you for the video. I am currently using Phlox theme, and I found it already has some codes in the additional code section. What can I do?
Hi Emmanuel, You can just add the code from this video at the bottom of the editor & keep the other code there.
Thank you. It worked!! T
This is great! Thanks! One question, the button and colors I changed look fine in the Additional CSS window, but in Elementor, the text color of the button is still my default color from the rest of the menu (blue) but I want the button text to be white, like it is in the Additional CSS window. Any idea why it's not changing in Elementor?
maybe elementor preview overwrites it somehow... or it could be simply cache... So if you clear the cache and enter elementor preview again it might go away
@@tipswithpunch try adding !important to your CSS. It will override Elementor's settings
Hi, help. the button is fitting perfect on desketop, but on mobile it's looking weird. Is there a way to set different width for mobile and desktop? i am from Brazil. 😍
Hi Luzia, yes it's possible but you need a bit of custom CSS code.
@tipswithpunch thank you for the tutorial! Is there a way to put in more buttons in different colours in the menu? thank u :)
My pleasure, yes there is with a bit of CSS. But I don't advice it as the best practice is to have one call to action button in navbar.
The more you put different colors, the more the effect gets diluted.
@@tipswithpunch I´m trying to create a menu with different background-colours for each point in the menu. So the button would not be used as a call to action button, but simply for the background-colour. What do you think? thanks again :)
How can I change the location from right to left please?
Just place the button link as first in WordPress menu
pleas help the button is invisble in tab and mobile
maybe it's in the menu? So when you open the menu does it appear there?
Thanks for the help! I tried it in my website but there is something weird: the button is displayed (shape, color etc.) but the text is outside the button. I tried to change the width to see if it was because of the word length but it changed nothing. Do you know how I can fix it?
oh, that's intersting...
You can fix it by adding this to the button
Just Use Following if you want to wrap the text inside the button
white-space:normal !important;
word-wrap:break-word;
so the new code:
.custom-menu-button a{
color: #ffffff; /* Text color */
background-color: #38b6ff; /* Btn bg color */
padding: 10px 10px; /* Space around text */
border-radius: 3px; /* higher number = rounded corners */
border: solid #000000 0px; /* Border color & thickness */
max-height: 40px; /* Max height of button */
white-space:normal !important;
word-wrap:break-word;
}
...
rest of the code
@@tipswithpunch Thanks a lot!
Great guide, thank you so much! The color for the text is not changing, even when I change the hex code; but the color change for the button (fixed & hover) did work. Any ideas what might be preventing the button text color from changing?
Some code is overwriting it... it's hard to say what without seeing the code.
@@tipswithpunch thanks for the response! I will try and figure it out... eventually haha.
@@filmcrafterscanada did you figure it out?
the text within my button is indented so far down it lies outside of the button itself. I can't seem to figure out why that would be the case. Any suggestions on what to look into? It seems padding on the sides isn't working at all either
do you have it somewhere I can see it? I can check the CSS
@@tipswithpunch I ended up deleting site and will retry again. TY for replying
Hi friend, I would like to know how can I add css code for my fibosearch bar on my oceanwp mobile menu, do you know how to code this?
yeah probably it's possible. But for the code you would need to reach out to CSS developer freelancer, for example on fiverr.
@@tipswithpunch nice, thanks for your time!
Really Helpful. Simply Amazing. Icon isn't getting displayed, what have I to do?
glad this helped. I'm not sure why it doesn't show up. I can't tell without seeing it.
This is an awesome video - and I have a question! This creates a great new button at the top of my website. But I want to point the button to a Mailchimp signup form. Right now the button just clicks back to my website home page. Do I perhaps create a new page with the signup form and somehow point the button there? Again, awesome and helpful video!🙂
Hi Matt, thanks for kind words.
You could do what you suggest, it's probably the easiest way. It will work perfectly.
I have something similar on my website.
If you want to make it a bit harder on yourself, you could trigger a Mailchimp popup form when some on clicks on the button. :)
wooow worked
Great to hear that Nicola!
Hey Robert,
I have applied the codes as you told and its perfect, thank you so much for this tutorial.
Actually I'm facing an issue. I want that a new window opens after clicking on the button. Please, Can you help me in this. Please bro!
Hi Adarsh, here is how: docs.presscustomizr.com/article/314-how-to-open-external-menu-links-in-a-new-tab-with-wordpress
Loved this! Your video was so easy to understand. I have my button on my menu and it links perfectly. I am having an issue with the background color. It's there, briefly, when I load the website but disappears after the site loads. Very strange. I'm not sure what is happening. Any ideas? I can link to the website if needed.
Glad you liked, sure put the link, and I can check. But sounds like something is overwriting the code.
@@tipswithpunch That was my assumption, but I had no idea how to fix it. And the client decided she didn't like it and had me remove it. I'm not too happy about that...
How does it look on mobile
it depends on your setup, should be just a button inside the menu
hi,
how to move menu header location for exampel from top to middle of the page?
Thanks
your theme needs to support that, or you can try with some header builder.
Another thing is, you can create a "fake" navbar, so just create an element in your page builder and place it on pages you need it. (for example in Elementor pro, you can just reuse same element on any page)
@@tipswithpunch i built with astra and mountain
did support this?
@@tipswithpunch I built with Astra and Mountain theme
did support this?
As far I know Astra doesn't support, mountain theme I haven't used.
The "fake" navbar can work with any page.
great video. however on my mobile version the button is not aligned correctly with the text. it is higher
ahaa that can be, the mobile setup depends a bit on your theme.
With a bit of CSS you can adjust it, do you have a link where I can see the button?
Thank you putting this together. I just noticed that it works as expected, however, the "Red Heart" emoji shows up on Firefox, but not on Google or Bing. Am I missing a step? Thanks again for sharing this guide.
Hi Julio, does the emoji show at all on Chrome?
@@tipswithpunch yes, but not Red. I get the same experience in Bing. The strange thing is that if I use Chrome on my iPhone XS Max, I see the Red Heart...weird. Any ideas?
ahh, every browser shows those emoji slightly differently, this article has some examples of what I mean: www.lambdatest.com/blog/emoji-compatibility-with-browsers/
But basically some browsers show red heart, and others might show yellow or blue or something. No idea why would they do this.
But despite these differences, I like to use these emojis because they are native to browsers and there is no need to load an image or svg. So if you need a red heart, then you need to use and image.
@@tipswithpunch thank you for your response and the resource. Always learning something new. Thanks again for putting this guide together.
thanks a lot but how to adjust it for tablet or mobile devices all at the samt time
you would need a bit of custom CSS to adjust it
@@tipswithpunch Yeah already did.
Thats worked, thanks for the tip. But my buttons heigh is stretched along the menus hegh. How to fix this?
hmm strange the code I provide should restict the max-height to 40px
mine too. did you ever find a fix?
Hi Rob,
I Have changed the color of the button but I cannot change the color of the text?
The CSS on WP is the following one :
/* Adjust button */
.custom-menu-button a{
color: #ffffff; /* Text color */
background-color: #2EA3F2; /* Btn bg color */
padding: 10px 9px; /* Space around text */
border-radius: 15px; /* higher number = rounded corners */
border: solid #2EA3F2 2px; /* Border color & thickness */
max-height: 30px; /* Max height of button */
}
/* Adjust icon */
.custom-menu-button a:before{
content: ''; /* Change icon here */
margin-right:5px; /* space between icon & text on right */
}
/* Adjust button on hover or remove the whole thing */
.custom-menu-button a:hover{
color: #ffffff; /* Hover color */
background-color: #E9E9E9; /* Btn hover bg color */
border: solid #000 0px; /* Hover border color & thickness */
}
/* Remove default hover on links*/
.custom-menu-button:hover{
text-decoration: none;
color:#fff!important;
}
Thanks a lot for your help!
Try to change the CSS of text to: color: #ffffff!important;
The !important, should overwrite everything else.
Just change the #ffffff to the color you want
Hi! Thanks for the video- very useful and the button is up and running - buuut- I'm now stuck. I want to link the button to an actual sign up form!! I have mailchimp integrated but for some reason, it doesn't work with this when I put in the shortcode. In any case, I'm completely clueless and perhaps doing it all incorrectly anyway. I'm trying to grow my followers but if no sign-up button ?? Sigh
maybe this is helpful: th-cam.com/video/hYMaQmYaSv0/w-d-xo.html
You need away to trigger the popup
Thanks for responding. I have integrated a pop-up which is active when the user scrolls down the home page. I will try and link another to the signup button in the header and keep you posted . Thanks for your help
It worked great! But now I changed the theme of my website, the button is still there, however, the text color won't change. It's white (as the color of the text of the website) and I need it black. Can you help?
Hi Marina, I show how to update the colors in the video: th-cam.com/video/j6ZkyS6wrig/w-d-xo.html
Or do you mean it doesn't updated even after you changed the hex color code?
if so then do this:
background-color: #38b6ff!important;
So you need to add "!important" to the end of HEX code, and don't for get the ";" at the end
I hope this helps
@@tipswithpunch It doesn't change the color even after I change the hex code. 🤷♀️ It worked before, but after I changed the theme the text color remains the same. 🤷♀️
I can check it, if you send your website url here or to robert(at)punchsalad.com
It's okay. I changed the theme back and it works. 😊 Besides, I haven't launched the website yet. 😊 Thank you for your help. 😊
🙌
How do I change the height of the button on Mobile? On PC, it's good, but on mobile, it's clipped.
sorry late reply, you can add below to the code.
ANd just adjust the 40px to whatever you need.
@media only screen and (max-width: 768px) {
.custom-menu-button a{
height: 40px;
}
}
@@tipswithpunch thank you!
Can you do a tutorial on how to add text to the header on mobile? That is another thing I am trying to accomplish and am unable to find a way. I am self taught and do not know enough css to figure it out and some of the tutorials I have tried are not working for me. Thanks for all you do!!
I think without any coding, this is the closest you can get: www.organizedthemes.com/add-text-to-navigation-menus/
There might a plugin for something like this, maybe I'm just not aware
Mine has a weird # error in front of the button label.
sorry to hear that.
So you see some text in your button or what?
@@tipswithpunch Yes. I found a different tutorial on Google search but I see you've helped many people so that's still awesome.
Sweeet..FYI for those working with themes: My theme has several menu options, so I just had to make sure I choose the theme menu and not create a new menu & voila
Glad to hear you go it done Aurelio!
👍
🙌
@@tipswithpunch 👊
still not see my button
Sorry to hear that, maybe you have a caching plugin? IF you do just clear the cache, and it should appear.
Hi Robert, great video. I want to add a Whatsapp button there. How would I link to it?
You would need to get the whatsapp logo & their green color and then add a link whatsapp...
e.g. api.whatsapp.com/send phone=12345678&text=This%20is%20a%20test
See this article for explanation: www.wati.io/blog/whatsapp-chat-button-on-website/
u lovely
thanks!
It's A button , how can you put two or more ? By the way , you didn't show how to change its place to right or left .
From right to left, you just move the link to the first position inside the menu section.
I don't advise putting more than 1 button, because you don't want to have many competing CTAs.
But to have multiple buttons, you just need to add the CSS class to the links in the menu structure... that should work. If you need to style the buttons differently, then you need to change the class name of the code & the part you put in the CSS class in the menu structure.
@@tipswithpunch is there any page builder or plugin so we won't need to write codes ? Too much hassle for a button ! The same thing for adding a widget in header !
You can check any header builder. Elementor has one, but I believe it's only in the paid version.
you are soooooooooooo cute :)thx a lot
😇 thanks!
molecular structure not the same not a universal law
🤔
For everyone who wants to change the color of the text, but can't: this is what you need to do: add !important. So it looks like this: color: #ffffff!important
thanks for the tip Dorian!