• 0

How to change color on submenus when hovering over it

Question

Posted · Report post

Pagelines frameworks 3.5.1

 

This issue was previously posted:

http://www.pagelines.com/forum/topic/26986-menu-colors/

 

 

"I cannot find on the color setting how to change the background color that appears when you hoover over the submenu? In my case is a bright blue. See main page: http://tinyurl.com/ccobof5

 
Here, the color appears on a menu widget test page> http://tinyurl.com/d99ljtr
 
This is how I had it on the platform pro version, see the menu widget here which I liked I think it was done all thru color settings > http://tinyurl.com/cyh3e8f
 
Is there a default setting? dont know how this bright blue got there.
 
And lastly, unrealted to colors.....is there anyway to align(center) the text on menu widgets?
Thanks"
 
 

Danny suggested I go to: http://discover-devt...codeschool.com/ and go over the info. I did but I still have not been able to figure out how the change the color on this.

 

Share this post


Link to post
Share on other sites

13 answers to this question

  • 0

Posted · Report post

Hi

 

Yes you can change the drop down, but as it's coming from the boostrap css and the navbar is originally colored blue it will always use those colors to style the sub menus etc. Changing the color and the background-image in the css to the color of your choice and pasting into the custom css box will override the blue.

 

http://screencast.com/t/HU9ONDOBgQd

 

When you're in firebug, if you've looking for the 'hover' class its not viewable by default, there's a little style tab you change check to force the code to show on the element. It looks like this - http://screencast.com/t/MDmJ8Mx0T4l

 

.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li.current-menu-item > a {
    background-color: none;
    background-image: none;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

As I mentioned in the other topic related to this question, we are unable to provide the custom CSS to achieve your layout. In the other topic, user Batman provided you code which should get you started.

If you need to find the correct classes, I recommend you use either FireBug or your browsers built-in web dev tools.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ok so I did do what you ask, watched the 17 videos and realized it is on the 3rd-4th video where they talk about hover. I tried to apply what they say but cannot find a way to change the color. 

 

I cannot believe the default for this hover thing is blue. It couldnt be white, but blue. Now to make a simple change like this requiring this extensive css is ridiculous. You said it yourself in the previous post, you guys got feedback from members in the past and felt that platform pro was bloated and decided to make it leaner.  Yeah, but then you guys went from easily making a change simple to requiring CSS for it. Again, where is the simplicity pagelines??? And what is this FORUM for anyways? 

 

You may consider what I'm requesting a "custom" change. But really? this is something so simple and common that should NOT require CSS. Period. Most people would agree with that. There are free templates on wordpress where you can do this!!

 

But listen, I'm not gonna argue with you. You guys can give members all the reasons and excuses for it. I tried and followed what you ask. If I was able to change it after reviewing the videos, I would not be spending my time typing all this. I have spent too much time on this to make it worth it. At this point, it will stay like this. 

 

 

 

"Give the course a go and if you still struggle with achieving your desired look, we can assist you further. But the course linked above, does go through the hover pseudo class:".

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there,

 

The hover function for the navbar is set on the color you choose in the navbar options in Pagelines>site options>navbar.

 

If you don't want to use a custom css option for the navbar then one of our developers have created a custom section called crackbar - http://www.pagelines.com/store/sections/crackbar/ which will allow you to set the colors for the menu/drop downs using an admin panel in the wp admin area.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

James,

 

I'm not referring to the black color on the actual fixed navbar. I currently have the black transparent which is fine. 

 

What I'm talking about is the color when you hover on the "sub navigation" if you go to the my site main page and select "properties" and then "search", you will see the blue.

site> http://tinyurl.com/adww8bl

 

Anyways, this same blue color appears if I add a menu as a widget. see > http://tinyurl.com/aaopd67

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

 

You may consider what I'm requesting a "custom" change. But really? this is something so simple and common that should NOT require CSS. Period. Most people would agree with that. There are free templates on wordpress where you can do this!!

 

Topic moved to customizations...

The framework uses twitter bootstrap for the menu. Twitter bootstraps menu dropdown is blue. If you choose another free theme using unedited bootstrap it will also be blue.

 

The point of a framework is being able to customise. If we add options to colour that hover colour, what about all the other nav colours/styles fonts. We'd soon be back to 1000 options like PlatformPro was.

 

 

It makes it even harder to try and help you when you have disabled right click on your site.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Simon P:

 

All you have to do is ask and you shall receive. I just found out that having the no right click plugin will stop you from checking on anything on the site. it's disabled now. 

 

James B

Is the blue on the menu widget related to this same twitter bootstrap that Simon is talking about or is it a separate issue?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Looking in the source code its coming from a plugin called Simon Chi Vertical Jquery Accordion menu? Using skin color blue.

 

If this plugin is using LESS/bootstrap then yes quiet possible it will pull in the same options from the Pagelines settings, looking in the source code though the stylesheet for that plugin says the following which details the pre-set colors

#dc_jqaccordion_widget-4-item{ border-top: 1px solid #013d6c; border-right: 1px solid #013d6c; border-left: 1px solid #013d6c;}
#dc_jqaccordion_widget-4-item ul, #dc_jqaccordion_widget-4-item ul li {margin: 0; padding: 0; border: none; list-style: none;}
#dc_jqaccordion_widget-4-item ul a {padding: 10px 10px 10px 15px; background: #0D5995; text-decoration:none; display: block; color: #fff; border-bottom: 1px solid #013d6c; border-top: 1px solid #4695d3;}
#dc_jqaccordion_widget-4-item ul ul a {padding: 10px 10px 10px 25px;}
#dc_jqaccordion_widget-4-item ul a.dcjq-parent, #dc_jqaccordion_widget-4-item ul a.dcjq-parent:hover {padding: 10px 10px 10px 15px;}
#dc_jqaccordion_widget-4-item ul a.dcjq-parent.active {background: #0D5995 url(skins/images/checkers.png) repeat 0 0;}
#dc_jqaccordion_widget-4-item ul a:hover {background: #05477c;}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

James,

 

Thanks. It was a separate issue. Widget coincidentally had a blue color as the default which was very close to this twitter bootstrap color.

 

So one down. one to go.  I guess have to wait to see what Simon says about the submenu hoveing color, how to change it, if possible, etc.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

James,

 

With your help and the information you had provided above I was able to figure it out and change the blue with a dark gray which looks better. 

I was able to follow it with firebug but not with chrome. The screen shots were of great help.

 

thanks a lot. 

 

Your help is very much appreciatted. :D

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I'm trying to change the nav dropdown colors (background and text colors) on this site:

http://www.primevolleyballclub.com/

Teams > 2012/2013 Prime Teams > 18 THIRD DEGREE

 

The 18 THIRD DEGREE background for instance is gray white #f7f7f7

 

Can't find the correct css reference to fix it.. anuy ideas?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Phillip,

 

Apologies, please open a new topic as this is resolved and therefore unlikely to be answered if you need full assistance with the issue.   Thanks for understanding!

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