Align Mega Menu Sub Menus

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 */
}

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

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.

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

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';
}

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

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 :)

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

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

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

You are welcome!

That site is also save to my favorites :)

Hope you can fix the issue later on!