Tweaking Menu Widgets in Academica

• 

  gotmaester · Member · Jul 28, 2017 at 10:57 pm

  • Copy link
  • Add topic to favorites

  I am starting another thread.

  Original Question: How can I change all the menu widgets so that when one hovers over the link the entire bkg of that line turns red with white font, and when on the page, have it fixed white on red just like it does in the navigation menu on top of the page?

  The following code was provided by sacredpath (the only thing I changed was the colors); so I would like to continue getting help from him.

  #content .widget ul.menu li.current-menu-item {
  background-color: #F0F0F0;
  }
  #content .widget ul.menu li.current-menu-item > a {
  color: red;
  }
  #content .widget ul.menu li {
  margin-bottom: 0;
  padding-bottom: 5px;
  padding-left: 5px;
  }
  #content .widget ul.menu li:hover {
  background-color: #F0F0F0;
  }
  #content .widget ul.menu li > a:hover {
  color: red;
  }

  When I first tried this I did not like it for three reasons:

  1. RESOLVED: The colors I originally suggested clashed with some other objects on page (so I changed the color and even the style and layout of other items on the page). Things are looking better now.

  2. EASY ENOUGH FOR ME TO DO: If this ends up working the way I like, I probably will have to change the color of the PREV and NEXT links below the title to the same colors in the navigation menu (which I should be able to do by myself)

  3. WHAT I NEED HELP WITH: The code doesn’t work the way I want it to work. For example, if one hovers over the row (not the link) on the menu, the row does highlight, but the text does not change to red. It only changes to red when the mouse actually hovers over the link. (I would like it to work exactly like the navigation menu on top of page).

  Can you help me tweak this? I have put the code you gave me into the CSS and so it is currently enabled. (I suspect that this would help you).

  HERE IS A PAGE YOU CAN REFER TO:

  https://game-of-thrones-episodes.com/2017/07/19/the-end-of-house-frey/

  The blog I need help with is: (visible only to logged in users)

• 

  mapetrei · Member · Jul 28, 2017 at 11:24 pm

  • Copy link

  Hello!

  Please add this as an extra line into your custom css box and let me know if it helped you accomplish what you wanted for the left sidebar:

  #wrap #content .widget ul.menu li a {
      display: block;
  }

• 

  gotmaester · Member · Jul 28, 2017 at 11:28 pm

  • Copy link

  Awesome. It works. Thanks.

• 

  mapetrei · Member · Jul 28, 2017 at 11:29 pm

  • Copy link

  Very glad to hear!