Karuna: Need Child Child menus to appear on left side of Parent menu

• 

  secularmindfulness · Member · Apr 8, 2017 at 1:37 am

  • Copy link
  • Add topic to favorites

  Hello there,

  I am using the Karuna theme. I have drop-down menus with this structure:

  Parent
  ——->Child (1), Parent
  —————>Child(2)

  Currently the Child(2) menu, when displayed is displaying to the right of the overall drop-down block. This is causing it to display off-screen where users must scroll right using their keyboards to see the resulting sub-sub-menu.

  Question: How can I have a Sub-Sub menu display on the LEFT side of the menu block?
  Bonus points: Is there a way to detect the screen edge and have the menu display on the Right side by default but move Left if it is outside of the browser dispay?

  Many thanks in advance for your time and expertise.

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

• 

  thesacredpath · Member · Apr 10, 2017 at 8:41 pm

  • Copy link

  Hi there, I had to pull in one of our developers to help out with this as it was a bit tricky. Go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS.

  @media screen and (min-width: 768px) {
    .main-navigation ul ul li:hover>ul,
    .main-navigation ul ul li.focus>ul {
      left: auto;
      right: 100%;
    }
  
    .main-navigation ul ul .page_item_has_children>a:after,
    .main-navigation ul ul .menu-item-has-children>a:after {
      content: "";
    }
  
    .main-navigation ul ul .page_item_has_children>a:before,
    .main-navigation ul ul .menu-item-has-children>a:before {
      font-size: 16px;
      vertical-align: middle;
      text-align: center;
      display: inline-block;
      font-family: "Genericons";
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      line-height: 1;
      text-decoration: inherit;
      text-transform: none;
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      speak: none;
      content: "f431";
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      transform: rotate(90deg);
    }
  }

  It looks like a lot, but the bulk of it is just to get the arrow in the submenu to point to the left instead of the right.

  Bonus points: Is there a way to detect the screen edge and have the menu display on the Right side by default but move Left if it is outside of the browser dispay?

  That would require Javascript, and we can’t use that at WordPress.com. I am filing a bug report on this though, but even with Javascript it is tricky to do, so it will have to be discussed. Not sure if they will decide to change it or not.

• 

  secularmindfulness · Member · Apr 25, 2017 at 1:54 am

  • Copy link

  Wonderful! It works. Took me a while to get back to this project and very thankful indeed for what appears to be a lot of time spent.

  Wishing you well!

• 

  thesacredpath · Member · Apr 25, 2017 at 8:23 pm

  • Copy link

  Hooray and you are welcome!