Wordpress: I want my PHP to behave differently depending on the viewport's width

Question

I'm currently working on a Wordpress site. In the navbar there is menu "more" containing various sub-menus. If the viewport is equal or above 768px I want this "more" to disappear and instead display the other sub-menus.

This is the code block responsible for the "more" button in functions.php :

$more_button_options = apply_filters( 'monstroid2_theme_more_button_options', array(
'more_button_type'             => get_theme_mod( 'more_button_type', monstroid2_theme()->customizer->get_default( 'more_button_type' ) ),
'more_button_text'             => get_theme_mod( 'more_button_text', monstroid2_theme()->customizer->get_default( 'more_button_text' ) ),
'more_button_icon'             => get_theme_mod( 'more_button_icon', monstroid2_theme()->customizer->get_default( 'more_button_icon' ) ),
'more_button_image_url'        => get_theme_mod( 'more_button_image_url', monstroid2_theme()->customizer->get_default( 'more_button_image_url' ) ),
'retina_more_button_image_url' => get_theme_mod( 'retina_more_button_image_url', monstroid2_theme()->customizer->get_default( 'retina_more_button_image_url' ) ),
) );

wp_localize_script( 'monstroid2-theme-script', 'monstroid2', apply_filters(
'monstroid2_theme_script_variables',
array(
'ajaxurl'             => esc_url( admin_url( 'admin-ajax.php' ) ),
'labels'              => $labels,
'more_button_options' => $more_button_options,
) ) ); 

So far, my solution was simply to delete this block but it created another problem as the burger icon (which is displayed under 768px) is not clickable anymore and messes up my whole navbar.

I thought about a simple IF/ELSE declaration in functions.php depending on the viewport's width. However PHP is a server based language. I know how to detect the width with Javascript but I can't figure out how to send this information to PHP. I've searched but did'nt find a solution.

Can anyone help?

Answer 1

There is a fundamental misunderstanding between the front-end and back-end processes of how a webpage is served. PHP (Hypertext preprocessor) runs on the server and generates the HTTP response that is served to the user by the webserver. The HTTP response (HTML, CSS, JS) is parsed by the user's browser where front-end scripts (Javascript) are then run. There is nothing that you can do with PHP based on the users viewport (unless you are using AJAX to hit some endpoint with this information).

Answer 2

Using PHP to work on viewports are too long and kinky process. Use CSS to hide the elements on > 768px and same for other sizes as well :)

Best is CSS to do this job.