Archived topic
How to add some text before the navigation search icon
9 replies · Started by Mario on July 20, 2019
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?
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 :)
Leo,
Thanks for this - it works a treat!
Cheers,
David
Glad you found this solution!
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
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;
}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?
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
David, that's a great help. Thanks!
You're welcome
