Twenty seventeen: colour of tiny triangle in subnavigation

• 

  manuschwendener · Member · Nov 4, 2017 at 5:27 pm

  • Copy link
  • Add topic to favorites

  Hi

  Cosmetics, but maybe it’s easy to fix:

  If you go to https://chicoscatola.wordpress.com and hover over ‘Sortiment’, there is a tiny triangle in white above the first line on the sub-menu. This should change the colour like the sub-menu: two different shades of green.

  My CSS for the navigation so far:

  .navigation-top {
  	background-color: #CCEFB4;
  }
  
  .main-navigation ul ul {
  	background: #CCEFB4;
  }
  
  .main-navigation ul {
  	background-color: transparent;
  }
  
  .navigation-top .current-menu-item > a, .navigation-top .current_page_item > a {
  	color: #2D3741;
  	font-weight: strong;
  	-webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0), 0 2px 0;
  	color: #2D3741;
  	box-shadow: inset 0 0 0 rgba(0,0,0,0), 0 2px 0;
  	color: #2D3741;
  }
  
  .navigation-top .main-navigation li li a:hover {
  	color: #D20537;
  }

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

• 

  manuschwendener · Member · Nov 4, 2017 at 7:12 pm

  • Copy link

  Related: if you hover over ‘Sortiment – Basler Artikel & Souvenirs – Fasnacht’, the background for ‘Basler Artikel & Souvenirs’ is grey (from an older design), it should be green like behind ‘Sortiment’.

  I’m looking for #ebebeb in my CSS, but can’t see it.

• 

  thesacredpath · Member · Nov 6, 2017 at 8:27 pm

  • Copy link

  Hi, on the triangle at the top of the sub menu, that is done with a bit of a CSS border trick. Add the following to chang that to the color of the menu.

  .main-navigation ul li.menu-item-has-children::after, .main-navigation ul li.page_item_has_children::after {
    border-color: #CCEFB4;
  }

  On the parent menu item grey background color, I believe this gets you what you are wanting.

  .sub-menu .menu-item-has-children a {
    background-color: #CCEFB4;
  }

• 

  manuschwendener · Member · Nov 6, 2017 at 8:36 pm

  • Copy link

  Hello thesacredpath

  > On the parent menu item grey background color,
  > I believe this gets you what you are wanting.

  Yes, exactly, thanks a lot :-)

  > the triangle … change to the color of the menu.

  This changes the color, but messes up the triangle.

• 

  thesacredpath · Member · Nov 7, 2017 at 3:21 am

  • Copy link

  The only thing that does is to change the color of the triangle. Are you wanting it a different color than the lighter green? I’m not sure why the borderline on that triangle isn’t still the grey color like it is when it is white. I’m still playing with that to see if I can get that back.

• 

  manuschwendener · Member · Nov 7, 2017 at 7:36 am

  • Copy link

  > Are you wanting it a different color than the lighter green?

  The color should be the same as behind ‘Neuheiten’: light green when I hover over it, otherwise middle green.

  => You don’t have to put more effort into it, I can change it back to how it was.

  Seems to be part of the theme, not just happening because I am using custom colors; example https://tecsemployment.com.

• 

  thesacredpath · Member · Nov 7, 2017 at 8:09 pm

  • Copy link

  Sorry that solution didn’t work. I’m still going to see if I can figure out how to make this work. If I solve it, I will post back here to let you know.

• 

  manuschwendener · Member · Nov 7, 2017 at 8:13 pm

  • Copy link

  Either way: thank you for your help :-)

• 

  thesacredpath · Member · Nov 7, 2017 at 8:14 pm

  • Copy link

  You are welcome.