Want to make menu page as a button

Hi there,

do you mean the Free Listing Menu item ?

yes

1. Create a new Block Element in Appearance > Elements
2. Add you button
3. set the Hook to: menu_bar_items
4. set the Display Rules to Entire Site

But how can I show the button on mobile in the navigation dropdown?

You don't use a Button. Just style a Menu Item to look like a button.

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

Then the menu, like any menu item can have a sub menu.

So for that i need to create a block element then add the nevigation so that i can make a style with icon like a button using hook? Right

Are you adding other items to your menu ?

Yes i want to add some effects and icons with menu pages like a button

Hi Ajay,

Let me rephrase the question.

Are you adding other menu items to your menu aside from the button menu item?

if yes and if your mobile menu is a dropdown, you can add your styling and effects for this button solely through Custom CSS instead.

Yes

I see. Then, it would be best to use custom CSS.

How would you like the button to look?

Can you share the link to the site in question? You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

i want to add a button like my given URL in the private box. But I want this button before glowing on hover. please try to use less css

Try adding this CSS to your site:

.main-navigation .main-nav ul li.menu-button a {
    border-radius: 10px;
    background-color: #fff;
}
.main-navigation .main-nav ul li.menu-button a:before {
    content: '';
    position: absolute;
    left: -2px;
    top: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    z-index: -1;
    border-radius: 10px;
    background: linear-gradient(45deg, #FF596F, #E41421, #ED207B, #6551CC, #47CCCC, #99CCBB, #FF596F);
    background-size: 400%;
    padding: 2px;
    animation: glowing 20s linear infinite;
}
@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

then in Appearance > Menus - edit your menu, select the menu item and give it a CSS Class of : menu-button
This doc shows you how to add a class to a menu item:

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

Then in Customizer > Layout > Primary navigation, edit the menu item height to make it more button like

everything is ok in desktop but in mobile the border size is too much extra please check in private box I want that small size