Drop Down Menu

• 

  annascherman · Member · Dec 22, 2015 at 5:47 pm

  • Copy link
  • Add topic to favorites

  Is it possible to remove the button on my sidebar that drops the sublinks? Instead, I would like the menu items to appear if you click on the parent menu item…

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

• 

  ogurel · Member · Dec 22, 2015 at 11:41 pm

  • Copy link

  Hi,

  This would make sure that the sidebar dropdown button is hidden:

  .dropdown-toggle
  {
      display: none;
  }

  Please feel free to write back if you need further assistance.

  Take care,

  Onur

• 

  kathrynwp · Staff · Dec 22, 2015 at 11:45 pm

  • Copy link

  You could give this a try and adjust as needed:

  .dropdown-toggle,
  .dropdown-toggle:hover,
  .dropdown-toggle:focus {
      width: 200px;
      z-index: 3;
      background-color: transparent;
      height: 20px;
      top: -35px;
      outline: 0;
  }
  .dropdown-toggle::before {
    display: none
  }

• 

  annascherman · Member · Dec 23, 2015 at 6:02 am

  • Copy link

  Oh nice! That definitely is close…the only issue is that it seems to negate the hover feature I set up (the menu items get a black background when the mouse hovers over them). Is it possible to have both CSS codes working together?

• 

  kathrynwp · Staff · Dec 23, 2015 at 2:54 pm

  • Copy link

  Is it possible to have both CSS codes working together?

  I don’t think so, since the CSS we provided is a hack that makes the dropdown toggle arrow transparent and stretches out its size to cover the first menu item. The only reason the word “Architecture” is visible right now is because the background is transparent; If we made the background black on hover, it would cover up the word and it would no longer be legible, as you can see by trying this:

  .dropdown-toggle:hover {
    background-color: #000000;
  }

• 

  annascherman · Member · Dec 23, 2015 at 4:28 pm

  • Copy link

  Ok. Well, I guess where I am still confused, is that the code you gave me makes the background black at all times – why would it only be black when the mouse is hovering (and then, with white text, wouldn’t it work?)?

• 

  kathrynwp · Staff · Dec 23, 2015 at 4:39 pm

  • Copy link

  The toggle box is actually covering the menu item with the hack I provided, so there is no text contained within the element to turn white, unfortunately. The box is actually covering up the menu item completely – that’s what the z-index: 3; does, it places the element over the menu.