Please help with the Menu Bar

• 

  kentonsresidences · Member · Aug 17, 2016 at 10:05 am

  • Copy link
  • Add topic to favorites

  Currently my menu bar is located on the top right. The user have to click on it to show the parent and the children menu. However, when doing so the user will see overwhelm of information of parent menu and children menu.

  I have 2 possible scenarios if someone can help either one of them is ok.

  1. show the parents menu across the page without clicking the menu bar. When the user move the mouse to the parent menu, there will drop down menu for the children menu.

  2. Show the menu bar, when the user click on the menu bar, it only show parents menu. And there is a plus sign at the end, when user click on the + sign, it will drop down to show the children page.

  If you have any question please don’t hesitate to contact me. I’m not sure if i explained it thoroughly.

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

• 

  hallluke · Member · Aug 17, 2016 at 9:09 pm

  • Copy link

  Your site is actually set up to behave like your first example but only on screens wider than 1281px, if you’re on a small monitor, a tablet or a smartphone you’ll see the menu button which pops out the rest of the options. I don’t think your second option is viable just with CSS.

  If you want to change the screen width at which the button appears just copy in the code below, I’ve duplicated it directly from the theme files so all you need to do is set the first number. I’ve picked 768px so that it looks how you want on anything larger than a portrait oriented tablet.

  @media screen and ( min-width: 768px ) {
    .menu-toggle {
      display: none;
    }
    .site-logo {
    	max-height: 100px;
    }
    .has-site-logo .main-navigation {
      height: 100px;
    }
    .has-site-logo .main-navigation > div,
    .has-site-logo .main-navigation > ul {
  	position: relative;
  	top: 50%;
  	-moz-transform: translateY(-50%);
  	-webkit-transform: translateY(-50%);
  	transform: translateY(-50%);
    }
    .main-navigation {
      font-size: 0.8125em;
      line-height: 2.09231em;
      clear: none;
      float: right;
      max-width: 50%;
      text-align: right;
    }
    .main-navigation ul:first-child {
  	  display: block;
    }
    .main-navigation ul li {
      display: inline-block;
    }
    .main-navigation ul li:hover > ul,
    .main-navigation ul li.focus > ul {
      display: block;
      opacity: 1;
      visibility: visible;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
    }
    .main-navigation ul a {
      border-bottom: 0;
      padding: 5px 0 5px 14px;
    }
    .main-navigation ul ul {
      background: white;
      border: 1px solid #eeeeee;
      display: none;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      float: left;
      opacity: 0;
      padding: 0 7px;
      position: absolute;
      top: 27px;
      left: 0;
      text-align: left;
      visibility: hidden;
      z-index: 99999;
    }
    .main-navigation ul ul li {
      border-bottom: 1px solid #eeeeee;
      padding: 5px 5px 4px;
    }
    .main-navigation ul ul li:last-of-type {
      border-bottom: 0;
    }
    .main-navigation ul ul li a {
      line-height: 1.5;
      padding: 5px;
      width: 180px;
    }
    .main-navigation ul ul ul {
      left: 100%;
      top: 0;
    }
    .main-navigation ul ul li a,
    .main-navigation ul ul ul li a,
    .main-navigation ul ul ul ul li a {
      padding-left: 5px;
    }
  }