How to Make This

Hi there,

This should help:
https://docs.generatepress.com/article/adding-buttons-navigation/

Let me know :)

I think I am making something wrong again, i have pasted css into an additional CSS Section in customizer but things not working, no button appears???

help..

Did you follow step 1 in the article that Leo provided ?

I tried to follow but stuck in add a custom class in nav menu, I saw that and added custom class from screen of top, but could not understand where should i paste the CSS there which is been given in article??

it was bit confusing for me ...so created custom class but where should i paste CSS code ??

Does this help?
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

no, I did this and followed all the steps, but didn't get any result, seems I am making something wrong...Don't know how to check now

Can you follow the steps again and link me to the page in question if it doesn't work?

I tried whole day, and did something, but still something is missing which i have requested, i used below CSS but its not looking as same i want -

/* Navigation styles */
@media (min-width:769px) {
.main-navigation .main-nav ul li.nav-button a {
border-width: 3px;
border-style: solid;
border-color: inherit;
border-radius: 5px;
line-height: 3em;
}
}

now what is missing is -

some hover effect
Border
want to reduce some width and height to make equal, Below is url to check -

https://venusentertainments.com/

Can you clear and disable your caching plugin first?

Done, deactivated now

I'm seeing this CSS added:

/*for account button in header*/

/* Navigation styles */
@media (min-width:769px) {
	.main-navigation .main-nav ul li.nav-button a {
		border-width: 3px;
		border-style: solid;
		border-color: inherit;
		border-radius: 5px;
		line-height: 3em;
	}
}

and also this:

@media (min-width:769px) {
    .main-navigation .main-nav ul li.nav-button a {
        background-color: #ffffff;
        border: 2px solid #000000;
        color: #000000;
        line-height: 35px; /*this number will likely need to be adjusted*/
    }
}

Can remove the first block first?

Below is deleted now -

/*for account button in header*/

/* Navigation styles */
@media (min-width:769px) {
.main-navigation .main-nav ul li.nav-button a {
border-width: 3px;
border-style: solid;
border-color: inherit;
border-radius: 5px;
line-height: 3em;
}
}

So what isn't working?

The border is indeed working - it's just not obvious as your navigation background is also a dark color.

You can see it working if you use 2px solid #ff0000; instead of 2px solid #000000;:
https://www.screencast.com/t/mFyA1yMCW

okay..