Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS invoke the search widget from a navmenu button in wordpress theme twentythirteen

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #242090
    jevans17
    Participant

    Preamble:
    you might say this is a problem for wordpress.org forums – yes I have posted the problem there but people are obviously too busy to help me – I can’t blame them for that.
    Essentially the problem is this:
    want to invoke the search from a menu item
    I do not know how to achieve this.
    I need to remove the current simple search item and invoke it from a menu item. This would allow me to place the search wherever I wanted it along the navbar menu.
    This does not look like an easy problem and may be too much to ask but if someone could could give me some pointers as to what to do I may be able to take a crack at it. I want to make SEARCH a part of my “pretty” navbar menu setup.
    I cannot easily link you to my site as it is a XAMPP site setup.

    addendum,
    Further elucidation…
    In the twentythirteen child style.css file, I have created a special class to create a button menu item.
    I then created a custom class menu item and called this button class. I labelled it “Search”
    I now Have seven nice buttons in a row across my navigation menu.(one of which is called “Search”. It does nothing of course.
    I want it to invoke the simple search supplied with this theme.
    But HOW?
    I cannot see how to begin

    please help ( a bit at least) :)
    please ask for elucidation if you need it

    THANKS for reading

    #242098
    amanda_
    Participant

    Hi,

    I don’t use child themes at all, and I’m aware they can lead to all types of messes if you do too much messing around with them, so use cation. I would probably do some sort of dirty hack for this using jQuery – like maybe detach(); and then reinsert elsewhere… or maybe utilize flexbox ordering some way.

    I’m fairly certain that’s not a correct way of doing that, but when people insist on certain things…. I’m not above getting a little creative.

    If you are comfortable in functions.php, that is where you’d work on your menu. I have never put a search into a menu, but I’m sure there’s a way, you’re not the first person to want this.

    Do you know the function reference for putting search box in theme??

    <?php get_search_form(); ?>
    
    #242099
    Senff
    Participant

    What do you mean by this exactly, esp. “invoke a search”? You want the search form (input field + button) in the main navigation? Or do you want a link in your menu (called “Search” or something) that opens a popup or new page with the search form on it?

    Either way, you can place the search form anywhere on your site by adding this code to any template:

    <?php 
       get_search_form(); 
    ?>
    

    EDIT: looks like Amanda beat me to it :)

    #242101
    Senff
    Participant

    I don’t use child themes at all, and I’m aware they can lead to all types of messes if you do too much messing around with them, so use cation.

    Noooooo! You definitely should use Child Themes! Never hack around in any original theme, cause that will cause a mess. :)

    #242111
    amanda_
    Participant

    I mean, I write my own themes, from Underscore – which was created for this purpose.

    #242128
    jevans17
    Participant

    Thank you Senff and Amanda for replying so promptly.

    What I’ve done so far:
    I created a menu item using a custom link
    in the navigation label box I put “<button class=”navbtnhome”>Search</button>”
    saved it of course and added it to my navigation menu.

    In style.css (in my child theme)
    I created a class

    .navbtnhome {
    background-color: green;
    color: black;
    border-color: none;
    border-radius: 10px;
    padding: 3px 10px 3px 10px;
    margin-top: 2px;
    }

    .navbtnhome:hover {
    background-color: white;
    color: black;
    border-color: none;
    /border-radius: 10px;/
    padding: 3px 10px 3px 10px;
    }

    NOW: i have a nice menu button that at present does nothing:
    I want
    (Senff had it about right)
    A search box to appear when my new search menu button is pressed.

    I do not know how to do this.

    Thanks for the help so far

    #242136
    jevans17
    Participant

    Good Morning all,

    My last entry was done very late at night (brain more befuddled than usual)
    I forgot to say I understood about

    <?php
    get_search_form();
    ?>

    BUT how do I assign this to my menu button?

    which template file should I use?

    thanks

    #242150
    amanda_
    Participant

    Where do you want your search button to appear?

    #242155
    Senff
    Participant

    I’d say you shouldn’t put it in the menu itself, but next to it, and then style it so that it looks like it’s part of the menu.

    It seems that in TwentyThirteen, the search box is already right next to the navigation by default:

    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    <?php get_search_form(); ?>
    

    So, I don’t think you need to do much about that, and it just comes down to styling it properly. Try adding some CSS like this:

    div.nav-menu > ul {
       float:left;
    }
    
    .site-header form.search-form {
       position: static;
    }
    
    #242186
    jevans17
    Participant

    I feel so ungrateful but I am really not. Thanks so much for trying to help me.
    I know the search is already beside the nav bar but I do not want that. I want it removed and extend the navigation menu across the whole screen.
    I already have a SEARCH menu button which at the moment does nothing. I want it to activate the search supplied by this theme.

    This will then give me design and aesthetic control of the Search menu button so that I can place it anywhere in my menu system. The search could then open in a white box for instance.

    In my simple mind I suppose I want to invoke the search widget by pressing a menu button.

    I respect both your views but this is what I want to do. Is it possible?

    I may be asking the impossible inside twentythirteen, I do not know.

    Can you help please?

    best regards

    #242188
    Senff
    Participant

    Anything is possible but to me it’s just unclear what you want.

    You can have a search button anywhere you like, but you really need an input field as well — how else will you tell the system what you’re actually searching for?

    So the way I understand it now, you want to have a search form (= input field + search button) but it shouldn’t be visible initially.
    In the menu, you want to have a link (or button) that says “SEARCH” and when you click that, it should make that search form appear.

    Is that correct?

    #242819
    jevans17
    Participant

    Sorry i’ve been away –

    senff/amanda,

    What I want,

    I have at present a i have a custom link button in my nav menu labelled “Search” – this button is linked to nothing ( may have created it prematurely ?)

    anyway i want In the menu, you want to have a link (or button) that says “SEARCH” and when you click that, it should make that search form appear. preferably directly underneath.

    I may be asking too much – it looks more complicated than I thought. I’m unable to see how to do it myself.

    If i’m asking for too much help PLEASE say so.

    best regards

    John

    #242823
    rkieru
    Participant

    I wonder if this article might address what you are trying to accomplish?

    #242828
    amanda_
    Participant

    You could do that by adding div with a style display:none and then use the jQuery slide down onclick. Style the div how you’d like it look before you make it display none, then add the display none, then the small line of jQuery.

    #243341
    jevans17
    Participant

    Thanks to All,

    I have decided to take some earlier advice and leave the current search as is. I am not capable of understanding the options you have presented to me. That is my fault not yours.
    I am going to go back and review my plans

    THANKS VERY MUCH for all your efforts

    Please don’t think you have wasted your time, I have learnt a lot from this topic

    Best regards

    John

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.