Jump to content


Photo
- - - - -

How to change color on submenus when hovering over it


Best Answer James B , 16 May 2013 - 11:22 PM

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;
}
Go to the full post


  • Please log in to reply
13 replies to this topic

#1 chisim11

chisim11

    Super Member

  • Members
  • 248 posts
  • LocationSoutheast Florida
  • Framework Version:2.22
  • Country: Country Flag

Posted 16 May 2013 - 09:37 AM

Pagelines frameworks 3.5.1

 

This issue was previously posted:

Please Login or Register to see this Hidden Content

 

 

"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:

Please Login or Register to see this Hidden Content

 
Here, the color appears on a menu widget test page>

Please Login or Register to see this Hidden Content

 
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 >

Please Login or Register to see this Hidden Content

 
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: 

Please Login or Register to see this Hidden Content

and go over the info. I did but I still have not been able to figure out how the change the color on this.

 



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 15154 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 16 May 2013 - 10:15 AM

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.



#3 chisim11

chisim11

    Super Member

  • Members
  • 248 posts
  • LocationSoutheast Florida
  • Framework Version:2.22
  • Country: Country Flag

Posted 16 May 2013 - 07:00 PM

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



#4 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 16 May 2013 - 09:10 PM

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 -

Please Login or Register to see this Hidden Content

which will allow you to set the colors for the menu/drop downs using an admin panel in the wp admin area.



#5 chisim11

chisim11

    Super Member

  • Members
  • 248 posts
  • LocationSoutheast Florida
  • Framework Version:2.22
  • Country: Country Flag

Posted 16 May 2013 - 09:29 PM

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> 

Please Login or Register to see this Hidden Content

 

Anyways, this same blue color appears if I add a menu as a widget. see > 

Please Login or Register to see this Hidden Content



#6 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 16 May 2013 - 09:46 PM

 

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.



#7 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 16 May 2013 - 10:02 PM

The color from the widget is coming from -

Please Login or Register to see this Hidden Content



#8 chisim11

chisim11

    Super Member

  • Members
  • 248 posts
  • LocationSoutheast Florida
  • Framework Version:2.22
  • Country: Country Flag

Posted 16 May 2013 - 10:26 PM

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?



#9 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 16 May 2013 - 10:47 PM

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

Please Login or Register to see this Hidden Content



#10 chisim11

chisim11

    Super Member

  • Members
  • 248 posts
  • LocationSoutheast Florida
  • Framework Version:2.22
  • Country: Country Flag

Posted 16 May 2013 - 11:02 PM

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.



#11 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 16 May 2013 - 11:22 PM   Best Answer

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.

 

Please Login or Register to see this Hidden Content

 

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 -

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content



#12 chisim11

chisim11

    Super Member

  • Members
  • 248 posts
  • LocationSoutheast Florida
  • Framework Version:2.22
  • Country: Country Flag

Posted 17 May 2013 - 05:12 AM

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



#13 phillip

phillip

    Member

  • Members
  • 18 posts
  • Country: Country Flag

Posted 12 September 2013 - 12:05 AM

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

Please Login or Register to see this Hidden Content

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?



#14 Rob

Rob

    One Smart Egg

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

Posted 13 September 2013 - 01:49 AM

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!