How to add a button to the header nav menu in Elementor WordPress using CSS codes

Published: 08 May 2022
on channel: Tasvir Mahmood

4,794

In this Elementor tutorial video, I am going to show how to add a button to the WordPress header nav menu in Elementor Pro. I have only used a couple of lines of simple CSS codes to turn the last nav menu item in Elementor into a button so it is easier to manage in mobile view, and updates when you change the menu.

class = my-nav

*Copy and paste the CSS codes below*

.my-nav .elementor-nav-menu li:last-of-type .elementor-item {
color:#fff!important;

text-align: center;
background-color: #c0392b;

border-radius: 5px;
}

/*Hover Background color*/
.my-nav .elementor-nav-menu li:last-of-type .elementor-item:hover{

background-color:#000;
}

/*End of CSS code*/

-------------------------------------------

My website:
https://tasvirwebsolutions.com/

𝗖𝗼𝗻𝘁𝗮𝗰𝘁 𝗺𝗲 𝗳𝗼𝗿 𝗵𝗲𝗹𝗽 𝗼𝗿 𝗳𝗼𝗿 𝗺𝘆 𝘄𝗲𝗯𝘀𝗶𝘁𝗲 𝗯𝘂𝗶𝗹𝗱𝗶𝗻𝗴 𝘀𝗲𝗿𝘃𝗶𝗰𝗲𝘀:
[email protected]

Purchase Elementor Pro here:
https://tasvirwebsolutions.com/elemen...

Get Bluehost Hosting, the best for self-hosted WordPress:
https://tasvirwebsolutions.com/bluehost

Watch video How to add a button to the header nav menu in Elementor WordPress using CSS codes online without registration, duration hours minute second in high quality. This video was added by user Tasvir Mahmood 08 May 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 4,794 once and liked it 56 people.

399