- This topic has 9 replies, 5 voices, and was last updated 4 years, 2 months ago by David.
-
AuthorPosts
-
July 20, 2019 at 2:40 pm #962965Mario
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?
July 20, 2019 at 6:15 pm #963030LeoStaffCustomer SupportHi 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 🙂
December 19, 2019 at 12:42 am #1108528DavidLeo,
Thanks for this – it works a treat!
Cheers,
David
December 19, 2019 at 3:41 pm #1109240LeoStaffCustomer SupportGlad you found this solution!
January 5, 2020 at 2:31 am #1122403DavidHi 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
January 5, 2020 at 9:48 am #1122821TomLead DeveloperLead DeveloperThe 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; }
January 7, 2020 at 5:22 am #1124507DavidTom, 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?
January 7, 2020 at 10:21 am #1124927DavidStaffCustomer SupportHi 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 trickJanuary 7, 2020 at 1:14 pm #1125028DavidDavid, that’s a great help. Thanks!
January 8, 2020 at 4:55 am #1125470DavidStaffCustomer SupportYou’re welcome
-
AuthorPosts
- You must be logged in to reply to this topic.