Menus in narrow windows

  • When I resize my browser (Chrome) to half of the screen, the fly out menu on my site appears but there is a big space between the left nav and the menu. When I try to move my cursor to the menu, the menu disappears when I hit the big space. You can see an example of this here: https://www.heavenearthcreations.com/

    Any suggestions?

Viewing 5 replies - 1 through 5 (of 5 total)

  • The problem is in the theme design. The author of the theme used a fix value of left:222px for the submenu. The theme is fluid so the menu box on the left is shrinking when the theme is resized. However, The submenu is fixed at left:222px so it creates a space between the menu and the submenu. If you can contact the theme author and have him adjust the submenu left value to a percentage it will probably fix the issue.

    If you want to create a child theme and fix the value yourself you can add the following code : .main-navigation ul ul{left:100%}

    By the way you have another issue when the menu is totally collapsed. There is no styling on the submenu. It is being displayed as an unordered list.

    Thread Starter mshoptaw

    (@mshoptaw)

    I tried changing the style.css as you describe above but it didn’t make any difference:

    .main-navigation ul ul {
	background: #222;
	background: rgba(0, 0, 0, 0.8);
	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 2px;
	box-shadow: rgba(0, 0, 0, 0.4) 0 1px 2px;
	display: none;
	font-size: 1em;
	left: 100%;
	position: absolute;
	top: 0;
	width: 222px;
	z-index: 99999;
}

    I also tried changing the width to 100% as well:

    .main-navigation ul ul {
	background: #222;
	background: rgba(0, 0, 0, 0.8);
	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 2px;
	box-shadow: rgba(0, 0, 0, 0.4) 0 1px 2px;
	display: none;
	font-size: 1em;
	left: 100%;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 99999;
}

    I looked at your site the left:222px is still there. Look at line 499 in your style.css file. You don’t need to change width just the left value. Maybe you should look for a different theme. This one seems to have a lot of problems. Look at menu when it is collapsed. It fails to style your menu.

    Thread Starter mshoptaw

    (@mshoptaw)

    I apologize for the delay. When I saw the change didn’t help, I put back the 222px. I’ve changed it back to 100% and will leave it. Thanks for checking it out.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Menus in narrow windows’ is closed to new replies.