Archived

This topic is now archived and is closed to further replies.

  • 0

Drop down menu items background color


Question

Posted · Report post

Hi and Good day.

 

I have attached a screenshot in this post. Please, I want to change the blue there to a shade of red... just same with the active bg color on the nav bar cus am not using anything blue on my design.

 

I kinda used google developer tools to locate this

 

.dropdown-menu li.current-menu-item > a {.....

 

So I added this in the custom CSS section on pagelines

 

#menu li .dropdown-menu li.current-menu-item > a { background-color: #cc0033; }

 

But it didn't work. I know I got it wrong... Please help. Thanks

Share this post


Link to post
Share on other sites

11 answers to this question

Posted · Report post

Hi,

 

if you use Chrome and Safari, each has its own CSS inspection tools.  Look for these elements:

.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li.current-menu-item > a

 

Make sure to check the options for Active, Hover and Focus in the inspection tool.   You may see different code.  Copy it, and add it, just as you did with the code above.  Each browser my have a different approach, so it may be necessary to use the code for each.  This is not uncommon.

 

Once you add the code for each browser for those elements (as a group, not individually), then all the browsers will be the same.

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

Try adding this code to your site's Dashboard > PageLines > Site Options > Custom Code:

.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li.current-menu-item > a {
    background-color: rgb(238, 95, 91);
    background-image: -moz-linear-gradient(center top , rgb(238, 95, 91), rgb(189, 54, 47));
    background-repeat: repeat-x;
    color: rgb(255, 255, 255);
    text-decoration: none;
}

Share this post


Link to post
Share on other sites

Posted · Report post

Helo Rob... Thank you for that reply. I have done just as you said but after several refreshing & Clearing  of history of my web browsers (Google Chrome & Safari) I got to realize that changes only showed on Mozilla Firefox and no other... Please what's your take on this?

Share this post


Link to post
Share on other sites

Posted · Report post

OK... lemme try that now...

Share this post


Link to post
Share on other sites

Posted · Report post

Okay.  I'll be back tomorrow, as will my colleagues.

Share this post


Link to post
Share on other sites

Posted · Report post

i just did that  and i got an error on the back-end

 

PageLines Custom LESS/CSS error.

parse error: failed at `.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li.current-menu-item > a` line: 991

Share this post


Link to post
Share on other sites

Posted · Report post

Ok... I figured out Why I had an error... Well... Are there no standard elements (e.g. for chrome, safari or maybe, even explorer) I can add straight?

Share this post


Link to post
Share on other sites

Posted · Report post

Rob

Whew! Am loving this... IT WORKED! Pagelines Rocks! Google Inspection tool Rocks too!! Thanks Rob... I've learnt so much already lately and am glad... Thanks to this forum also.

Below: what I finally did which took effect equally on chrome and safari as well:

--------------------------------------

.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li.current-menu-item > a {
background-color: rgb(238, 95, 91);
background-image: -moz-linear-gradient(center top , rgb(238, 95, 91), rgb(189, 54, 47));
background-repeat: repeat-x;
color: rgb(255, 255, 255);
text-decoration: none;
}

.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li.current-menu-item > a {
text-decoration: none;
color: #fff;
background-color: #BD362F;
background-color: #BD362F;
background-image: -moz-linear-gradient(top,#BD362F,#D33B34);
background-image: -ms-linear-gradient(top,#BD362F,#D33B34);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#BD362F),to(#D33B34));
background-image: -webkit-linear-gradient(top,#BD362F,#D33B34);
background-image: -o-linear-gradient(top,#BD362F,#D33B34);
background-image: linear-gradient(top,#BD362F,#D33B34);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#BD362F', endColorstr='#D33B34', GradientType=0);
}
--------------------------------------

See screenshot below also...

Share this post


Link to post
Share on other sites

Posted · Report post

spacle2xl

 

No problem, happy to help!

;)

Share this post


Link to post
Share on other sites