Sidebar CSS

• 

  annascherman · Member · Jan 6, 2016 at 3:26 pm

  • Copy link
  • Add topic to favorites

  Hi all,

  I am hoping someone out there has a creative solution to help me with my sidebar. A smart wordpress staffer helped me by providing a little trick which hides the arrow drop down button on my sidebar menu, and stretches the transparent button over my menu text so that when you click on a title, a submenu drops down.

  This is exactly what I want, however, previously I also had a black background when the mouse hovered over the menu item. Does anyone have an idea for how I might be able to have both the black background (see menu items, “Graphic Design,” “CV,” etc. on my site) and the transparent drop down button (see the menu item “Architecture”)?

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

• 

  thesacredpath · Member · Jan 7, 2016 at 10:29 pm

  • Copy link

  I’m seeing the hover on your top level menu items, with the exception of the Architecture item. On the submenu items off of that, the following will get you the black hover background and take the text to white on hover.

  .main-navigation ul ul a:hover {
      background: #000;
      color: #fff;
  }

  Unfortunately I’ve not been able to get the hover on the Architecture top menu item since the button div now overlays it. I can get a black background on the button, but then it obscures the Architecture label below it.

• 

  annascherman · Member · Jan 7, 2016 at 10:47 pm

  • Copy link

  Yep, that’s exactly the problem!! I don’t really want the black background on the submenu items…just the main categories (as is displayed on the main menu items besides architecture).

  I was wondering if there was anyway that you can think of to reconfigure the button div that is set up. Maybe, if there is a different way, it wouldn’t have to cover up the black background?

• 

  thesacredpath · Member · Jan 8, 2016 at 8:59 am

  • Copy link

  You know, I didn’t think I would be able to do this, but give the following a try. Replace this CSS rule you currently have
  
  with this

  .dropdown-toggle::before {
      color: #000;
      content: "Architecture";
      font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
      font-size: 11px;
      line-height: 14px;
      padding: 0.6em 4px;
      position: relative;
      right: 2px;
      top: -10px;
  }

  and then add the following three rules.

  #menu-item-94 a {
      color: rgba(0, 0, 0, 0);
  }
  .dropdown-toggle:hover::before {
      background: #000;
      color: #fff;
  }
  #menu-item-94 .sub-menu a {
      color: #000;
  }

• 

  annascherman · Member · Jan 8, 2016 at 9:20 pm

  • Copy link

  Hmmm. Well I eliminated the following:

  #menu-item-94 .sub-menu a {
      color: #000;
  }

  because it was preventing the word “Architecture from showing up (whether the black background was there or not). But, either way, the drop down button is not working with this code :(

  Any other possible thoughts?! I am trying to play with this code, but I think it may be slightly over my head.

• 

  annascherman · Member · Jan 8, 2016 at 10:54 pm

  • Copy link

  I modified the menu items and now it is working for some and not others (see menu item: academic work, though it is linking incorrectly).

  Can you tell how I accidentally solved the problem? I am scared to try to fix the other menu items accordingly (or the incorrect link) until I have a better understanding of why it is suddenly doing what I want!

• 

  annascherman · Member · Jan 8, 2016 at 10:57 pm

  • Copy link

  OK, sorry, disregard both of the previous posts.

  It is not actually dropping the submenus, however, the link works and the black background works…I assume there is no way to make the link for the menu items the drop down submenus?

• 

  thesacredpath · Member · Jan 9, 2016 at 6:28 am

  • Copy link

  I know that you want the menu items to open the submenus when clicked, but with these complex and fragile changes we are making for that to happen, I’m concerned that there may be some users that this is not going to work for. The more we tweak this and the more code we add, the more likely we will create a house of cards.

  Would you consider going back to having the arrow buttons to activate the submenus?

• 

  annascherman · Member · Jan 9, 2016 at 4:11 pm

  • Copy link

  Ah, I see. I think what I may prefer to the arrows is to just go back to have the menus drop down with no black background when the mouse hovers. That seems pretty doable with the code I had previously.

• 

  thesacredpath · Member · Jan 10, 2016 at 6:55 am

  • Copy link

  I agree, that is probably the best solution.