CYBER MONDAY SALE! 30% DISCOUNT!! Coupon code:cm30 Enjoy!!!

sub menu background colour

Home Forums Himalayas Free sub menu background colour

This topic contains 5 replies, has 3 voices, and was last updated by  Nilan 6 days, 8 hours ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1396684

    info1323
    Participant

    Hello can you help me sort out the background of my sub menu?

    The main nav menu has black font on a white bg, which is fine….but then there is a horrible black padding area around the sub-menu items.

    Please see here:(Hover mouse on ONLINE COURSES on main menu http://marleneroseshaw.com
    See the horrible black padding around the white menu item. I just want it to be white background with black font. No black in the background.

    Here is all that I have in my Additional css in Customise.
    Big aplologies, I know it is a mess, but I dont know how to tidy it up without losing something I may need!

    /*
    You can add your own CSS here.

    Click the help icon above to learn more.
    */
    .single #primary .posted-on,
    .single #primary .cat-links,
    .blog-content-wrapper .posted-date {
    display: none;
    }

    .caption-title::before, .caption-title::after,
    .caption-title span::after, .caption-title span::before,
    .slider-wrapper .parallax-overlay {
    display: none;
    }
    .caption-title{
    border:none;
    text-transform: title;
    }
    .slider-wrapper .caption-title {
    border-bottom: 0px solid;

    }

    .caption-title {
    font-style: italic;
    font-weight: 600;
    line-height: 190%;
    text-transform: title;
    width: 60%;

    }

    @media (max-width: 768px) {
    .menu-toggle {
    display: block !important;
    }
    }

    #audioplayer{
    margin: 50px auto auto auto;
    text-align:center;

    }

    #text-20{
    text-align: center;
    color: #ffffff;
    font-size: 34px;
    font-style: italic;
    font-weight: bold;
    padding-left: 12%;
    padding-right: 5%;
    padding-top: 2%;
    padding-bottom: 2%;
    margin-left: 15%;
    margin-right: 10%;
    width: 65%;

    }

    #convertkit_form-2{
    text-align: center;
    color: white;
    background-color: #99873f;
    padding: 20px;
    }

    #convertkit_form-4{
    padding-top: 1px;
    margin-top: 1px;
    }

    .entry-meta {
    display: none;
    }

    .entry-content a {
    font-weight: bold;
    color: #FF4500}

    #text-23{
    padding-left: 12%;
    padding-right: 5%;
    margin-left: 12%;
    margin-right: 5%;
    }

    #media_video-2{
    padding-left: 12%;
    padding-right: 5%;
    margin-left: 15%;
    margin-right: 5%;
    width: 65%
    }

    .transparent .header-wrapper, .non-transparent .header-wrapper{
    background: #ffffff!important;
    }

    #site-navigation .menu li a {
    color:#000;
    }

    .header-wrapper.stick #site-navigation .menu li a, .header-wrapper.no-slider #site-navigation .menu li a {
    color: #000 !important;
    }

    .transparent .header-wrapper, .non-transparent .header-wrapper{
    background: #ffffff!important;
    }

    #site-navigation .menu li a {
    color:#000;
    }

    .sub-menu li a {
    background: #ffffff;

    }

    .header-wrapper.stick #site-navigation .menu li a, .header-wrapper.no-slider #site-navigation .menu li a {
    color: #000 !important;
    }

    #testimonialrotatorwidget-2
    {
    font-style: italic;
    padding-left: 12%;
    padding-right: 5%;
    padding-top: 4%;

    margin-left: 15%;
    margin-right: 15%;
    width: 65%;

    }

    #site-navigation .menu-primary-container,
    #site-navigation div.menu {
    background: #ffffff none repeat scroll 0 0; /*original 333333*/
    left: 0;
    position: relative;
    top: 100%;
    width: 100%;
    display: none;
    z-index: 99;
    }

    #1396811

    Nitu Shrestha
    Moderator

    @info1323

    Can you Add the below CSS code to Additional CSS box and check?

    #site-navigation ul.sub-menu, .home.non-transparent #site-navigation ul.sub-menu{
    background: #fff;
    }

    Thanks.

    #1396860

    info1323
    Participant

    Thank you. this works perfectly on the desktop. However, I have no menu showing on my iphone – is this because it is white on white? I cant see any menu on the iphone to tap on at all? How can I fix this?

    #1396989

    Nilan
    Moderator

    Hi,
    Try the custom CSS below by adding it to the additional CSS box.

    @media (max-width: 768px) {
        .menu-toggle {
            color: inherit;
        }
    }

    Regards,
    ThemeGrill Support

    • This reply was modified 6 days, 9 hours ago by  Nilan.
    • This reply was modified 6 days, 9 hours ago by  Nilan.
    #1396997

    info1323
    Participant

    When I add that in custom css, it cmes up as an error.
    The . just before menu-toggle comes up with a red squiggly line below it

    #1397077

    Nilan
    Moderator

    Hi,

    Your site’s hamburger menu color is in white color that’s why it is not visible in mobile devices. Please copy the above custom CSS properly again and paste it to the additional CSS box. If still the issue exists do let us know.

    Regards,
    ThemeGrill Support

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.