[vavw]

Hi,

Is it possible to change the Modern Menu Type background by custom CSS, or as a theme option? I would like to set it to transparent.

Cheers,

Victor

[Sakin]

@vavw: You can change the color code in the following css as per your need and then add it in “Appearance => Customize => Additional CSS” box:

.main-navigation a {
	background-color: #fff;
}

[vavw]

That changes the color of the wrapper, it does not make menu items in the modern menu transparent / opacity 0.

#menu-item-20 a {
background-color: rgba(0,0,0,0);
}

… works for specific menu items. Would be nice to have this apply to all menu items in the modern menu, while leaving the classic menu untouched.

Also, I am trying to tweak the color of the modern menu text to white. Have yet to find the css that works.

[Sakin]

Hi Victor,

If you want to make it transparent then it’s the following css. Your color needs to be in rgba. IN the following css, color #fff is the color code fro menu text.

.navigation-modern .main-navigation a {
    background: rgba(0,0,0, 0.1);
    color: #fff;
}

[vavw]

That did the trick, many thanks!!

[Sakin]

Hi Victor,

Thanks and if you like our theme and the support, then please post in your valuable review at https://wordpress.org/support/theme/adonis/reviews/#new-post. I would really appreciate it.

Thanks a lot.

[vavw]

Will do once my website is published.

[vavw]

How do I do the same for sub-menu’s ?

[Sakin]

That css, should change the modern menu background and text color for main menu items and it’s sub-menu. But if you are trying to change the dropdown toggle button color, then you can add the following css:

.dropdown-toggle,
.dropdown-toggle:hover,
.dropdown-toggle:focus {
	color: #fff;
}

And if you want to give different color to sub-menu then you can add the following css:

.navigation-modern .main-navigation .sub-menu a {
	color: #fff;
}

[vavw]

Unfortunately that does not work. The background color of the submenu’s remains white.

[Sakin]

Can you send me your site URL so that I can check in. Are you talking about Modern menu or classic menu. For classic menu sub-menu background color it’s as below:

/* For Classic Menu Sub-menu background Color */
.navigation-classic .main-navigation ul ul {
    background: rgba(0,0,0, 0.1);
}
/* For Classic Menu Sub-menu text Color */
.navigation-classic .main-navigation ul ul a,
.navigation-classic.absolute-header .main-navigation ul ul a {
    color: #fff;
}

So, send me your site URL so that I can check in which css is working and not.

[vavw]

Works for the submenu background color (thanks!) but not for the font color.

[Sakin]

I need your site url now to check in as the code works for me here. So, I need to check your site settings.

[vavw]

My site is not yet online as a lot of work remains to be done.

[Sakin]

ok let me know when it’s live or you can show me your test site now. Once, I get your site URL, I will be able to give you custom css.

[vavw]

It works! Type on my part 😉

[Sakin]

@vavw: Cool,thanks for using Adonis pro theme. If you like our theme and support, then please support us by providing your valuable review and rating at https://wordpress.org/support/theme/adonis/reviews/#new-post

[Author]

Posts