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.
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.
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.