0

I'm struggling with applying the wordpress function for a specific screen width. Below is the given php function which I wish to apply for a particular screen width:

function add_specific_menu_atts( $atts, $item, $args ) {
    $menu_items = array(4167, 4181, 4359, 4407, 4413, 4423, 4440);
    if (in_array($item->ID, $menu_items)) {
      $atts['data-toggle'] = 'dropdown';
    }

    return $atts;
} 
add_filter( 'nav_menu_link_attributes', 'add_specific_menu_atts', 10, 3 );

I would really appreciate the much-needed help.

Kablam
  • 2,240
  • 5
  • 24
  • 45
RazKaz
  • 1
  • 2
  • Does this answer your question? [Getting the screen resolution using PHP](https://stackoverflow.com/questions/1504459/getting-the-screen-resolution-using-php) – Triby Dec 24 '19 at 15:47

1 Answers1

0

The main issue is that php does not have access to the screen width.

It would help if we knew what it is that you want to accomplish.

Also keep in mind that the user can resize the browser window after the page has loaded (or rotate the device) and php already finished it's job. Therefore, probably you are looking for a Javascript solution. This means, run the php function and set up some attributes or CSS classes and then have Javascript change things using those CSS classes.

I will assume that you use jQuery and have a menu in which you want certain elements to be hidden when the screen width is smaller than a threshold, say 800px.

Maybe this will help:

$(function() { // DOM is loaded
  function resize() {
    var bodyWidth = $('body').width();
    if (bodyWidth < 800) {
      $('.hide-on-mobile').hide();
    } else {
      $('.hide-on-mobile').show();
    }
  }
  $(window).resize(function() {
    resize();
  });
  resize(true); // initial call
});
fruehbier
  • 48
  • 1
  • 6
  • I want to add the html attribute data-toggle="dropdown" in my website's menu to display its dropdown on the cell phones. – RazKaz Dec 25 '19 at 08:44