Jump to content


Photo
- - - - -

Drop down menu items background color

background color Drop down menu menu items

Best Answer Rob , 07 July 2013 - 07:16 PM

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.

Go to the full post


  • Please log in to reply
11 replies to this topic

#1 spacle2xl

spacle2xl

    Member

  • Members
  • 20 posts
  • Framework Version:2.4.4
  • Country: Country Flag

Posted 07 July 2013 - 08:18 AM

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

Attached Files



#2 batman

batman

    Bat Learning

  • Members

  • 1755 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 07 July 2013 - 10:37 AM

Hi there

Please you can take a look this

Please Login or Register to see this Hidden Content



#3 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 07 July 2013 - 02:49 PM

Hi,

 

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

Please Login or Register to see this Hidden Content



#4 spacle2xl

spacle2xl

    Member

  • Members
  • 20 posts
  • Framework Version:2.4.4
  • Country: Country Flag

Posted 07 July 2013 - 07:10 PM

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?



#5 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 07 July 2013 - 07:16 PM   Best Answer

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.


  • spacle2xl likes this

#6 spacle2xl

spacle2xl

    Member

  • Members
  • 20 posts
  • Framework Version:2.4.4
  • Country: Country Flag

Posted 07 July 2013 - 07:56 PM

OK... lemme try that now...



#7 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 07 July 2013 - 07:58 PM

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



#8 spacle2xl

spacle2xl

    Member

  • Members
  • 20 posts
  • Framework Version:2.4.4
  • Country: Country Flag

Posted 07 July 2013 - 08:01 PM

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



#9 spacle2xl

spacle2xl

    Member

  • Members
  • 20 posts
  • Framework Version:2.4.4
  • Country: Country Flag

Posted 07 July 2013 - 08:22 PM

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?



#10 spacle2xl

spacle2xl

    Member

  • Members
  • 20 posts
  • Framework Version:2.4.4
  • Country: Country Flag

Posted 07 July 2013 - 08:54 PM

@

Please Login or Register to see this Hidden Content



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...

Attached Files



#11 spacle2xl

spacle2xl

    Member

  • Members
  • 20 posts
  • Framework Version:2.4.4
  • Country: Country Flag

Posted 08 July 2013 - 07:03 AM

Hi there

Please you can take a look this

Please Login or Register to see this Hidden Content

THANKS BATMAN



#12 batman

batman

    Bat Learning

  • Members

  • 1755 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 08 July 2013 - 10:29 AM

@

Please Login or Register to see this Hidden Content

 

No problem, happy to help!

;)







Also tagged with one or more of these keywords: background color, Drop down menu, menu items