Changing drop down menu background colour

  • Author
  • #3052900

    I am using the theme Vacation Lite which comes with its own customisation menu set up by the theme creator. However I found the customisation limited and inflexible so I starting editing the style.css code and now the drop down menu background is clear. It used to have colour which was applied through the customisation menus set up by the theme creator.
    I have posted the style.css code below for the navigation menu.

    Thank you for your help, I’ve spent hours trying to fix it!

    .main-container{margin:0; padding:0;}
    .header.fixed{position:fixed !important; top:0 !important; margin:0; padding:15px 0; z-index:99; background-color:#e8c87f; opacity:inherit;}
    .header .header-inner{ margin:0 auto; padding:0; position:relative; width:1160px;}
    .header .header-inner .header-top { padding:5px 0; background:#e8c87f;}
    .header-top .top-left { float:left; padding-left:27px;}
    .top-left p { float:left; display:inline-block; font:700 13px ‘Roboto’; color::#ad721a; margin:0; padding:10px 15px 10px 0;}
    .top-left p a { color::#ad721a;}
    .top-left p:first-child { padding-left:0;}
    .top-left .fa-envelope, .top-left .fa-phone { color::#ad721a; margin-right:10px; position:relative; top:2px;}
    .header-top .top-right { float:right; padding-top:5px; padding-right:10px;}
    .header-top .top-right .social-icons a { height:25px; width:25px; font-size:16px; margin-bottom:0; margin-right:5px; color:#ffffff;}
    .header .header-inner .header-bottom { padding:20px 0;}
    .header .header-inner .logo{margin:0; padding:0; }
    .header .header-inner .logo h1{ font-weight:700; text-transform:uppercase; padding:0; margin-bottom:8px; font-size:27px; font-weight:bold; }
    .header .header-inner .logo a{ font-family:’Open Sans’;}
    .header .header-inner .logo p{ font-size:12px; font-family:Open Sans; color::#ad721a;}
    .container{ width:1160px; margin:0 auto; padding:0; position:relative;}
    .header{position:absolute; z-index:999; width:100%; height:auto; padding:0px; background-color:rgba(0,0,0,0.2);}
    .header .header-inner .nav{ margin:0; padding:0; text-align:right; float:right;}
    .header .header-inner .nav ul { float:right; margin:14px 0 0; padding:0; font-family:’Open Sans’; font-weight:700; font-size:15px;}
    .header .header-inner .nav ul li{ display:inline-block; margin:0; position:relative;}
    .header .header-inner .nav ul li.current-menu-item { background::#e8c87f; border-radius:5px;}
    .header .header-inner .nav ul li a{ color::#ad721a; padding:5px 20px; display:block;}
    .header .header-inner .nav ul li a:hover{color::#ad721a; background::#e8c87f; padding:5px 20px; border-radius:5px;}
    @media screen and (min-width:1000px){
    .header .header-inner .nav ul li ul{display:none; z-index:2;}
    .header .header-inner .nav ul li:hover > ul{display:block; background:#e8c87f; width:165px; position:absolute; top:18px; left:0; text-align:left; box-shadow:5px 5px 5px #1e1e1e; }
    .header .header-inner .nav ul li:hover ul li a { color::#ad721a;}
    .header .header-inner .nav ul li:hover ul li a:hover { padding:10px 20px; border-radius:0;}
    .header .header-inner .nav ul li:hover ul li ul{display:block; background:#e8c87f; width:165px; position:absolute; top:18px; left:0; text-align:left; box-shadow:5px 5px 5px #1e1e1e;
    .header .header-inner .nav ul li:hover ul li:hover > ul{display:block; position:absolute; left:165px; top:-14px; box-shadow:5px 5px 5px #1e1e1e; }
    .header .header-inner .logo{float:left; margin-top:8px; }

    .services { width:100%; margin:0 auto; position:relative; }
    #services-box { width:30%; height:auto; display:inline-block; float:left; text-align:center; margin:0 14px 0 0; padding:0 9px 9px 2px; position:relative; transition:0.3s; border-bottom-left-radius:5px; border-bottom-right-radius:5px; border-top-right-radius:5px; }
    .last { margin-left:0 !important;}
    #services-box:hover {cursor:pointer;}
    #services-box img {width:82px; height:82px; display: block; margin:auto; border-radius:50%;}
    #services-box h2 { text-transform: uppercase; padding:20px 0;}
    #services-box h2 span { font-size:40px; font-style:normal; display:block; margin:10px 0 0; line-height:36px; }
    #services-box p { margin-bottom:30px;}
    #services-box i.fa {display: inline-table; height:100px; text-align: center; width:100px; font-size:4em; color:#222222;}
    #services-box a.check { background::#e8c87f; padding:10px 10px; color:#ad721a; font:700 14px ‘Open Sans’; }
    #services-box:hover a.check { color::#e8c87f; background::#ad721a;}
    #services-box:hover i.fa, #services-box:hover p { color::#ad721a;}
    .services-inner { background::#e8c87f; padding:30px 20px; }
    #services-box:hover .services-inner { background::#e8c87f;}



    Hi @helenalapworth,

    Can you tell us what site it is you need help with?




    Hi Ally

    It is

    Many thanks


    Hi Ally

    It is

    Many thanks



    Hi Ally

    I have finally found code to fix it using:

    /* Menu dropdown */
    .menu li li {
    background: #fff;
    background-image: none;
    border: 1px solid #e5e5e5;
    color: #444;
    filter: none;
    margin: -1px 0 1px 0;
    width: auto;

    Thanks for following up on my initial post

The topic ‘Changing drop down menu background colour’ is closed to new replies.