Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Mega-menu link overrides my button class

  • Hi!
    I have created a mega-menu following this tutorial:
    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? 🙂


  • Looks like it also overriding my container color on the second grid-block container…

  • 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 🙂

  • 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?

  • Hi there,

    If you could provide the site login credentials, it would be helpful so we can inspect the issue closely.

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

    This is what i see

    Let me know 🙂

  • 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?

  • I have inspected the mega menu element, and the styling appears fine with a link added to the button. Is there anything I missed?

  • Thanks Alvind. Yes, it overrides the font-size on the button when I add a link to the button.

  • The font size seems not affected either; it’s 17px in both the editor and the frontend.

  • Hi!
    Not when the link is added.. Look at the attached screenshot.

  • 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;
  • There we got it. Thank you!

  • You’re welcome

  • 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)
  • You must be logged in to reply to this topic.