Wrong menu button shape

[hiegl]

Hi,

how is the menu item button shape controlled? I have set Theme Options > Button settings to Extra Round but my menu button still appears, what looks like Round (3px Radius). Setting to Square also doesn’t work. Did I miss something?

Best,
Bernhard

Topic

[Marius1989]

Hey Bernhard,

as far as I am aware, unfortunately this is not possible at the moment (I might also missing something). 3px border-radius is the current default and can’t be changed inside the WP menu item options. What you tried to change is just the default button settings, which has no effect to the menu items.

Since the border style is controlled by the “grve-link-wrapper” class, you don’t even can just insert a predefined class like “grve-extra-round” or custom class via the WP menu settings. You are only able to add classes to its direct parent (list class) or child class (link class), not the actual class (wrapper class) istelf.

So there are 2 options you have to get around at the moment.

1.) Write your own CSS. You can target your desired menu item by adding your own class inside the “CSS class” field. You might enable this option first via the screen settings which can be found on the top right inside the WP menu settings. Just check the CSS classes field under “advanced menu properties”. After that it should be no problem to style your desired menu item.
I would’ve add a link for a small visual guide but apparently you are not allowed to do that, since your post won’t be shown in public then (unless you are a moderator or so). I posted something 2 days ago which still isn’t visible yet. So sorry for that.

2.) Keep your menu item as default, not as button or as outline. Add your desired css classes to the menu link itself, which can be found in the WP menu item settings under “Link CSS Classes”. Here you can also use all predefined button classes like “grve-btn-outline” “grve-extra-round” “grve-border-primary-1” to style your menu item to your wishes, like size, color, border radius, hover color, etc. Don’t forget to add “grve-btn” as a default class to make this work correctly.

Hope that helps.

###

A simple option in the WP menu settings, when Button or Outline is selected, would be much appreciated, to switch between the current 3 presets (default, round, extra round). Or even more advanced a 4th option, to set your own custom border radius.

In gerneral it would be helpful to have some more button options in this area.
I know this will never happen, but a menu item button designer, with (at least some more) options like in the page builder, would be great.
What we have so far is very limited. More options would be appreciated, like custom icon, etc. where it is not just some custom CSS which can fix the lack of some missing features.

[hiegl]

Hey Marius,

thanks. I am familiar with writing custom CSS for this. This works for me:

#grve-main-header .grve-header-menu .grve-first-level.grve-menu-type-button > .grve-link-wrapper a .grve-item {
    border-radius: 30px;
}

Just wondered, if this is on purpose, as in Crocal it is in fact controlled by the default button settings, which is, what I would consider the most consistent architecture.
Not sure, if I would ask for more options, as every option adds to the overall performance.

Cheers,
Bernhard

• This reply was modified 4 years, 7 months ago by hiegl.
• This reply was modified 4 years, 7 months ago by hiegl.
• This reply was modified 4 years, 7 months ago by hiegl.

[Marius1989]

Hey Bernhard.

Thanks for your feedback, glad you sorted it.
I agree, more options also adds to overall performance and I also prefer to adjust more in-depth customizations via CSS.
Sometimes you still need some more options, because you can’t add something with CSS. First, it needs to be there to customize it yourself.

But if you are trying to set the menu item border radius in the general theme button settings, you should recognize yourself, something is missing.

This is such a basic option, which should be available, as soon as you offer the option for a button – for each menu item individually.
Yes, your solution might be sufficient for someone who knows CSS or has a very basic menu.

I mean we could discuss that topic further, if the border-radius would be handled via the menu item link, but it is handled by its parent class, for whatever reason. So I don’t even have the chance to manage my classes in the menu settings itself.

[hiegl]

Hey Marius,

very good reasoning. Let’s wait until one of the crew gives us some insight on the architectural decision behind this.

Have a nice sunday!

[Kosmas]

Hi guys! Thanks for your feedback.

We will investigate it further to see how we can improve it. It seems that we were focused on the custom mega menu with the usage of the area items 🙂

[Kosmas]

I think we’ve made the needed improvements for this one. Thanks for your feedback guys!

[hiegl]

Thanks Kosmas. Works perfectly now!

[Marius1989]

Thanks a lot for the improvements and the new shape feature! This is amazing, Kosmas.

One question still. Is it intentional, when I select the button option and the default color, the primary color is applied instead?
How can I make it work like the Outline option behavior, which applies my colors from the customizer, when default color in the menu item settings is selected?

[Kosmas]

That’s great guys!

Yes, when you select the default color you will have the default menu color (maybe this is what you’ve missed) or the primary color. You can still select any color from the primary ones, just like the button outline options. I don’t see any restriction here.

[Marius1989]

Alright, so there is actually no default setting for the button option, is this correct?
Since I’m not able to set any button background color in the customizer for the different header types, this makes sense.
So no options for buttons to change the colors dynamically, depended on the current header (default or sticky), like seen on the menu item outline type (e.g. Homepage 3 demo).

Thanks again for making things clear.
Cheers!

[Kosmas]

This is exactly what the default option does. If you select this option, the button color will follow the current header skin. You can try it on Homepage 3 for example.

Hope this makes sense.

[Marius1989]

This was exactly I was talking about. Homepage 3 has an Outline Menu Item, not a Button Menu Item.
Outline Menu Item works perfectly fine. Button Menu Item is not changing according to Customizer Header Skin settings.

[Kosmas]

Thanks Marius.

In this case, what will be the colors of the button menu item? Light or dark background and with which Header? I think that we make this too complicated, there is no reason actually.
When someone needs a button with a solid color in the header, this button should stand out. The color options are more than enough to achieve this.

[Marius1989]

Thank you Kosmas, for taking your time to discuss things with the community.
My personal opinion is the following.

With the current implementation of menu item buttons, we have the most possible freedom in a theme I ever experienced.
I was just a bit confused, because the default color of the button option makes actually nothing – no matter which kind of header, unlike the outline default color. At least on my end this is the case. So why don’t just remove it?

With all the freedom we have, I think there are just too many possible cases with all the different headers and their own defined background colors, especially with the overlapping header, where you just can’t predict the background color of the first page section, so you can’t for the button background.

Just a quick, very basic example here:
– A white button with black text color, using header overlapping with a blue background color section, will just disappear after scroll, having a white sticky header. Only the black text will be visible, the button shape won’t.
There are many more possibilities with contrast issues of page backgrounds or all the different header possibilietes like default, light, dark, sticky, etc.

I guess you just have to find the right balance in your color palette. You still have the opportunity to override the button color per page with just 1 line of custom CSS, maybe 2 if you have to adjust the sticky header button colors or hover state, too.

Additional options for button colors per header type (default, light, dark, sticky) would the only way that makes sense, imo.
But would that be an overkill? Is it too specific?

I would love to hear other opinions on that.
Buttons in the menu can be more tricky (color-wise), than someone would expect, unless you encounter issues here and there.
Actually, I am not even sure what to think about this topic. Sure thing, I don’t need something like that necessarily.
But what about you, guys? Sometimes you just need some options available for your clients, so they can make changes easily.

I know you are a small team and focussing your resources on the roadmap and/or more useful features/improvements might be the better bet here.
Thanks!

[Kosmas]

Hi Marius! Thanks for your analysis, it’s much appreciated.

Only a few quick answers:

1. There is no need to add more dependencies in the menu code just for removing the Default option for the classic button.
2. Regarding your quick example, I totally agree that users have to find the right balance in their color palette.

In general, we have some plans for the buttons in the header but we need to investigate these further. At this phase, we have made all required fixes.

Thanks!

[Author]

Replies