[Resolved] How do you clear mobile menu navigation bar from print?

[Peter]

Below is my print.css file. It provides me with just the contents and comments on my printed post as desired, but despite entering various id/classes shown by “inspect” I can not remove what looks like the mobile navigation bar (shown in the image below). What do I need to add to the print.css file to clear the menu bar?

/* Print Styles */

@media print {
body { background:white; color:black; margin:0; }
#header, #mobile-header { display:none ; }
#menu-toggle, #main-navigation { display:none; }
#site-navigation, #secondary-navigation { display:none; }
#top-bar, #sidebar { display:none; }
#commentform, #respond { display:none; }
#content, #comments { display:block; }
#footer-widgets, #at-expanding-share-button { display:none; }
h1, h2, h3, h4, h5, h6 { page-break-after:avoid; page-break-inside:avoid; }
img { page-break-inside:avoid; page-break-after:avoid; }
blockquote, table, pre { page-break-inside:avoid; }
ul, ol, dl { page-break-before:avoid; }
.d-print-none, .hidden-print { display:none; }
}

[Tom]

Hi there,

Where can I find that page? Your home page doesn’t seem to have the same issue.

Let me know 🙂

[Peter]

It is on a post type “forms”, with access to subscribers and members (using s2members): https://heart-md-bowhunters.com/forms/waiver-liability-release-2020/. It is also showing, for me, on my other pages including the home page (chrome and edge browsers – laptop computer where the menu shows as a desktop menu until printing).

[Tom]

Have you added your print CSS to your child theme style.css file? I’m not seeing it in there right now.

Let me know 🙂

[Peter]

Print.css is in the child theme directory and called in a snippet:

//Short code [print_button]
add_shortcode( ‘print_button’, ‘print_button_shortcode’ );
function print_button_shortcode( $atts ){
return ‘Print This‘;
}
// Enqueue print.css
add_action( ‘wp_enqueue_scripts’, ‘e_sign_print_script’ );
function e_sign_print_script() {
wp_enqueue_style( ‘print’, get_stylesheet_directory_uri() . ‘/print.css’, null, null, ‘print’ );
}

Are you seeing the menu bar now?

[Tom]

I see it, but I also see a lot of characters on the page I don’t see on the regular page. A different language, maybe?

Are you using any other print-related plugins? Your CSS should be working.

[Peter]

Not to my knowledge. There is formating of the post type “forms” comments, using elements, for the form page which is different (you helped me with one of the filters – Thanks again). I am trying to adapt wordpress comments for electronic signature:

<?php>
/* Provides E-Signature capabilities to wordpress using Generatepress Elements
* Author: Peter Rossi
* Plugin Name: E-Signature
* Requires post type “forms”, single-form.php, and moderation key “E-Sign”
*/

/* Texted before comment form
add_action( ‘comment_form_before’, ‘e_sign_comment_form_before’ );
function e_sign_comment_form_before() {
echo ‘<p class=”comment_form_before”>’ . __( ‘Add text here’ ) . ‘</p>’;
} */
// Change the leave comment header
add_filter( ‘generate_leave_comment’,’e_sign_custom_leave_comment’ );
function e_sign_custom_leave_comment() {
return ‘Sign Form With E-Signature’;
}
// Texted before comment
add_action( ‘comment_form_top’, ‘e_sign_comment_form_top’ );
function e_sign_comment_form_top() {
echo ‘<p class=”comment_form”>’ . __( ‘You can electronically sign this form by entering a valid e-signature. To be valid the e-signature should take the format of; “E-Sign” then your name with a “/” immediately before and after it, followed by a space and your name (identical to the name shown between the “/”) repeated again. Add any minority participants directly below, each name separated by a comma.’ ) . ‘</p>’;
}
// Show placeholder text in the comments field.
add_filter( ‘comment_form_defaults’, function( $defaults ) {
$defaults[‘comment_field’] = sprintf(
‘<p class=”comment-form-comment”><label for=”E-Sign” class=”screen-reader-text”>%1$s</label><textarea placeholder=”Valid Format: E-Sign /John T. Smith/ John T. Smith” id=”comment” name=”comment” cols=”45″ rows=”2″ aria-required=”true”></textarea></p>’,
esc_html__( ‘Comment’, ‘generatepress’ )
);
return $defaults;
}, 20 );
// change submit button text in wordpress comment form
add_filter( ‘comment_form_defaults’, ‘e_sign_change_submit_button_text’ );
function e_sign_change_submit_button_text( $defaults ) {
$defaults[‘label_submit’] = ‘Sign’;
return $defaults;
}
// Adds message next to submit button.
add_filter(“comment_id_fields”,”e_sign_submit_comment_message”);
function e_sign_submit_comment_message($result){
return $result.” <span> Format must be: E-Sign /name/ name e.g. E-Sign /John T. Smith/ John T. Smith.</span>”;
}
// Texted after comment
add_action( ‘comment_form’, ‘e_sign_comment_form’ );
function e_sign_comment_form() {
echo ‘<p class=”comment_form”>’ . __( ‘Add the name(s) of any minority participant(s) below your e-signature’ ) . ‘</p>’;
}
/* Texted after comment form
add_action( ‘comment_form_after’, ‘e_sign_comment_form_after’ );
function e_sign_comment_form_after() {
echo ‘<p class=”comment_form_after”>’ . __( ‘Add text here’ ) . ‘</p>’;
} */
// Change “Reply” in comments
add_filter( ‘comment_reply_link’, ‘e_sign_comment_reply_text’ );
function e_sign_comment_reply_text( $link ) {
$link = str_replace( ‘Reply’, ‘Add Participant’, $link );
return $link;
}
// Only show comments for user
add_filter( ‘comments_array’ , ‘e_sign_filter_by_user’ , 10, 2 );
function e_sign_filter_by_user( $comments, $post_id ){
$current_user = wp_get_current_user(); // retrieve the currently logged in user
// go over each comments for the current post
foreach( $comments as $key => $comment ){
$comment_author = new WP_User( $comment->user_id ); // for each comment get the author user object
// here we say unset the current comment if the comment author is not the same as the logged in user
if( $comment_author->ID != $current_user->ID ){
unset( $comments[$key] );
}
}
return $comments;
}
// Change text “Your comments awaiting moderation.”
add_filter( ‘gettext’, function( $text ) {
if ( ‘Your comment is awaiting moderation.’ === $text ) {
$text = ‘Your document has been signed.’;
}
return $text;
} );
?>

[Tom]

When I go to print the home page, this is what I see: https://www.screencast.com/t/sPxXLEcEJHGZ

Are you seeing different?

[Peter]

Here is what I see:
https://heart-md-bowhunters.com/wp-content/uploads/2020/04/front-page-print.jpg

Which is what I see on two other computers also. All machines are running Windows 10 and chrome browser.

[Tom]

Weird, so am I – never seen that before.

Can you try this for your enqueue function?:

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_style( 'print', get_stylesheet_directory_uri() . '/print.css', null, null, 'print' );
}, 500 );

[Peter]

Your the man! That looks to have worked. Thank you for your perseverance.

[Tom]

Glad I could help! 🙂

[Author]

Posts