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!!
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!
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? 🙏🏻
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!
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, 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 }
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.
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 ua-cam.com/video/SuY3LhXwuzk/v-deo.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! ua-cam.com/video/LNYY5lGZOcE/v-deo.html
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
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?
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 :)
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?
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
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!
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.
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 :)
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!
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.
I never comment on UA-cam videos, but you just saved my life with this code. A++ You're an incredible teacher!
Thanks so much for this - first bit of CSS I've ever tried and it worked!
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!!
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 👏☺️
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!
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;
}
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? 🙏🏻
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!
You should paste the css text in description so anyone can copy and paste and no need to type. very helpful btw
Good idea 😃
Thank you! Is there a way for the button to become thinner?
Yes of course adjust button size or border size in elementor
Great tutorial!!! Thank you!
Very welcome!
Thank you so much for this video! My menu button text wasn't centered in the button... any suggestions on how to address this?
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!
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
}
Nailed it dude
One of our best wordpress tuts for sure :)
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)
Thanks, exactly what I was after ! we need more of this and less plugins !
Totally!
Thanks Greg for the very useful tutorial!
Yes of course doin what I do thanks for commenting!
Greg - thank you so much! You made this so easy and beginner-user friendly.
Nice. Very helpful. Thank you
Gotchu covered Jay!
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 ua-cam.com/video/SuY3LhXwuzk/v-deo.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! ua-cam.com/video/LNYY5lGZOcE/v-deo.html
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
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!
I am also so greatful for this tutorial G.
You’re so welcome, Mvelo! And I am grateful for your comment ☺️🙏🏻
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!
Great video, thanks for explaining everything so clearly ;)
Nice video? Whats the case if the menu bar is colored?
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 :)
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?
Awesome video, thanks!
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
Thank you so much! You make my day.
I'm so glad! You make my day too just by commenting!
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!
Great video! Helped alot!
Wooo! 👌😎
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 #?
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 :)
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
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?
Edit: I was using class previous so dot but using# made it very simple. Thanks again!!
How to align it to the right and make it responsive? Thanks
Finally find something useful !
How to make responsive button? It's weird on other devices.
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
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
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
Really good and useful tutorial
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!
everything worked but text hover color change doesn't
Keep editing the css, could be just a space or punctuation off. You got this!
Thanks a bunch Mate!
What if a wanted to permanently change the color of that one button? to lets say black?
Great! Thank you for sharing :)
Of course! 😀
Thank you ✌😉🥂
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
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
Thanks a lot!
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
You are awesome!!!
No you! 🤪😎
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!
Thank you for the video tutorial :)
Which url is that?
very helpful
Thanks and great to see you here
thnk you
WoW, Thank you.......
It’s easy, right?! ☺️👍
@@narayguy Yes Sir! Dil Mange More Videos Like this
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!
It didn't work
Which part? :(
Thanks!
👍👍🔎👨🏻💻
thanks!!!
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
I am really grateful for this tutorial Greg. Thanks a bunch, I learnt a lot.
Thanks bro 🙏
thank You for that
Yes of course
Thank you!
You’re welcome happy to help, Angelina!
Thanks a lot!
Very welcome! :)
very useful
Gotchu covered!
Thankyou!
Thanks you!
For sure Idan! 👍👍