Jump to content


Photo
- - - - -

Navbar Sub Option Hover Color


Best Answer batman , 29 November 2012 - 06:00 PM

Hi joaoreis

First you can try add in

PageLines > Site Options > Custom Code > CSS Rules

or in

Pagelines Customize (plugin)

YOUR CSS RULES

It is advisable to learn how to do this on your own too.  

Check out http://www.pagelines...wiki/Custom_CSS

 

I find this Rob´s reply perhaps help you:

 

The following code is not specific to your site and provided for informative purposes only, to provide an example of several different elements for the menu. Look through it and you'll see how colors are changed. I'd also suggest you get Firebug for Firefox to help you find each element. The colors should be changed if you use any of this, to suit your needs.

 

/* NAV BACKGROUND AND BORDER UNDER NAV */

.navigation_wrap {

    border-bottom: 1px solid #bcbcbc !important;

    background-color: #e8ecef !important;}

 

/* TO CHANGE THE COLOR OF THE NAV TEXT AND BACKGROUND (NO HOVER) */

.main-nav li a {

    background-color: #e8ecef !important;

    color: #3f95c7 !important;}

 

/* TO CHANGE THE COLOR OF THE NAV TEXT AND BACKGROUND ON HOVER */

.main-nav li a:hover {

    background-color: #ffffff !important;

    color: #ff9c00 !important;}

 

/* TO MAKE THE ACTIVE MENU APPEAR LIKE THE REST */

.main-nav .current-menu-item a, .main-nav .current-menu-item ul li a:hover {

    background-color: #ffffff !important;

    color: #ff9c00 !important;}

.main-nav .current-menu-item ul li a {

    background-color: #e8ecef !important;

    color: #3f95c7 !important;}

 
Also you can use de Nav Classic with the "Simple CSS Lite" plugin found in the PageLines Store to change all parameters.

It's a free plugin that allows you control over the color of the menu.

Simple CSS Lite only works on the standard navigation, it don´t work on NavBar.

Go to the full post


  • Please log in to reply
4 replies to this topic

#1 joaoreis

joaoreis

    Advanced Member

  • Members
  • 30 posts
  • LocationPorto alegre
  • Framework Version:v2.3.8
  • Country: Country Flag

Posted 29 November 2012 - 04:58 PM

Hello! I need a little help,

 

 I need to change the dropdown menu color when the mouse is over the sub options of the navbar. I've added the codes which were mentioned above, but it changes the main part of the navbar.

 

 I've also changed the color in the line code 136 /sections/navbar/style.less, but it didn't make any difference.

 

 Is there a way i can change the hover color of the navbar sub options?

 



#2 batman

batman

    Bat Learning

  • Members

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

Posted 29 November 2012 - 06:00 PM   Best Answer

Hi joaoreis

First you can try add in

PageLines > Site Options > Custom Code > CSS Rules

or in

Pagelines Customize (plugin)

YOUR CSS RULES

It is advisable to learn how to do this on your own too.  

Check out

Please Login or Register to see this Hidden Content

 

I find this Rob´s reply perhaps help you:

 

The following code is not specific to your site and provided for informative purposes only, to provide an example of several different elements for the menu. Look through it and you'll see how colors are changed. I'd also suggest you get Firebug for Firefox to help you find each element. The colors should be changed if you use any of this, to suit your needs.

 

/* NAV BACKGROUND AND BORDER UNDER NAV */

.navigation_wrap {

    border-bottom: 1px solid

Please Login or Register to see this Hidden Content

!important;

    background-color:

Please Login or Register to see this Hidden Content

!important;}

 

/* TO CHANGE THE COLOR OF THE NAV TEXT AND BACKGROUND (NO HOVER) */

.main-nav li a {

    background-color:

Please Login or Register to see this Hidden Content

!important;

    color:

Please Login or Register to see this Hidden Content

!important;}

 

/* TO CHANGE THE COLOR OF THE NAV TEXT AND BACKGROUND ON HOVER */

.main-nav li a:hover {

    background-color:

Please Login or Register to see this Hidden Content

!important;

    color:

Please Login or Register to see this Hidden Content

!important;}

 

/* TO MAKE THE ACTIVE MENU APPEAR LIKE THE REST */

.main-nav .current-menu-item a, .main-nav .current-menu-item ul li a:hover {

    background-color:

Please Login or Register to see this Hidden Content

!important;

    color:

Please Login or Register to see this Hidden Content

!important;}

.main-nav .current-menu-item ul li a {

    background-color:

Please Login or Register to see this Hidden Content

!important;

    color:

Please Login or Register to see this Hidden Content

!important;}

 
Also you can use de Nav Classic with the "Simple CSS Lite" plugin found in the PageLines Store to change all parameters.

It's a free plugin that allows you control over the color of the menu.

Simple CSS Lite only works on the standard navigation, it don´t work on NavBar.



#3 joaoreis

joaoreis

    Advanced Member

  • Members
  • 30 posts
  • LocationPorto alegre
  • Framework Version:v2.3.8
  • Country: Country Flag

Posted 29 November 2012 - 06:45 PM

Batman,

 

 I've already installed Base theme and firebug. Now I'm gonna try this codes you said.

 

 I have another question about the navbar, want to create a customized navbar for a specific page, do i need to open a new topic for this?

 

Thanks!



#4 James B

James B

    Advocate

  • Members

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

Posted 30 November 2012 - 12:11 AM

Hi there, yes for any new questions please open a new thread. For info you can create a new menu in appearance>menus from the wp dash.



#5 joaoreis

joaoreis

    Advanced Member

  • Members
  • 30 posts
  • LocationPorto alegre
  • Framework Version:v2.3.8
  • Country: Country Flag

Posted 05 December 2012 - 12:07 PM

Hello! I've changed for the Nav classic and now it works.

Thanks for the help guys!