WordPress.org

Forums

Sunspot
Menus in narrow windows (6 posts)

  1. mshoptaw
    Member
    Posted 1 year ago #

    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: http://www.heavenearthcreations.com/

    Any suggestions?

  2. mrtom414
    Member
    Posted 1 year ago #

    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%}

  3. mrtom414
    Member
    Posted 1 year ago #

    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.

  4. mshoptaw
    Member
    Posted 1 year ago #

    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;
    }
  5. mrtom414
    Member
    Posted 1 year ago #

    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.

  6. mshoptaw
    Member
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.