Best solution for setting up a top menu

  • I want to layout a nice-looking top menu with a custom font and the option to set up spacing etc. It seems that setting up the menu in Elementor requires Elementor Pro and I’m looking to do it without.

    I’m using Max Mega Menu plugin at the moment but it also requires either CSS or a pro version. So 2 questions:

    Is there a plugin that will enable this without paying for it?

    Could someone show me how to customize the font inside a Max Mega Menu with CSS?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator bcworkz

    (@bcworkz)

    Use your browser’s element inspector tool to examine the HTML/CSS of a menu item. Find the CSS rule that defines the font family used. Copy the selectors used along with the rule to the Additional CSS customizer section and revise the specified fonts. If you are using web fonts, you will also need an appropriate link tag pointing to the web font resource within the page’s head section.

    Someone could give you more specific instructions if you can provide a live link to a page whose menu font you want to alter.

    Thread Starter superdep

    (@superdep)

    Thanks for the inputs. It seems to require that I set out to study some basic css and the workings of the plugin (max mega menu)

    I have tried now by changing the css and using the inspector. No success yet but I’ll continue. Here is a link for the site:

    https://www.temporary-url.com/F003

    Moderator bcworkz

    (@bcworkz)

    You don’t need to know too much about the mega menu’s workings to alter the CSS appearance. Some CSS is relatively simple to alter, others are quite tricky. I think it’s worth learning at least the fundamentals because of the control it gives you over your site’s appearance. In this case, finding the right selectors and rule turned out to be rather tricky. Don’t be discouraged because you couldn’t figure it out. Add this to the Additional CSS customizer section:

    #mega-menu-wrap-main_menu #mega-menu-main_menu a {
    font-family: "Arial Black", sans-serif !important;
}

    Use whatever fonts you want here. I used Arial Black just so it’s really obvious when my rule is applied. You might see if this will work without the !important modifier. It doesn’t in the element inspector, but it might in the Additional CSS section. We should only use !important when there is no other choice.

    Thread Starter superdep

    (@superdep)

    Thanks a lot man! I really appreciate it.
    I found a good intro to CSS on youtube to understand the fundamentals and progress from there.

    Your code worked immediately and I’ll tweak and test myself to see if I can also move the position of the entire menu.

    BTW it seems to only work with the !important added as you said with the element inspector

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Best solution for setting up a top menu’ is closed to new replies.