Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #151543
    vavw
    Participant

    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

    #151574
    Sakin
    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;
    }
    #151577
    vavw
    Participant

    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.

    #151578
    Sakin
    Keymaster

    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;
    }
    #151579
    vavw
    Participant

    That did the trick, many thanks!!

    #151580
    Sakin
    Keymaster

    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.

    #151581
    vavw
    Participant

    Will do once my website is published.

    #151591
    vavw
    Participant

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

    #151595
    Sakin
    Keymaster

    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;
    }
    #151631
    vavw
    Participant

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

    #151633
    Sakin
    Keymaster

    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.

    #151640
    vavw
    Participant

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

    #151641
    Sakin
    Keymaster

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

    #151642
    vavw
    Participant

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

    #151643
    Sakin
    Keymaster

    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.

    #151644
    vavw
    Participant

    It works! Type on my part 😉

    #151682
    Sakin
    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

Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘Modern menu background color tweaks’ is closed to new replies.