How can I hide the search icon on my top menu bar? http://www.gadgetfriendly.net
I plan on moving the cart over to the right hand side and then moving the search bar down to the smaller menu beneath. Also, if you see the site the code in place for search bar has applied to both menus and all attempts of mine to limit it just 1 have not worked so far. Does anyone know what names the menus go by so I can apply it to this code? – NOTE: Already tried menu names shown in appearance > menu
add_filter(‘wp_nav_menu_items’,’add_search_box’, 10, 2);
function add_search_box($items, $args) {
ob_start();
get_search_form();
$searchform = ob_get_contents();
ob_end_clean();
$items .= ‘
‘;
return $items;
}
?>
Thanks!
Hello Gadget Friendly,
The header files can be found here: http://screencast.com/t/QPJoVVXVFdYP
There is another way to hide the search widget in the top menu, by using CSS:
.td-header-main-menu .td-search-form-widget{
display:none
}
Hope this helps
Thank you.
Thanks Bogdan I actually figured that out playing around with it last night. Problem ive noticed with ti so far though is when the page first loads you can quickly see the icon appear in a white color and then it disappears. Is there a way to remove it completely or change the icon color to match the menu color so you cant tell either way?
Also, if you look at my bottom-top menu @ gadgetfriendly.net how can its height be decreased while keeping the text centered? I was able to adjust the height and make it smaller but the menu items, login, date were no longer centered and for the life of me im just too noob to figure it out
Gadget Friendly
The search icon can be removed completely by commenting this line here:
http://screencast.com/t/E31WRg3VeXMr
As for the menu, i see you figured it out already :). It’s CSS related. Just inspect the elements with your browser’s inspector.
Thanks.
Hey Bogdan, thx for the response. I was able to comment out that line and its working as expected now! As you saw I did get the menus resized and all of the stuff moved but I also noticed that the links are only partially clickable (if the cursor moves to the top half of the menu item thats been adjusted its not longer clickable its like there is something else that didnt get moved along with the button itself. Any ideas? Thanks again
Hello Gadget Friendly,
You have to be careful with these types of modifications as they can create other problems:
Your menu, when viewed on a tablet or mobile phone, gets wacky:
http://screencast.com/t/sbFOZvc4jNf
I’ve patched things up a bit with this code:
.top-header-menu li a {
line-height: 4;}
.td_data_time {
position: relative;
bottom:10px;}
.td-header-style-12 .td-header-top-menu-full{
height: 50px;}It’s a temporary solution. You have to revisit your code and set it properly because right now things are all over the place.
In order to fix it on other types of screens you have to use media queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
I hope this helps and points you in the right direction.
Thank you.
Yep im fully aware about the responsiveness and its just another battle for another day lol. That code worked great though thank you Bogdan youve been a big help!!
Hello,
I am trying to do a similar thing on this site:
http://dev-edible-alpha.pantheonsite.io/
However, when I add the CSS, nothing happens. Any thoughts as to why?
Zac
Hi,
The theme files an classes have changed since this was discussed. If you would like to remove the header search try a code like this
– https://www.screencast.com/t/9FAq9xewdVd
.td-header-menu-wrap .header-search-wrap {
display: none;
}
Thanks
Thanks so much – that did the trick.
