Community Forums › Forums › Archived Forums › General Discussion › Problem with search box in the navigation menu
- This topic has 0 replies, 1 voice, and was last updated 4 years ago by ninfeblu.
-
AuthorPosts
-
April 26, 2020 at 4:21 am #498201ninfebluParticipant
Hello, as you can see I used the code below to add the search box in the navigation menu (and the magnifying glass lens icon). I have three problems:
1. When I pass over the lens with the mouse I can't click it, I can only click the area on the right of the lens. But I need it to be like everyone else's website, I mean that you can click on the lens.
2. On the mobile version, next to the lens there is a black spot that I don't want
3. How can I make the lens bigger?
Any help is gladly accepted. I have the Genesis Sample theme.
Thank you very much
_____________________________________________________in the functions.php:
add_filter( 'wp_nav_menu_items', 'custom_nav_search', 10, 2 );
/**
* Add search box to nav menu.
*/
function custom_nav_search( $items, $args )
{if ( 'primary' === $args->theme_location ) {
// affect only Primary Navigation Menu.
$items .= '<li class="menu-item search">' . get_search_form( false ) . '';
}return $items;
}
in the stile. css:
.menu-item.search {
margin-left: 30px;
}.nav-primary .genesis-nav-menu {
display: -webkit-box;
display: -ms-flexbox;
display: flex;align-items: center;
-webkit-box-align: center;
-webkit-box-pack: center;
-ms-flex-align: center;
-ms-flex-pack: center;
justify-content: center;
}.search .search-form {
text-align: center;}
.search .search-form input[type="search"] {
position: relative;
width: 30px;
padding: 8px 15px;
border: transparent;
border-radius: 1px;
background-color: #ffffff;
font-family: "Open Sans", sans-serif;
font-size: 13px;
cursor: pointer;
-webkit-transition: width 500ms ease, background 400ms ease;
transition: width 500ms ease, background 400ms ease;
}.search .search-form input[type="search"]:focus {
width: 250px;
outline: 0;
background-color: #dddddd;
cursor: text;
}.genesis-nav-menu .search input[type="submit"] {
clip: rect(0, 0, 0, 0);
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
}.search .search-form:before {
top: 50%;
left: 50%;
width: 20px;
height: 20px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-family: "dashicons"; content: "\f179";
}.home .search .search-form:before {
color: #0abab5;}
.site-container.white .search .search-form:before {
color: #7f7f7f;}
@media only screen and (max-width: 862px) {
.nav-primary .genesis-nav-menu {
display: block;
}
}
@media only screen and (max-width: 800px) {
.menu-item.search {
margin-bottom: 10px;
margin-left: 20px;
}.search .search-form:before {
position: absolute;
top: 10px;
left: 0;
color: #7e7e7e;
-webkit-transform: none;
transform: none;
}.search .search-form {
text-align: left;
}.search .search-form input[type="search"] {
https://www.qualitatedesca.eu/
padding-right: 0;
padding-left: 0;
}
} -
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.