C
C
Chokatillo2015-11-01 23:43:53
PHP
Chokatillo, 2015-11-01 23:43:53

Trouble displaying Wordpress menu button?

I add a pop-up search to the WordPress menu here: cg91812-wordpress-3.tw1.ru And it seems to work, but it prevents the button background from being displayed correctly, the style of which is defined in style.css HEADER, and it seems the button style falls into place intended for the menu text. Is it possible to get rid of the background, or hide it, but is it better to make it independent of the search button only??? as?
and also, how to push all this search button over the menu ??
search button added via functions.php:

// menu-search-form.
function add_search_to_wp_menu ( $items, $args ) {
 if( 'primary' === $args -> theme_location ) {
$items .= '<li class="menu-item menu-item-search">';
$items .= '<form method="get" class="menu-search-form" action="' . get_bloginfo('home') . '/"><p><input class="text" type="text" value="Кто Ищет, Тот Найдет !" name="s" id="s" onfocus="if (this.value == \'Кто Ищет, Тот Найдет !\') {this.value = \'\';}" onblur="if (this.value == \'\') {this.value = \'Кто Ищет, Тот Найдет !\';}" /><input type="submit" class="my-wp-search" id="searchsubmit" value="&#128269;" /></p></form>';
$items .= '</li>';
 }
return $items;
}
add_filter('wp_nav_menu_items','add_search_to_wp_menu',10,2);

in the search button styles THIS IS HARD BY ME:
/* MENU SEARSH */
.menu-item-search {
position: absolute;
width: 50px
height: 50px;
right:-10px;
z-index:;
-moz-transition: width 400ms ease, background 400ms ease;
-o-transition: width 400ms ease, background 400ms ease;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
}
.menu-item-search:hover {
width: 230px;
}
.my-wp-search {
width: 50px;
height: 50px;
}
.text{
color: #000;
}
#s {
color: #000; /* black font */
height: 50px;
width: 250px
}
#searchsubmit {
cursor: pointer;
height: 50px; /* button height */
margin: 0 0 0 -50px; /* to make the button run over the field */
background: #fe5335; /* button background color */
font-style: normal;
font-size:16px;
text-align: center;
}
/* MENU SEARSH */

Answer the question

In order to leave comments, you need to log in

1 answer(s)
R
Roman, 2015-11-02
@serovpochta

If I understand correctly that you need to remove the blue background from the red button:

.menu-header li:last-child{background:none;}
.menu-header li:last-child:hover{background:none;}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question