Jump to content

Archived

This topic is now archived and is closed to further replies.

onespirit

Navi - Change hover state and current menu item background

Recommended Posts

onespirit

What class do I change in custom css for the navi top menu hover background and current color?

 

used firebug can't find it.

 

any help appreaciated.

 

Share this post


Link to post
Share on other sites
onespirit

Thanks batman, 

 

Not looking to change the color for the entire background of the whole menu.

 

I just want to change the hover color and current item color not the entire background.

 

So in other words let say I keep the default white background in the visual editor.

 

I want the the color when you put your mouse over a menu item to be different than the grey default.

 

:-)

Share this post


Link to post
Share on other sites
apcomputing

This is the code you are in search of.

/*--Navbar Sub Menu Background Color, Font Color, Font Size--*/
.sf-menu ul li a {
  color: #fff;
  background: #1E709A;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  border-color: #fff;
  font-size: 14px;
}
/*--Navbar Hover Color--*/
.sf-menu ul {
  background-color: #0AADD8;  
  left: 0;
  right: auto;
}

Share this post


Link to post
Share on other sites
James B

apcomputing thank you for contributing.

 

You'll need to add :hover to the above after the li a to only affect the color on hover.

 

.sf-menu ul li a:hover


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
jmad

Hope you don't mind me jumping in on this but my question is in the same area.   I used the following to adjust Navi to basically a transparent menu that still converts to mobile.  The code provided above changes the drop down menus at least when I tried it.   Am I missing something?  Is there a reason I shouldn't target the section-navi etc to change the background ...cross browser issue?  It seems to be working EXCEPT I can't figure out how to get rid of the right border on the last menu element.  I've tried li:last li: last-child on several classes but no joy.

 

Any suggestions on what and how to target and remove the last right border?  James B do you see anything wrong with adjusting Navi with the code I have below?  Any cross browser issue?

 

 

 

#site .section-navi .navi-wrap  {

float: none;

text-align: center;

  font-size: 14px;

}

 

#site .section-navi .navi-right  {

float: none;

text-align: center;

  color: #ffffff;

  background: rgba(0,0,0,0);

&{a:hover{

    color:#F4CFC4;

    }

  }

}

 

.section-navi .pl-nav > li > a {

  opacity: 1;

}

 

.section-navi .pl-nav > li {

  background: rgba (0,0,0,0);

  font-size: 14px;

  color: #ffffff;

 text-shadow: rgba(0,0,0,0) 0px 0px 0px;

  opacity:1;

}

 

 

.section-navi .pl-nav > li.current-menu-item > a, .section-navi .pl-nav > li:hover > a{

  color: #E76F4D;

  background: rgba (0,0,0,0);

  transition: color .0s linear,background .0s linear;

}

 

.section-navi .pl-nav > li  {

border-right-color: white;

border-right-width: thin;

border-right-style: solid;

}

Share this post


Link to post
Share on other sites
sevenel

Sorry to be a complete newbie but when I tried to put the CSS into the </>Custom area, it did nothing. Do I have to put it into the actual CSS file?

Share this post


Link to post
Share on other sites
batman

Hi sevenel

 

You can use a child theme and add CSS rules to make the changes, you have this Danny´s Child

https://github.com/Dannyholt/Skeleton

This works fine to me !

 

You only need to add your custom css rules in the styles.css 

You need ti activate the Child Theme

Then edit the style.css

and write the rules

 

http://screencast.com/t/16pVDM5h

 

You have more information here

https://codex.wordpr...rg/Child_Themes

 

You take a look to the documentation here

http://docs.pagelines.com


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
jmad

batman

 

Any suggestions on my question above?

 

Any suggestions on what and how to target and remove the last right border?

Share this post


Link to post
Share on other sites
jmad

@Danny 

 

I tried that but maybe I didn't have the rest of the correct class targeted.  I'll give it another try.

Share this post


Link to post
Share on other sites
jmad

Danny

 

Okay this isn't working the site is http://chrisvittpiano.flywheelsites.com/

 

I have this CSS.  Pretty sure I have the correct class targeted as it does effect the menu items.  However, :last-child doesn't seem to work...I've tried several combinations.   What do you suggest?

 

.section-navi  .pl-nav > li  {
border-right-color: white;
border-right-width: thin;
border-right-style: solid;
}
 
.section-navi  .pl-nav > li:last-child {
border-right-style: none;
}

Share this post


Link to post
Share on other sites
jmad

@Danny 

 

Can I get some help with this.  I've tried targeting a range of classes with last-child but can't seem to get it to effect.

Share this post


Link to post
Share on other sites
Danny

Well after looking at your code, it's not working because it isn't the last <li> in your menu, there is one after that called poppover or something. So what you can either do is use the menu-item-20 class or use the pseudo nth class. Like so:

 

#site .section-navi .pl-nav > li:nth-child(3) {
border-right: rgba(0, 0, 0, 0);
}
 
The nth class isn't supported in IE8, so you probably want to use the menu-item-20 instead.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

Danny

 

I used the code below and it worked.  Is your "border-right: rgba(0,0,0,0);" better than "border-right-style: none;" for cross browser or other reasons?

 

Also, I didn't have any other menu items in my menu so the popover item...is that the hidden search icon?

 

.section-navi  .pl-nav > .menu-item-20 {
border-right-style: none;
}

Share this post


Link to post
Share on other sites
chules

I've been trying to follow this thread when customizing a Navi Menu on the following DMS2 site, http://www.lonebeaconmedia.com.php53-25.ord1-1.websitetestlink.com/.  I'm having an issue when you move to a second level to 3rd level menu item.  What's happening is when moving to the 3rd level menu item the font color changes from black to white and against the white block background it disappears.  What I wish to do is have all the font colors black on the navi menu?  Can anyone assist me with this?  Here is the code form my custom less/css.

/*--Navi Section--*/
.section-navi .navi-container {
  height: 50px;
  padding: 7px;
  padding-top: 25px !important;
}

.section-navi .pl-nav > li > a {
  line-height: 75px;
  padding: 13px;
  opacity: 0.7;
  font-size: 20px;
}

fieldset {
  padding: 0;
  margin: 0;
  border: 0;
  padding-top: 13px;
}

/*--Navbar Sub Menu Background Color, Font Color, Font Size--*/
.sf-menu ul li a {
  color: #000;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  border-color: #f0f0f0;
  font-size: 16px;
}
/*--Navbar Hover Color--*/
.sf-menu ul li a:hover {
  background-color: #4c62ad;  
  left: 0;
  right: auto;
}

Thank you - Chules

Share this post


Link to post
Share on other sites
Danny

Try the following:

.sf-menu ul li.sfHover > a {
  color: red;
}

 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×