Topic: Mega-menu link overrides my button class

Johan
May 13, 2024 at 5:45 am

Hi!
I have created a mega-menu following this tutorial:
https://snippetclub.com/building-a-mega-menu-with-generatepress-blocks/
Everything works fine as long as I have container links. But when I add a link to my button in the menu “Servicecenter” the button size and font doesnt get the same settings I have set in the button class.

I have inspected the code and I really can’t find out why it is happening. Can you give me a hand? 🙂

Best,
Johan
Johan
May 13, 2024 at 6:12 am

Looks like it also overriding my container color on the second grid-block container…
Ying
May 13, 2024 at 11:04 am

Hi there,

Can you try this steps:

1. Clear the cache, then disable cache plugins.

2. Duplicate the block that has the issue and remove the original block, it will generate a new ID for the duplicated block and generate new CSS.

3. If it doesn’t work, go to dashboard > generateblocks > settings, and click Regenerate CSS files.

4. If it still doesn’t work, change the CSS print method to Inline embedding.

Let me know 🙂
Johan
May 13, 2024 at 11:12 pm

Hi!
1. I don’t have any cache plugins, so I didn’t disable any of those 🙂
2. I have rebuilt the element with new css classes system instead, but it won’t pick up the classes.
3. Done.
4. Tried that, didn’t work aswell.

Do you want a login to the site to investigate further?
Alvind
May 14, 2024 at 1:18 am

Hi there,

If you could provide the site login credentials, it would be helpful so we can inspect the issue closely.
Johan
May 14, 2024 at 3:14 am

Added!
Ying
May 14, 2024 at 12:31 pm

Just checked your site again, and it seems the style matches the editor now:

This is what i see https://app.screencast.com/bhEYzvbzvknLV

Let me know 🙂
Johan
May 14, 2024 at 10:19 pm

Hi!
Yup, I got that styling to work but I don’t know what made it work…
But still, the button styling is not working when I add a link to the button. What causes this?
Alvind
May 14, 2024 at 10:48 pm

I have inspected the mega menu element, and the styling appears fine with a link added to the button. Is there anything I missed?
Johan
May 14, 2024 at 10:50 pm

Thanks Alvind. Yes, it overrides the font-size on the button when I add a link to the button.
Alvind
May 15, 2024 at 1:00 am

The font size seems not affected either; it’s 17px in both the editor and the frontend.
Johan
May 15, 2024 at 1:14 am

Hi!
Not when the link is added.. Look at the attached screenshot.
David
May 15, 2024 at 3:41 am
Hi there,

that ill happen as there are very specific customizer typography styles eg.
```
.main-navigation .main-nav ul ul li a {
    line-height: normal;
    padding: 10px 20px;
    font-size: 14px;
}
```
and those are more specific then the button styles.

The only simple way to overcome that is to use some CSS to set the buttons styles inside the mega menu eg.
```
.main-navigation .main-nav .mega-menu .gb-button {
    font-size: 20px;
}
```
Johan
May 15, 2024 at 4:42 am

There we got it. Thank you!
David
May 15, 2024 at 4:55 am

You’re welcome
Johan
May 16, 2024 at 1:40 am
Hi!
Sorry, but I need to open this again.
Now the CSS in the customizer is overriding a regular a link.
I have this code to get the button text white:
```
.inside-navigation .mega-menu .sub-menu > .menu-item a{
	color: var(--white);
	text-decoration: none !important;
}
```
Now, when I add a regular link I want to be black. How do I fix that?

Viewing 16 posts - 1 through 16 (of 19 total)

1 2 →

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Mega-menu link overrides my button class