[Support request] How to add some text before the navigation search icon

Home Forums Support How to add some text before the navigation search icon

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #962965
    Mario

    Hello,

    i want to add some text before the navigation search icon (not the placeholder text).

    i already found an function called generate_menu_fallback in the navigation.php. But there’s no filter or action set. I tried to add this function to my child theme’s function php by adding some text.

    /**
     * Menu fallback.
     *
     * @since 1.1.4
     *
     * @param  array $args
     * @return string
     */
    function generate_menu_fallback_custom( $args ) {
    	$generate_settings = wp_parse_args(
    		get_option( 'generate_settings', array() ),
    		generate_get_defaults()
    	);
    	?>
    	<div id="primary-menu" class="main-nav">
    		<ul <?php generate_do_element_classes( 'menu' ); ?>>
    			<?php
    			$args = array(
    				'sort_column' => 'menu_order',
    				'title_li' => '',
    				'walker' => new Generate_Page_Walker(),
    			);
    
    			wp_list_pages( $args );
    
    			if ( 'enable' == $generate_settings['nav_search'] ) {
    				$icon = generate_get_svg_icon( 'search', true );
    				echo '<li class="search-item" title="' . esc_attr_x( 'Search', 'submit button', 'generatepress' ) . '"><a href="#">Open Search' . $icon . '<span class="screen-reader-text">' . esc_html_x( 'Search', 'submit button', 'generatepress' ) . '</span></a></li>';
    			}
    			?>
    		</ul>
    	</div><!-- .main-nav -->
    	<?php
    }

    As you can see, in the function ‘… Open Search’ . $icon . ‘<span …’ i added the “Open Search” Text. But nothing displayed.

    Cache already cleared in my browser and server.

    What can i do to solve the problem?

    #963030
    Leo
    Staff
    Customer Support

    Hi there,

    Shouldn’t need the function.

    Try just this CSS:

    .search-item a:before {
        content: "text ";
    }
    .search-item a:after {
        content: "\f002";
        font-family: GeneratePress;
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    Let me know 🙂

    #1108528
    David

    Leo,

    Thanks for this – it works a treat!

    Cheers,

    David

    #1109240
    Leo
    Staff
    Customer Support

    Glad you found this solution!

    #1122403
    David

    Hi Leo,

    Just noticed that when I click on the Search Icon, it leaves a little square box. Possibly due to me now using SVGs? This is my code.

    .search-item a:before {
        content: "Search ";
    		padding-right: 2rem;
    		font-family: inherit;
    }

    So I’m trying to get the following to work, but it only works without the ‘active’, which is no good because then Search is invisible in the regular menu.

    .search-item a:active:before{
    		opacity: 0;
    }

    Any suggestions please? It’s for https://pagespeedtweaks.com

    Thanks

    #1122821
    Tom
    Lead Developer
    Lead Developer

    The square is being caused by this CSS:

    .search-item.close-search a:before {
        content: "\f00d";
    }

    If you remove that, it should go away.

    Instead, try this:

    .search-item.close-search a:before {
        display: none;
    }
    #1124507
    David

    Tom, that was perfect. Thanks.

    Don’t want to get off topic, but what’s the best way to add CSS to individual pages please?

    Some themes have an extra CSS box for each page, which helps loading all your extra CSS in the WordPress extra CSS box.

    Can we do this with Elements?

    #1124927
    David
    Staff
    Customer Support

    Hi there,

    Tom’s Simple CSS Plugin provides a CSS meta box in the post editor:

    https://en-gb.wordpress.org/plugins/simple-css/

    Or yes, a Hook Element with your styles inside <style type="text/css">/*CSS here */</style> tags will do the trick

    #1125028
    David

    David, that’s a great help. Thanks!

    #1125470
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.