[Support request] Want to make menu page as a button

[Ajay]

How to make menu page as a button. I am using generatblocks pro, so is there any possibility of controlling that button design through a global style?

[David]

Hi there,

do you mean the Free Listing Menu item ?

[Ajay]

yes

[David]

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

[Ajay]

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

[David]

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.

[Ajay]

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

[David]

Are you adding other items to your menu ?

[Ajay]

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

[Fernando]

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.

[Ajay]

Yes

[Fernando]

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

[Ajay]

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

[David]

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

[Ajay]

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

[Author]

Posts