- This topic has 16 replies, 2 voices, and was last updated 6 years ago by
Sakin.
-
AuthorPosts
-
August 13, 2018 at 8:22 am #151543
vavw
ParticipantHi,
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
August 13, 2018 at 2:05 pm #151574Sakin
Keymaster@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; }
August 13, 2018 at 2:19 pm #151577vavw
ParticipantThat 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.
August 13, 2018 at 2:27 pm #151578Sakin
KeymasterHi 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; }
August 13, 2018 at 2:30 pm #151579vavw
ParticipantThat did the trick, many thanks!!
August 13, 2018 at 2:32 pm #151580Sakin
KeymasterHi 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.
August 13, 2018 at 2:36 pm #151581vavw
ParticipantWill do once my website is published.
August 13, 2018 at 7:08 pm #151591vavw
ParticipantHow do I do the same for sub-menu’s ?
August 13, 2018 at 10:25 pm #151595Sakin
KeymasterThat 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; }
August 14, 2018 at 4:50 am #151631vavw
ParticipantUnfortunately that does not work. The background color of the submenu’s remains white.
August 14, 2018 at 5:00 am #151633Sakin
KeymasterCan 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.
August 14, 2018 at 6:21 am #151640vavw
ParticipantWorks for the submenu background color (thanks!) but not for the font color.
August 14, 2018 at 6:24 am #151641Sakin
KeymasterI need your site url now to check in as the code works for me here. So, I need to check your site settings.
August 14, 2018 at 6:25 am #151642vavw
ParticipantMy site is not yet online as a lot of work remains to be done.
August 14, 2018 at 6:30 am #151643Sakin
Keymasterok 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.
August 14, 2018 at 6:30 am #151644vavw
ParticipantIt works! Type on my part 😉
August 14, 2018 at 11:37 pm #151682Sakin
Keymaster@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
-
AuthorPosts
- The topic ‘Modern menu background color tweaks’ is closed to new replies.