Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • October 22, 2017 at 9:06 pm #867312
    ScottYetter

    Hi, I need to change the colors the following for the main menu drop-down on my site and can’t find the option anywhere.

    – The color of text and backgrounds
    – The color of text and backgrounds on hover state
    – I also want the option to turn off the shadow on the drop down
    – Remove the line surrounding the drop-down

    I have included a link below. Thank you!

    October 22, 2017 at 10:18 pm #867355
    Mike

    Hey ScottYetter,
    Try using the Enfold Theme Options > Advanced Styling > Main Menu Links and check the box Apply only to mouse hover state for the hover state. This means that you need to use this option twice, one checked, one not.
    For the box shadow and the line try this code:

    .av-main-nav ul {box-shadow: none!important;} 
.av-main-nav > li > ul {
    border-top-width: 0px!important; 
    border-top-style: none!important; 
}

    Best regards,
    Mike

    October 23, 2017 at 7:20 am #867472
    ScottYetter

    Hi Mike. Removing the lines and shadow worked great.

    The other changes are not working via the advanced styling page. I think I make have conflicting custom CSS added already. If it helps, here is the custom CSS I have added:

    .html_header_top.html_logo_center .logo {
    left: 0;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    }
    .av-main-nav > li > a {
    padding: 65px 30px;
    }
    #top .av_header_transparency .avia-menu-fx {
    width: 55%;
    left: 23%;
    }
    .sub_menu li {
    border: none;
    }
    #scroll-top-link {display: none;
    }
    #top #header.header_color.av_header_transparency .av-main-nav > li > a .avia-menu-text {
    height: 37px;
    display: inline-block;
    }
    #top #header.header_color.av_header_transparency .av-main-nav > li:hover > a span.avia-menu-text {
    border-bottom: 2px solid;
    }
    #header_meta {
    position: absolute;
    right: 0;
    border-bottom: 0;
    padding-top: 20px;
    }
    @media only screen and (max-width: 767px) {
    #header_meta {
    width: 100%;
    padding-top: 0;
    }
    #header_main {
    padding-top: 20px;
    }
    }
    #top .av_header_transparency #header_meta {
    border: none;
    }
    #top #header.header_color.av_header_transparency .av-main-nav > li.current_page_item > a .avia-menu-text {
    border-bottom: 2px solid #fff;
    }
    span.avia-menu-fx {
    display: none;
    }
    .template-page .entry-content-wrapper h1, .template-page .entry-content-wrapper h2{
    text-transform:none!important;
    }
    .template-page .entry-content-wrapper h1, .template-page .entry-content-wrapper h1{
    text-transform:none!important;
    }
    .template-page .entry-content-wrapper h1, .template-page .entry-content-wrapper h3{
    text-transform:none!important;
    }
    .template-page .entry-content-wrapper h1, .template-page .entry-content-wrapper h4{
    text-transform:none!important;
    }
    .template-page .entry-content-wrapper h1, .template-page .entry-content-wrapper h5{
    text-transform:none!important;
    }
    #top .dropdown_widget .buttons .button {
    background: #666;
    }
    @media only screen and (max-width:959px) and (min-width:768px) {
    .home #header #avia-menu {
    position: relative;
    top: 120px;
    }
    }

    .av-main-nav ul {box-shadow: none!important;}
    .av-main-nav > li > ul {
    border-top-width: 0px!important;
    border-top-style: none!important;
    }

    October 23, 2017 at 10:33 am #867526
    Mike

    Hi,
    I don’t see any conflicts, try this code and adjust to suit:

    
/*menu text color*/ 
.header_color .main_menu ul:first-child > li > a {color: blue !important;}
/*menu background color*/
.header_color .main_menu ul:first-child > li > a {background-color: tan !important;}
/*menu text hover*/
.header_color .main_menu ul:first-child > li > a:hover {color: red !important;}
/*menu background color hover*/
.header_color .main_menu ul:first-child > li > a:hover {background-color: black !important;}
/*sub-menu text color*/
.header_color .main_menu .menu ul li a {color: black !important;}
/*sub-menu text hover*/
.header_color .main_menu .menu ul li a:hover {color: blue !important;}
/*sub-menu background color*/
.header_color .main_menu .menu ul li a {background-color: red !important; }
/*sub-menu background hover color*/
.header_color .main_menu .menu ul li a:hover {background-color: green !important; }

    Best regards,
    Mike

    October 24, 2017 at 6:41 am #867990
    ScottYetter

    Hi, that worked, but now the white outline is back, any way to remove that? Thanks!

    October 24, 2017 at 6:54 am #868000
    ScottYetter

    One more questions is it possible to center the drop down under the main menu item above?

    October 26, 2017 at 4:43 am #869036
    Ismael

    Hi,

    Thank you for the update. Could you provide a screenshot of the “white outline”? Are you referring to the theme’s hover effect?

    Best regards,
    Ismael

    October 26, 2017 at 6:16 am #869059
    ScottYetter

    There is a 1 pixel white outline around the main menu dropdown. Sorry, can’t do a screenshot right now.

    October 26, 2017 at 8:18 am #869129
    Ismael

    Hi,

    Thank you for the update. Please try the following css code.

    .av-main-nav ul li a {
    border: 0;
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.