Jump to content
Sign in to follow this  
spacle2xl

Drop down menu items background color

Recommended Posts

spacle2xl    1
spacle2xl

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
Rob    547
Rob

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;
}

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
spacle2xl    1
spacle2xl

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
Rob    547
Rob

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.

  • Like 1

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
spacle2xl    1
spacle2xl

OK... lemme try that now...

Share this post


Link to post
Share on other sites
Rob    547
Rob

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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
spacle2xl    1
spacle2xl

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
spacle2xl    1
spacle2xl

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
spacle2xl    1
spacle2xl
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
batman    389
batman

spacle2xl

 

No problem, happy to help!

;)


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • Digital805
      By Digital805
      Updating background color does nothing in editor. Is there a way to make simple changes NOT use the editor? It appears to not work. I just want a white background.
      I really would like the layout to be the same as vs 3.
      Here is my site in vs. 3 of WHPro: http://globalebookawards.com/
      Here is the new one: http://globalebookawards.com/new/
      I'm sure the client will prefer the boxed layout.
    • digamama
      By digamama
      Hello everyone! 
       
      I'm having an issue with my website (here's the link...screenshot also attached). If you take a look you'll see that the top navigation (the item titled 'Advisory') has one item listed below it ('Case Studies'). That dropdown has additional pages under it, so it's Advisory --> Case Studies --> list of items. The problem is there's a huge vertical gap between the first dropdown option and submenu options. I hope I'm making sense...
       
      Can you please help me find the CSS selector to align the sub-drop down menu? 
       
       
    • sakkthi subramaniyam
      By sakkthi subramaniyam
      Hi,
       
      I tried to change the header background color above navigation menu to black with custom css. Still a portion comes white in header.
       
      #header { background-color: black; }   http://d.pr/i/LGKx
       
      http://d.pr/i/9fK0 white color remains
       
       
      Thanks,
      sakkthi
    • carlton
      By carlton
      Here's a link to my site:
      http://flagstonesearchmarketing.com/
       
      See SEO, Inbound Marketing, and SEM for examples.
      The channel names appear twice. At first, I thought this was because some were saved as custom menu items, but re-saved SEM a different way to experiment, but still get the same result.
       
      What am I missing?
       
      Any help appreciated.
       
      (Also, is there any documentation?)
    • xcel7
      By xcel7
      Hello, I like the mud theme a lot, but I can't find the way to get a dropdoawn menu. Does it work on this theme?
×