Jump to content
Sign in to follow this  
ianhaney

html css mobile menu issue

Recommended Posts

I need some help with a mobile nav menu, it works to a point, the issue when the nav menu is expanded and I scroll down the site to view the categories in the menu as there are quite a lot, the nav menu collapses. I am unsure how to fix it, the coding I have is below

<script>
/* MOBILE COLLAPSE MENU */
(function($) {
  $.fn.collapsable = function(options) {
    // iterate and reformat each matched element
    return this.each(function() {
      // cache this:
      var obj = $(this);
      var tree = obj.next('.navigation');
      obj.click(function(){
        if( obj.is(':visible') ){tree.toggle();}
      });
      $(window).resize(function(){
        if ( $(window).width() <= 570 ){tree.attr('style','');};
      });
    });
  };
})(jQuery);
</script>

<script>
jQuery(document).ready(function($) {
    $('.slide-trigger').collapsable();
});
</script>

<?php if ($categories) { ?>
<nav class="group">
  <h2 class="navheader slide-trigger">Menu <span></span></h2>
  <ul class="navigation group">
    <?php foreach ($categories as $category) { ?>
    <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
      <?php if ($category['children']) { ?>
      <div>
        <?php for ($i = 0; $i < count($category['children']);) { ?>
        <ul>
          <?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
          <?php for (; $i < $j; $i++) { ?>
          <?php if (isset($category['children'][$i])) { ?>
          <li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
          <?php } ?>
          <?php } ?>
        </ul>
        <?php } ?>
      </div>
      <?php } ?>
    </li>
    <?php } ?>
  </ul>
</div>
    
  </ul>
</nav>
<?php } ?>

nav.group {
margin: -19px 0px 0px -15px;
width: 330px;
clear: both;
}

.navigation {
  max-width: none;
  background: #000;
  padding: 0;
}

.navigation li {
  float: left;
}

.navigation li a {
  display: block;
  color: #fff;
  padding: 10px;
}

.navigation li a:hover {
  background: #0fcaf2;
}

.navheader { 
  font-size: 12px;
}

.slide-trigger {
  display: none; /* need this */
  /*border: 1px solid #CCCCCC;*/
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  -moz-border-radius-bottomright: 10px;
  background: rgba(179,220,237,1);
background: -moz-linear-gradient(-45deg, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(179,220,237,1)), color-stop(50%, rgba(41,184,229,1)), color-stop(100%, rgba(188,224,238,1)));
background: -webkit-linear-gradient(-45deg, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
background: -o-linear-gradient(-45deg, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
background: linear-gradient(135deg, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#bce0ee', GradientType=1 );
  cursor: pointer;
  margin-left: 15px;
  margin-right: 15px;
}

.slide-trigger span {
  background-image: url("../image/dropdown-arrows.png");
  background-position: 0 -14px;
  display: block;
  float: right;
  margin-top: 3px;
  height: 14px;
  width: 32px;
}

.slide-trigger {
display: block;
padding: 10px;
}

.no-js .slide-trigger {
display: none;
}

.navigation {
display: none;
}

.no-js .navigation {
display: block;
}

.navigation {
margin: -9px 15px;
z-index: 9999;
position: absolute;
}

.navigation li {
float: none;
list-style-type: none;
width: 300px;
}

.navigation li a {
border-bottom: 1px solid #fff;
}

Thank you in advance, the site is www.ccgretail.co.uk

Share this post


Link to post
Share on other sites

Hello,

you can use this css for mobile menu issue

@media only screen and (max-device-width: 1920px) and (min-device-width: 768px)


#column-left

{
float: left;
width: 200px;
margin-left: 0;
padding-right: 20px;
}

@media only screen and (max-device-width: 1920px) and (min-device-width: 768px)
#content

{
width: 740px;
min-height: auto;
margin: 0 0 25px;
float: left;
}

Hope that will help you

Hire Backend Developer

Edited by Barand

Share this post


Link to post
Share on other sites

How did that address the original question?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.