Just want to make sure you're aware, stands for "list item", it isn't short for link. It doesnt have to be used as a link either, you can use anywhere you want to list something. It's just become standard that navigations are formatted using list items within a (unordered list). Its the anchor tag which turns something into a link
I cannot believe how much CSS I learned in 5 minutes. And I'm not new to CSS. I've just never watched a video that was so clear. Awesome! Subscribing dude!
Wow! Your tutorial on this button seems to be only one available on internet. I almost spent 4 hours to figure out the way doing it (surely I'm new to CSS) but your solution was bang on! Thanks a lot!!
This was fantastic!!!! Thank you so much. Like OMgoodness, I can't believe how easy this was with your help! I really appreciate this and hope that you are still uploading videos because I totally became a subscriber!
Thank you Greg; I've been looking for how to do this for a while, you've explained it really well. It didn't work for me in the beginning (I'm a beginner). When I inspected my item, it did not have the ID or Class mentioned as clearly as in your case. I did some more reading and added a custom class under Appearance - Menu but it still didn't work. Then I added li. as a prefix to the class name in the code and it worked. Maybe because I use elementor, the class ID was not as clearly spelt, but I achieved my objective, all thanks to you!
Good tutorial, thanks. Does anybody know if it would be possible to change the text color in the button? (not the whole menu text, just the one in button) Thanks!
Thanks! Yes, got a video for you th-cam.com/video/SuY3LhXwuzk/w-d-xo.html BTW we have our newest Ecommerce video live now if you're looking to make an online store, would love to have you there Alejandra! th-cam.com/video/LNYY5lGZOcE/w-d-xo.html
Thank you, was so useful. How can I manage the height and width of the button, as well as its margins and the black color of text, of the primary menu, please? Thanks again.
Yes of course! You need to install wp video lightbox plugin and add a css selector to the link of the button. i'll send you a video shortly on how to do it :)
This was awesome! Thank you so much. Everything worked perfectly, except for the link color on the hover. I double-checked to be sure I had the right CSS added, but the link text still stayed the same color when hovered over. I came up with a work-around, but am wondering if something in my theme is overriding the additional CSS? Any ideas? I see you mention the !Important below, but I am not sure how to implement that. Newbie here. Thanks!
Hi Greg! SO happy I found your vid. It worked great for my main header menu but I am having trouble adding the same button to my "mobile menu." How do I inspect my website on a mobile device to get the "menu id?" Or do I add more css for mobile using the same menu id?
Happy to help K and sounds like this Wordpress tutorial worked for ya! Sooo you can write the new css on desktop, and target mobile screen sizes. This will help you target a hamburger menu for example, within which you can target the last menu item... it’s tricky at first but gets much easier ... does that help? 🙏🏻
Hi Greg, thanks so much for this video and you make it fun too... Is there a way to make this button in the menu bar smaller?... I'm getting a BIG button ?? Many thanks
Hi Greg, many thanks for your prompt response.... All parameters work except "Margin" ??? Here is what i have #menu-item-1872 { border: 5px solid #FF0000; border-radius: 10px; padding: 0px 15px; margin-left: 12px: } #menu-item-1872:hover { background-color: white }
Great, in my case I had to use a very long code as I also had a CSS class on the button that triggers my off-canvas form but got it to work eventually.
Hi, many thanks for this tutorial which i followed but i'm having difficulty with the size of the button... Its showing a little larger than the menu bar?
Thanks for this! I was going nuts and spending WAY too much time trying to figure out how to do this! What if you want the button on the menu to be a color when it's NOT hovered over? Can you please share the CSS for that?
awesome tut man!!! can you do this with elementor? i ahve tried this method but cant seem to change the font color (background no problem). Thanks in advance
Claro que si! Tengo que publicar un video sobre cómo hacer un sitio web de WordPress en español para ver los pasos completos, ¡pero me alegra que hayas podido crear esta función de websire!
Thanks, this is exactly what i want to do but not in the header. i have a little in page nav menu and i want them all to be button like. Do i just do the same but with the link id of the menu item of that non header nav menu? thanks
Hi there, thanks for the tutorials. For me however, it doesn't work. When I publish it, the previous settings (i.e. caps + hover text colors + etc.) disappear. The text becomes not Caps and the hover over text color changed. Why is this? Greatful for your answer.
Hey Adrian! I’d guess maybe a small punctuation error or you need to use the !important command... If you’d like, please come join us on Facebook for fast Wordpress support and giveaways! Https://facebook.com/groups/DearBlogger
Thanks if you open your site in the screenfly mobile response tester then right click on the menu item where you want to add a button, you should see the correct css to work on!
the border on top and bottom takes up the whole header. Is there a way to make it smaller? I copied the code exactly. Also thank you for the tutorial :)
Great video thank you. I'm a beginner and I wanted also to know how to add the title in the Menu Bar like you had in this website "Sarah Jones". I'm working with a theme called "Nirvana"... Is it possible that it is not possible to do it on the theme I'm working with?
Hey no problem Riccardo happy to help! By title do you mean a logo? Yes theme will matter, this is done using astra free theme with the yoga starter site which make editing your Wordpress website so easy! Join me on Facebook to learn WordPress stuff, optimize your blogging, enjoy giveaways and more! Here’s the link: facebook.com/groups/DearBlogger
This is a great tutorial thanks!. worked perfectly. My only issue is I cant change the font color of the button. It's currently black, but adding color:#ffffff!important; does not over write it. Any ideas? I'm using a Divi Child theme if that means anything
in a reply to a comment further down : Try some css like this: #menu-item-487 a { color: blue; } that worked perfectly... with the color code it didn't but the name of the color it did!
Hi! Great video. Under "inspect," I'm only getting classes, not a menu item. I tried pulling out the menu item # in the code (#menu-item-6745) and followed your instructions but nothing changed. Can you clarify what I need to do to make this work? Here's the code I got under "inspect." Thanks! BUTTON
Hey Christie! Ah css hurts when you are so close. Try using the entire wording inside the class “”. Just put a . at the start and paste in the whole class. Or you can also assign custom classes to menu items in appearance menus!
Nice tut. However, the problem is on the responsive side of the website. I did check the website and the website still looks the same :) Here's the mobile view of the website. prnt.sc/pib2jq
Just want to make sure you're aware, stands for "list item", it isn't short for link. It doesnt have to be used as a link either, you can use anywhere you want to list something. It's just become standard that navigations are formatted using list items within a (unordered list). Its the anchor tag which turns something into a link
I cannot believe how much CSS I learned in 5 minutes. And I'm not new to CSS. I've just never watched a video that was so clear. Awesome! Subscribing dude!
Oh looks like you got it?! 👏 Amazing comment glad to have ya here Mark.
Thanks so much for this - first bit of CSS I've ever tried and it worked!
I never comment on TH-cam videos, but you just saved my life with this code. A++ You're an incredible teacher!
Wow! Your tutorial on this button seems to be only one available on internet. I almost spent 4 hours to figure out the way doing it (surely I'm new to CSS) but your solution was bang on! Thanks a lot!!
You should paste the css text in description so anyone can copy and paste and no need to type. very helpful btw
Good idea 😃
This was fantastic!!!! Thank you so much. Like OMgoodness, I can't believe how easy this was with your help! I really appreciate this and hope that you are still uploading videos because I totally became a subscriber!
Thank you Greg; I've been looking for how to do this for a while, you've explained it really well. It didn't work for me in the beginning (I'm a beginner). When I inspected my item, it did not have the ID or Class mentioned as clearly as in your case. I did some more reading and added a custom class under Appearance - Menu but it still didn't work. Then I added li. as a prefix to the class name in the code and it worked. Maybe because I use elementor, the class ID was not as clearly spelt, but I achieved my objective, all thanks to you!
Amazing! Thank you so much for taking the time to do this! I love it when I actually know what it is I am writing into the CSS code!
So happy to help and hope to see you back!
Thanks so much!!! P.S. your voice sounds so calm and relaxing :-)
Aw thank you Gigi! Best compliment. Yes we keep it chill glad you dig it 👏☺️
Thanks, exactly what I was after ! we need more of this and less plugins !
Totally!
Great tutorial!!! Thank you!
Very welcome!
Thanks Greg for the very useful tutorial!
Yes of course doin what I do thanks for commenting!
This is a great tutorial! Thank you.
So simple right?! I gotta figure out more tricks like this. Lmk any more tutorials needed Laura, thanks so much!
Good tutorial, thanks. Does anybody know if it would be possible to change the text color in the button? (not the whole menu text, just the one in button) Thanks!
Thanks! Yes, got a video for you th-cam.com/video/SuY3LhXwuzk/w-d-xo.html BTW we have our newest Ecommerce video live now if you're looking to make an online store, would love to have you there Alejandra! th-cam.com/video/LNYY5lGZOcE/w-d-xo.html
I am also so greatful for this tutorial G.
You’re so welcome, Mvelo! And I am grateful for your comment ☺️🙏🏻
Nailed it dude
One of our best wordpress tuts for sure :)
Hey, this was really helpful. but how do you change the color of the text? (when not hovering.)
Try some css like this:
#menu-item-487 a {
color: blue;
}
Nice. Very helpful. Thank you
Gotchu covered Jay!
Thank you, was so useful. How can I manage the height and width of the button, as well as its margins and the black color of text, of the primary menu, please? Thanks again.
Any comment? Thanks.
Shasho Barrón You can change the height and width simply by typing height: (pixel amount) and width: (pixel amount)
Great video, thanks for explaining everything so clearly ;)
Edit: I was using class previous so dot but using# made it very simple. Thanks again!!
Thank you! Is there a way for the button to become thinner?
Yes of course adjust button size or border size in elementor
Thank you so much for this video! My menu button text wasn't centered in the button... any suggestions on how to address this?
Hi! Is there a way to make the menu button link to a modal or popup using a selector in elementor?
Yes of course! You need to install wp video lightbox plugin and add a css selector to the link of the button. i'll send you a video shortly on how to do it :)
Thank you so much! You make my day.
I'm so glad! You make my day too just by commenting!
Greg - thank you so much! You made this so easy and beginner-user friendly.
Awesome video, thanks!
This was awesome! Thank you so much. Everything worked perfectly, except for the link color on the hover. I double-checked to be sure I had the right CSS added, but the link text still stayed the same color when hovered over. I came up with a work-around, but am wondering if something in my theme is overriding the additional CSS? Any ideas? I see you mention the !Important below, but I am not sure how to implement that. Newbie here. Thanks!
Put !important within the css command right before the ; yeah perhaps your theme is overriding, or you’ve target the text instead of the a
@@narayguy That fixed it! Thank you very much!
Great video! Helped alot!
Wooo! 👌😎
Hi Greg! SO happy I found your vid. It worked great for my main header menu but I am having trouble adding the same button to my "mobile menu." How do I inspect my website on a mobile device to get the "menu id?" Or do I add more css for mobile using the same menu id?
Happy to help K and sounds like this Wordpress tutorial worked for ya! Sooo you can write the new css on desktop, and target mobile screen sizes. This will help you target a hamburger menu for example, within which you can target the last menu item... it’s tricky at first but gets much easier ... does that help? 🙏🏻
Hi Greg, thanks so much for this video and you make it fun too... Is there a way to make this button in the menu bar smaller?... I'm getting a BIG button ?? Many thanks
Yes indeed Ant try reducing margin 👌👌
Hi Greg, many thanks for your prompt response.... All parameters work except "Margin" ??? Here is what i have
#menu-item-1872 {
border: 5px solid #FF0000;
border-radius: 10px;
padding: 0px 15px;
margin-left: 12px:
}
#menu-item-1872:hover {
background-color: white
}
Great, in my case I had to use a very long code as I also had a CSS class on the button that triggers my off-canvas form but got it to work eventually.
Good stuff always feels good to trouble shoot a long one
I have this problem. What do you put behind the #?
superb tutorial what is the code for keeping the button color stagnant
Yo Amos! You’re gonna wanna try the opacity 100% I think
@@narayguy how do I do that?
Hi, many thanks for this tutorial which i followed but i'm having difficulty with the size of the button... Its showing a little larger than the menu bar?
Thanks for this! I was going nuts and spending WAY too much time trying to figure out how to do this! What if you want the button on the menu to be a color when it's NOT hovered over? Can you please share the CSS for that?
Try just background: color on the original a css. You’re so welcome btw!
Finally find something useful !
awesome tut man!!! can you do this with elementor? i ahve tried this method but cant seem to change the font color (background no problem). Thanks in advance
Nice video? Whats the case if the menu bar is colored?
muchas gracias senor...esto fue muy útil
Claro que si! Tengo que publicar un video sobre cómo hacer un sitio web de WordPress en español para ver los pasos completos, ¡pero me alegra que hayas podido crear esta función de websire!
Thanks, this is exactly what i want to do but not in the header. i have a little in page nav menu and i want them all to be button like. Do i just do the same but with the link id of the menu item of that non header nav menu? thanks
Yes exactly
Really good and useful tutorial
Hi there, thanks for the tutorials.
For me however, it doesn't work.
When I publish it, the previous settings (i.e. caps + hover text colors + etc.) disappear.
The text becomes not Caps and the hover over text color changed.
Why is this? Greatful for your answer.
Hey Adrian! I’d guess maybe a small punctuation error or you need to use the !important command...
If you’d like, please come join us on Facebook for fast Wordpress support and giveaways! Https://facebook.com/groups/DearBlogger
How to make responsive button? It's weird on other devices.
can you tell us how to add it to the mobile hamburger menu?
Thanks if you open your site in the screenfly mobile response tester then right click on the menu item where you want to add a button, you should see the correct css to work on!
@@narayguy Can you explain more on this? Appreciate this great tutorial
How to align it to the right and make it responsive? Thanks
the border on top and bottom takes up the whole header. Is there a way to make it smaller? I copied the code exactly. Also thank you for the tutorial :)
Great video thank you.
I'm a beginner and I wanted also to know how to add the title in the Menu Bar like you had in this website "Sarah Jones".
I'm working with a theme called "Nirvana"... Is it possible that it is not possible to do it on the theme I'm working with?
Hey no problem Riccardo happy to help! By title do you mean a logo? Yes theme will matter, this is done using astra free theme with the yoga starter site which make editing your Wordpress website so easy!
Join me on Facebook to learn WordPress stuff, optimize your blogging, enjoy giveaways and more! Here’s the link:
facebook.com/groups/DearBlogger
@@narayguy got it, thanks a lot!
yes i meant Logo
Great! Thank you for sharing :)
Of course! 😀
Thank you ✌😉🥂
everything worked but text hover color change doesn't
Keep editing the css, could be just a space or punctuation off. You got this!
I can't find the ID of the menu. It only says == $0, can someone help? It's a bought theme
docs.themeisle.com/article/620-how-to-create-buttons-from-your-menu-items
How to add a button to the standard wordpress menu navigation...you don't need to really build anything, just add some css to a custom link!
Thanks a bunch Mate!
What if a wanted to permanently change the color of that one button? to lets say black?
Thanks a lot!
This is a great tutorial thanks!. worked perfectly. My only issue is I cant change the font color of the button. It's currently black, but adding color:#ffffff!important; does not over write it. Any ideas? I'm using a Divi Child theme if that means anything
Thanks! Just put a space in between the ffffff and the !important. If still nothing, try to update the css thru customize, advanced, css
that's been my problem too!! with the space... still nothing...
in a reply to a comment further down : Try some css like this:
#menu-item-487 a {
color: blue;
}
that worked perfectly... with the color code it didn't but the name of the color it did!
Do I need to create a child theme for this? Will all my custom CSS get overwritten with a new update in my theme?
Thank u dude
very helpful
Thanks and great to see you here
is there anywhere to copy and paste this?
Yes customize then additional css
@@narayguy its easier to just put then close round it, you need to do the css one
You are awesome!!!
No you! 🤪😎
Thank you for the video tutorial :)
This is great thank you! Next time, can you add the code and paste it to the description? :)
For sure Aleena! Great tip 👏☺️ come hang in our Facebook group too for more Wordpress goodness facebook.com/groups/dearblogger
WoW, Thank you.......
It’s easy, right?! ☺️👍
@@narayguy Yes Sir! Dil Mange More Videos Like this
Which url is that?
Hi! Great video. Under "inspect," I'm only getting classes, not a menu item. I tried pulling out the menu item # in the code (#menu-item-6745) and followed your instructions but nothing changed. Can you clarify what I need to do to make this work? Here's the code I got under "inspect." Thanks!
BUTTON
Hey Christie! Ah css hurts when you are so close. Try using the entire wording inside the class “”. Just put a . at the start and paste in the whole class. Or you can also assign custom classes to menu items in appearance menus!
thanks!!!
thnk you
Thanks!
👍👍🔎👨🏻💻
It didn't work
Which part? :(
dear really awesome
New site idea ☺️
dear my css is not working in my wordpress webisyie could please help me
Nice tut. However, the problem is on the responsive side of the website. I did check the website and the website still looks the same :) Here's the mobile view of the website. prnt.sc/pib2jq
:\ i'm the only one who didn't work?
Haha nooo ::( is the css off?
@@narayguy Nope, its on.
I also used a css code to enlarge the page logo, so I'd say it works. I am using Elementor, if this can be useful
Thanks bro 🙏
I am really grateful for this tutorial Greg. Thanks a bunch, I learnt a lot.
Thank you!
You’re welcome happy to help, Angelina!
thank You for that
Yes of course
Thanks a lot!
Very welcome! :)
Thankyou!
very useful
Gotchu covered!
Thanks you!
For sure Idan! 👍👍