Responsive css menu stuck!

HTML & CSS
1

so I found this css menu I really want to work for my site but it has some flaws
got the menu from here
http://cssmenumaker.com/menu/responsive-flat-menu
i made this test page
http://www.mgdezigns.com/pindex.php
i saw in comments that someone said

After scrambling for solutions for weeks, I reached the perfect
solution for both the iPhone scrolling issue and the menu not displaying
between 767 and 750px (due to the scrollbar).
The solution is… just delete the whole “resizeFix” function from
the jQuery script. That’s right. Delete it. Why? Because it’s not really
needed.
All that function does is tell the browser to reset the menu to
“closed” if the width is less than 768px, which is really unnecessary
and it only causes problems.
You need to do a few CSS tweaks after deleting the function:

  • Set “#cssmenu ul” to “display:block !important” when the width is
    more than 768, to make sure the menu is always displayed in desktop
    version.
  • Set “#cssmenu ul ul” to “display:none;” when the width is less than
    768, to prevent the mobile menu to show the sub-items when the menu is
    first opened.
    That’s it!

i did the

delete the whole "resizeFix" function from the jQuery script. That's right. Delete it. Why? Because it's not really needed.

but then it says

`Set “#cssmenu ul” to “display:block !important” when the width is
more than 768, to make sure the menu is always displayed in desktop
version.

  • Set “#cssmenu ul ul” to “display:none;” when the width is less than
    768, to prevent the mobile menu to show the sub-items when the menu is
    first opened.`

how do i do that?

they have shown their working responsive view here

http://www.thesmackdownhotel.com/

this is exactly what i want where as my menu button (wth 4 lines) goes waaaaaaaay off on right edge in responsive view and does not fit with screen size!

any help is more than appreciated!
Thanks

1 Like
2

My first suggestion would be to validate your code, which is currently showing 130 errors.

Some of these are very simple things, like using an xhtml doctype, but omitting the closing /. e.g.
<link href="css/font-awesome.min.css" rel="stylesheet">

Always start debugging by fixing errors. It could turn out to be a simple typo causing the issue - and if it isn’t, then at least you know you’re starting with valid code.

3 Likes
3

so I am working on fixing these errors, meanwhile if I could just adjust that menu to work? regarding the question I asked, it would be such a BIG help!

5

Could it be a faulty template?
Possibly a typo where they put <i> instead of <li> (the only valid direct child of <ul>).
I saw another site in another thread recently that had a lot of the exact same error, <i>s as a child of <ul>.

Never expect invalid code to work. Fixing the errors may actually fix the problem you are having.

3 Likes
6

ok trying! thx

7

You need to wrap that line in <li> tags.

So

<ul class="nav nav-pills">
	<li><i class="fa fa-phone"></i> 408-983-2800 <img src="images/shop/zazzle.png" alt="powered by zazzle" height="30px" width="50px"/></li>
</ul>

You have similar examples further down where you do have the <li> tags.

Set “#cssmenu ul” to “display:block !important” when the width is
more than 768, to make sure the menu is always displayed in desktop
version.

  • Set “#cssmenu ul ul” to “display:none;” when the width is less than
    768, to prevent the mobile menu to show the sub-items when the menu is
    first opened.

You do this with media queries. So:

@media screen and (min-width: 768px){
	
	#cssmenu ul {display:block !important;}
	
}

@media screen and (max-width: 767px){
	
	#cssmenu ul {display:none;}
	
}

Generally speaking, you should only need one of those. Either you write your main styles for the desktop view first, and then over-ride them where required for mobile, or you start with mobile first and over-ride them for larger screens.

I’d also be very cautious about the use of !important.

2 Likes
8

The wide menu seems to be due to line 239 of pain.css

.header-bottom .container .row .col-sm-9 { width: 1000px; }

That need to be overriden in the mobile view.
Of possibly an easier fix, just change that to 100%
But still sort out the validation errors.

3 Likes
9

thankyou! in process of fixing errors! thanks to TechnoBear now shortlisted to 27errors from whooping 130 :wink:

3 Likes
10

ok i seem to have the menu working at www.mgdezigns.com
but in responsive view when i go to resolution greater than 768 px the menu items overlay the submenu items of top row , i know i need to put z-index… but I just cannot figure out where in style.css
see code

    @import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
     #cssmenu,
     #cssmenu ul,
     #cssmenu ul li,
     #cssmenu ul li a,

      #cssmenu #menu-button {
       margin: 0;
       padding: 0;
       border: 0;
       list-style: none;
       line-height: 1;
       display: block;
       position: relative;
      z-index: 20;
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       box-sizing: border-box;
     }
     #cssmenu:after,
     #cssmenu > ul:after {
       content: ".";
       display: block;
       clear: both;
       visibility: hidden;
      line-height: 0;
      height: 0;
     }
     #cssmenu #menu-button {
       display: none;
     }
     #cssmenu {
      font-family: Montserrat, sans-serif;
      background: #22120b;
     }
     #cssmenu > ul > li {
       float: left;
     }
     #cssmenu.align-center > ul {
       font-size: 0;
       text-align: center;
      }
      #cssmenu.align-center > ul > li {
      display: inline-block;
      float: none;
    }
       #cssmenu.align-center ul ul {
      text-align: left;
     }
     #cssmenu.align-right > ul > li {
       float: right;
     }
     #cssmenu > ul > li > a {
      padding: 17px;
      font-size: 12px;
      letter-spacing: 1px;
      text-decoration: none;
      color: #dddddd;
   font-weight: 700;
   text-transform: uppercase;
 }
 #cssmenu > ul > li:hover > a {
   color: #ffffff;
 }
 #cssmenu > ul > li.has-sub > a {
   padding-right: 30px;
 }
 #cssmenu > ul > li.has-sub > a:after {
   position: absolute;
   top: 22px;
   right: 11px;
   width: 8px;
   height: 2px;
   display: block;
   background: #dddddd;
   content: '';
 }
 #cssmenu > ul > li.has-sub > a:before {
   position: absolute;
   top: 19px;
   right: 14px;
   display: block;
   width: 2px;
   height: 8px;
   background: #dddddd;
   content: '';
   -webkit-transition: all .25s ease;
   -moz-transition: all .25s ease;
   -ms-transition: all .25s ease;
   -o-transition: all .25s ease;
   transition: all .25s ease;
 }
 #cssmenu > ul > li.has-sub:hover > a:before {
   top: 23px;
   height: 0;
 }

 #cssmenu ul ul {
 #cssmenu ul ul {
   position: absolute;
   left: -9999px;

 }
 #cssmenu.align-right ul ul {
   text-align: right;
 }
 #cssmenu ul ul li {
   height: 0;
   -webkit-transition: all .25s ease;
   -moz-transition: all .25s ease;
   -ms-transition: all .25s ease;
   -o-transition: all .25s ease;
   transition: all .25s ease;
 }
 #cssmenu li:hover > ul {
   left: auto;
 }
 #cssmenu.align-right li:hover > ul {
   left: auto;
   right: 0;
 }
 #cssmenu li:hover > ul > li {
   height: 35px;
 }
 #cssmenu ul ul ul {
   margin-left: 100%;
   top: 0;
 }
 #cssmenu.align-right ul ul ul {
   margin-left: 0;
   margin-right: 100%;
 }
 #cssmenu ul ul li a {
   border-bottom: 1px solid rgba(150, 150, 150, 0.15);
   padding: 11px 15px;
   width: 270px;
   font-size: 12px;
   text-decoration: none;
   color: #dddddd;
   font-weight: 400;
   background: #22120b;
 }
 #cssmenu ul ul li:last-child > a,
 #cssmenu ul ul li.last-item > a {
   border-bottom: 0;
 }
 #cssmenu ul ul li:hover > a,
 #cssmenu ul ul li a:hover {
   color: #ffffff;
 }
 #cssmenu ul ul li.has-sub > a:after {
   position: absolute;
   top: 16px;
   right: 11px;
   width: 8px;
   height: 2px;
   display: block;
   background: #dddddd;
   content: '';
 }
 #cssmenu.align-right ul ul li.has-sub > a:after {
   right: auto;
   left: 11px;
 }
 #cssmenu ul ul li.has-sub > a:before {
   position: absolute;
   top: 13px;
   right: 14px;
   display: block;
   width: 2px;
   height: 8px;
   background: #dddddd;
   content: '';
   -webkit-transition: all .25s ease;
   -moz-transition: all .25s ease;
   -ms-transition: all .25s ease;
   -o-transition: all .25s ease;
   transition: all .25s ease;
 }
 #cssmenu.align-right ul ul li.has-sub > a:before {
   right: auto;
   left: 14px;
 }
 #cssmenu ul ul > li.has-sub:hover > a:before {
   top: 17px;
   height: 0;
 }





  



 @media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
   #cssmenu {
     width: 100%;
   }
   #cssmenu ul {
     width: 100%;
     display: none;
   }
   #cssmenu.align-center > ul {
     text-align: left;
   }
   #cssmenu ul li {
     width: 100%;
     border-top: 1px solid rgba(120, 120, 120, 0.2);
   }
   #cssmenu ul ul li,
   #cssmenu li:hover > ul > li {
     height: auto;
   }
   #cssmenu ul li a,
   #cssmenu ul ul li a {
     width: 100%;
     border-bottom: 0;
   }
   #cssmenu > ul > li {
     float: none;
   }
   #cssmenu ul ul li a {
     padding-left: 25px;
   }
   #cssmenu ul ul ul li a {
     padding-left: 35px;
   }
   #cssmenu ul ul li a {
     color: #dddddd;
     background: none;
   }
   #cssmenu ul ul li:hover > a,
   #cssmenu ul ul li.active > a {
     color: #ffffff;
   }
   #cssmenu ul ul,
   #cssmenu ul ul ul,
   #cssmenu.align-right ul ul {
     position: relative;
     left: 0;
     width: 100%;
     margin: 0;
     text-align: left;
   }
   #cssmenu > ul > li.has-sub > a:after,
   #cssmenu > ul > li.has-sub > a:before,
   #cssmenu ul ul > li.has-sub > a:after,
   #cssmenu ul ul > li.has-sub > a:before {
     display: none;
   }
   #cssmenu #menu-button {
     display: block;
     padding: 17px;
     color: #dddddd;
     cursor: pointer;
     font-size: 12px;
     text-transform: uppercase;
     font-weight: 700;
   }
   #cssmenu #menu-button:after {
     position: absolute;
     top: 22px;
     right: 17px;
     display: block;
     height: 4px;
     width: 20px;
     border-top: 2px solid #dddddd;
     border-bottom: 2px solid #dddddd;
     content: '';
   }
   #cssmenu #menu-button:before {
     position: absolute;
     top: 16px;
     right: 17px;
     display: block;
     height: 2px;
     width: 20px;
     background: #dddddd;
     content: '';
   }
   #cssmenu #menu-button.menu-opened:after {
     top: 23px;
     border: 0;
     height: 2px;
     width: 15px;
     background: #ffffff;
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
     transform: rotate(45deg);
   }
   #cssmenu #menu-button.menu-opened:before {
     top: 23px;
     background: #ffffff;
     width: 15px;
     -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
     transform: rotate(-45deg);
   }
   #cssmenu .submenu-button {
     position: absolute;
     z-index: 99;
     right: 0;
     top: 0;
     display: block;
     border-left: 1px solid rgba(120, 120, 120, 0.2);
     height: 46px;
     width: 46px;
     cursor: pointer;
   }
   #cssmenu .submenu-button.submenu-opened {

     background: #262626;
   }
   #cssmenu ul ul .submenu-button {
     height: 34px;
     width: 34px;
   }
   #cssmenu .submenu-button:after {
     position: absolute;
     top: 22px;
     right: 19px;
     width: 8px;
     height: 2px;
     display: block;
     background: #dddddd;
     content: '';
   }
   #cssmenu ul ul .submenu-button:after {
    top: 15px;
        right: 13px;
      }
      #cssmenu .submenu-button.submenu-opened:after {
        background: #ffffff;
      }
      #cssmenu .submenu-button:before {
       position: absolute;
       top: 19px;
      right: 22px;
       display: block;
      width: 2px;
      height: 8px;
      background: #dddddd;
      content: '';
     }
     #cssmenu ul ul .submenu-button:before {
       top: 12px;
       right: 16px;
    }
     #cssmenu .submenu-button.submenu-opened:before {
      display: none;
     }
   }
1 Like
11

Try increasing z-index of #cssmenu on line 31 of style.css

1 Like
12

here right?

#cssmenu { font-family: Montserrat, sans-serif; background: #22120b; z-index: 95; }

the following happens when width is greater than 768px and less than 980px… I can let it go but it is bugging me :*(

added z-index: 95; not working :frowning:

742×523 117 KB

1 Like
13

Sorry, did not spot that. I was looking at the menu going behind the page contents. I did not try the menu on the narrower view.
Increase the z-index on the #cssmenu ul ul selector on line 96, to bring the sub menu in front of the main menu.

1 Like
14

I just tried removing the z-index from this selector:

styles (line 2)

#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #menu-button {
    border: 0 none;
    box-sizing: border-box;
    display: block;
    line-height: 1;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    position: relative;
/*    z-index: 20;    /* Commented out */
}

and changing the z-index here from 20 to 1:

(line 99)

#cssmenu ul ul {
    left: -9999px;
    position: absolute;
    z-index: 1;
}

seems to work.

2 Likes
15

not working:*( ah well… I will just leave it this behavior is just for device screen size greater than 768px

16

Strange, it seemed to work perfectly when I edited it in “Inspect Element”.

17

nailed it!!!
but now the carousel indicators come front (which was why i added z-index :20 …) how do i fix this

742×523 114 KB

18

Sorry, I didn’t notice the indicators.

Change that z-index from 1 to 16.

#cssmenu ul ul {
    left: -9999px;
    position: absolute;
    z-index: 16;
}
2 Likes
19

Yay!!!1 working! Thank You!!! <3

3 Likes
20

<aside>
Most of the errors flagged by the validator are NOT insignificant and must be repaired if you expect your code to be reliable over time.

When posting code, please enclose it within three backticks on their own lines, like this…
```
your HTML and CSS here
```

OR

highlight your code and click the </> item in the editor’s menu.

Thank you

4 Likes
21

thank you! yes I understand I have to fix the issues but taking it slowly one step at a time
many of the weird errors I have no idea how to fix either…but Iam trying!
and thank you for 3 back ticks suggestion :slight_smile:

1 Like