Menu icon Foundation

My Posts


  • 2
    Replies
  • overlaying center aligned divs

    By rivet

    overlapping

    I would like to create a unique solution for a div and maintain its responsiveness. I have attached an image to explain it better. 1. The div will contain the title of the page, which can vary from any number of characters. 2. Underneath the title the... (continued)

    Last Reply by rivet over 4 years ago


My Comments

rivet commented on Andrew's post about 4 years

there is a color for each bar

a.menu-icon span {
box-shadow: 0 10px 0 1px grey, 0 16px 0 1px grey, 0 22px 0 1px grey;
}

rivet commented on rivet's post over 4 years

solved: just js to capture the beakpoints:

 <script>
jQuery(document).ready(function() {
  // check width on resize
  jQuery(window).resize(function() {
    var windowwidth = jQuery( window ).width(); 
    var ems = windowwidth / parseFloat(jQuery("body").css("font-size")); //alert( ems );

    if( ems < 40.063 ){
      var bkimg = '<?php echo $small;?>';
    }else{
      var bkimg = '<?php echo $large;?>';
    }

    jQuery('#bkimg').css('background-image', 'url(' + bkimg + ')');

  });

  // check width on load
  jQuery(document).ready(function(){
    var windowwidth = jQuery( window ).width(); 
    var ems = windowwidth / parseFloat(jQuery("body").css("font-size")); //alert( ems );

    if( ems < 40.063 ){
      var bkimg = '<?php echo $small;?>';
    }else{
      var bkimg = '<?php echo $large;?>';
    }
    jQuery('#bkimg').css('background-image', 'url(' + bkimg + ')');

  });


});
</script>

rivet commented on rivet's post over 4 years

thanks dims, this really great,
title length changes the centering, but I might be able to work around.

Posts Followed

  • 4
    Replies
  • How to change the colours of the off-canvas menu icon

    By Andrew

    Hi Im developing a new mobile site and am new to the Foundation code. Im specifically looking for some help in changing the colours of menu icon on the off-canvas navigation. I have found where to change the tab-bar background colour to white but a... (continued)

    Last Reply by rivet about 4 years ago


Following

    No Content

Followers

My Posts



My Comments

You commented on Andrew's post about 4 years

there is a color for each bar

a.menu-icon span {
box-shadow: 0 10px 0 1px grey, 0 16px 0 1px grey, 0 22px 0 1px grey;
}

You commented on rivet's post over 4 years

solved: just js to capture the beakpoints:

 <script>
jQuery(document).ready(function() {
  // check width on resize
  jQuery(window).resize(function() {
    var windowwidth = jQuery( window ).width(); 
    var ems = windowwidth / parseFloat(jQuery("body").css("font-size")); //alert( ems );

    if( ems < 40.063 ){
      var bkimg = '<?php echo $small;?>';
    }else{
      var bkimg = '<?php echo $large;?>';
    }

    jQuery('#bkimg').css('background-image', 'url(' + bkimg + ')');

  });

  // check width on load
  jQuery(document).ready(function(){
    var windowwidth = jQuery( window ).width(); 
    var ems = windowwidth / parseFloat(jQuery("body").css("font-size")); //alert( ems );

    if( ems < 40.063 ){
      var bkimg = '<?php echo $small;?>';
    }else{
      var bkimg = '<?php echo $large;?>';
    }
    jQuery('#bkimg').css('background-image', 'url(' + bkimg + ')');

  });


});
</script>

You commented on rivet's post over 4 years

thanks dims, this really great,
title length changes the centering, but I might be able to work around.

Posts Followed


Following

  • No Content

Followers

  • No Content