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

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

Home Forums Support How do you clear mobile menu navigation bar from print?

  • This topic has 11 replies, 2 voices, and was last updated 2 years ago by Tom.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #1245677

    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 */

    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; }

    Lead Developer
    Lead Developer

    Hi there,

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

    Let me know πŸ™‚


    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).

    Lead Developer
    Lead Developer

    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 πŸ™‚


    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?

    Lead Developer
    Lead Developer

    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.


    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:

    /* 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.
    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;
    } );

    Lead Developer
    Lead Developer

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

    Are you seeing different?


    Here is what I see:

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

    Lead Developer
    Lead Developer

    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 );

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

    Lead Developer
    Lead Developer
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.