[Resolved] Align Mega Menu Sub Menus

[troyw]

Hey team,

If you look at my Mega Menu, you will see that the Submenus are hanging outside of the box. I think this has occurred due to the styling of the Top Navigation. How can I get the Sub-menus to sit tidy in the Mega Menu Box?

I’m also wondering where I can control the Font being used for the 3 Sub-Headings?

Thanks

[David]

Hi there,

you have some CSS that adding border-radius to your sub-menus, you can add some padding to that rule eg.

nav .main-nav .mega-menu > ul.sub-menu {
    border-radius: 30px;
    padding: 20px;
}

For the top level sub headings you can edit this rule in the mega menu CSS:

nav .main-nav .mega-menu>ul>li {
    display: inline-block;
    width: 25%;
    vertical-align: top;
    /* add font styles here */
}

[troyw]

Hey,

The border code worked great, thanks.

I’ve tried adding fonts to the Sub Headings rule, but nothing happened.
I tried adding this;
/wp-content/themes/mysite-child/fonts/helveticaneue-blackitalic-webfont.woff2

and I tried this;
helvetica_neueregular

I even tried adjusting the width percentage to see if its size would change and nothing happens either?
Is this Subheading not controlled by a normal H2, H3 and so in, within the Customizer?

I’m not 100% sure what I want to do with the Subheadings yet, but want to find how to control them so I can experiment a bit. Another issue is that they go Grey on Hover, which again, I need to change.

Thanks

[David]

Fonts have to be either enqueued or loaded using @font-face CSS:

https://docs.generatepress.com/article/adding-local-fonts/#using-font-face

The simplest way to generate the @font-face is to use an app like this:

https://www.fontsquirrel.com/tools/webfont-generator

Menus don’t have Headings, those are simply parent items of the menu all of which are simple list items.
The CSS i provide above is how to target them.

[troyw]

Hey David,
Yes, I have added all the fonts using @font-face and they work fine.
What i am not understanding is what to add into the code.

For example, this did not work;

nav .main-nav .mega-menu>ul>li {
display: inline-block;
width: 25%;
vertical-align: top;
helvetica_neueregular
}

and neither did this;

nav .main-nav .mega-menu>ul>li {
display: inline-block;
width: 25%;
vertical-align: top;
/wp-content/themes/mysite-child/fonts/helveticaneue-blackitalic-webfont.woff2
}

Please can you give me an example of what I would put in that area /* add font styles here */

Thanks

[Elvin]

Hi there,

You can use the same font-family: value you used on your @font-face.

Example: say you’ve used font-family: 'Helvetica Neue Regular'; on the @font-face, you can apply the font to an element like this:

nav .main-nav .mega-menu>ul>li {
display: inline-block;
width: 25%;
vertical-align: top;
font-family: 'Helvetica Neue Regular';
}

[troyw]

Hey Elvin,

I gave that a go and still no change.

 nav .main-nav .mega-menu>ul>li {
        display: inline-block;
        width: 25%;
        vertical-align: top;
		font-family: 'Helvetica Neue LT Std';
		    }

I also tried;

nav .main-nav .mega-menu>ul>li {
        display: inline-block;
        width: 25%;
        vertical-align: top;
		font-family: helvetica_neueregular;
		    }

and

nav .main-nav .mega-menu>ul>li {
        display: inline-block;
        width: 25%;
        vertical-align: top;
		font-family: 'helvetica_neueregular';
		    }

Still no change.

Cheers

[Ying]

Hi there,

Do you mean these menu items?
https://www.screencast.com/t/To3uozHN3l

If so, for font-family, try using this selector:

nav .main-nav .mega-menu>ul>li>a {
    font-family: 'helvetica_neueregular';
}

Let me know if this helps 🙂

[troyw]

Thanks Ying,
I added this to line 26 in the Child Theme Style.CSS file and nothing happened.

So, thinking there may be darker forces at work here, I placed the code into the Additional CSS instead and voilà! It worked.

Which leads me to my next question, any ideas why my Style Sheet is not responding to changes?
Cheers

[Ying]

any ideas why my Style Sheet is not responding to changes?

It usually happens when there’s a typo or a format error in your CSS.

You can use a tool like this to check your CSS 🙂
https://jigsaw.w3.org/css-validator/#validate_by_input

[troyw]

Hey Ying,

What an excellent tool that CSS checker is. Thanks for that, its saved to my favourites.

I fixed the error in the CSS, however I still can’t seem to put use any other CSS in the Style Sheet. Very strange!

No big deal for now I guess, I will look into this later.

Thanks

[Ying]

You are welcome!

That site is also save to my favorites 🙂

Hope you can fix the issue later on!

[Author]

Posts