Menu Changes

Just a few things…

  1. I have gone through the customization settings and cannot find a way to change the highlight background and highlighted hover link text in the top header menu. I am using the Ethos Stack. I don’t recall using blue anywhere when I set up the theme…

  1. I can’t seem to find where I can add the search bar to the top menu so I can take it out of the side bar.

  2. Is there a place in the customization where I can change the wording inside the search box from “Search” to something like “Looking for something?”

Hello Justin,

Thanks for posting in!

1.) The highlight or the bottom border color in the menu item if it is active or when you hover it, is actually the same color as your link hover color. You can change it in X > Theme Options > Typography > Site Links. You can use the color selector to change the link hover which will also change the color of the highlight or the border of the menu item hover.

2.) By default, you cannot add a search form widget in the navbar. You can only add a search icon in your menu navigation. You can enable it in X > Theme Options > Header > Search. This setting will allow you to activate search functionality for the navbar. If activated, an icon will appear that when clicked will activate the search modal.

3.) This will require search form template modifications. Since you have your child theme active and ready, please follow these steps below:

  • Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.

  • Insert the following code into that new file:

<?php

// =============================================================================
// SEARCHFORM.PHP
// -----------------------------------------------------------------------------
// Template for displaying search forms in X.
// =============================================================================

$input_atts = apply_filters( 'x_search_input_atts', array(
  'class' => 'search-query',
  'placeholder' => __( 'Looking for something?', '__x__' )
) );

?>

<form method="get" id="searchform" class="form-search" action="<?php echo esc_url( home_url( '/' ) ); ?>">
  <label for="s" class="visually-hidden"><?php _e( 'Search', '__x__' ); ?></label>
  <input type="text" id="s" name="s" <?php echo x_atts( $input_atts ); ?> />
</form>


  • Save the file named as searchform.php

  • Upload this file to your server in the child theme’s folder wp-content/themes/x-child/ folder.

We would love to know if this has worked for you. Thank you.

Yes, it worked! I didn’t realize that the hover for the top menu was the same as the links in my content. Would be better if there was a way to change only the menu hover as the links peppered into my articles were blue so as to stand out better.

I am trying the PHP thing now. I am sure it will work because all the help I have received thus far has been spot on. thanks!

Hello Justin,

If you want to change online the line in the menu, you can add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-navbar .desktop .x-nav > li > a:hover, 
.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: 0 2px 0 0 red;
}

Feel free to change the red color to something else.

Can “red” be changed to a rgb or hex color or just the word?

Hey Justin,

Off course, you can.

.x-navbar .desktop .x-nav > li > a:hover, 
.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: 0 2px 0 0 #ff0000;
}

OR:

.x-navbar .desktop .x-nav > li > a:hover, 
.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: 0 2px 0 0 rgb(0,0,0);
}

Hope this helps.

Very much so, thank you!

You are most welcome!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.