WordPress.org

Ready to get started?Download WordPress

Forums

How to get my search box on the right side of my navigation (16 posts)

  1. fairmediacouncil
    Member
    Posted 6 months ago #

    Hello,

    I am running a test site I would like to go live soon. I want to move my search box to the right ON my navigation bar. Right now my site looks like the following:

    test.fairmediacouncil.org

    I'm currently using duena as a theme.

    Let me know whatever coding you need me to provide to help you help me.

  2. parcodeisuoni
    Member
    Posted 6 months ago #

    Hi,
    right now you have TWO search forms on this site.
    If you remove the one you added in your "topnav" menu, and keep just the one that is just after
    <div class="navbar_inner">
    then just need to add something like this to you css:

    .searchform {
      float: right;
      padding-right: 15px;
    }
    .searchform #searchsubmit {
      padding-right: 15px; //or whatever value you need
    }

    Hope it helps, cheers

  3. DMBarber
    Member
    Posted 6 months ago #

    As @parcodeisuoni mentioned, you have two forms, remove the one from your menu then add this to your css (preferably through your child theme css so your changes do not get lost after an update):

    .searchform {
    width: 200px; /* Sets your form to a specific width */
    float: left;
    margin: 10px;
    }
  4. fairmediacouncil
    Member
    Posted 6 months ago #

    Thanks for the replies. I did not mention I am using a plugin for those search bars. I just changed my css to:

    /* Search */
    .searchform {
      float: right;
      padding-right: 15px;
    }
    .searchform .field {
      width: 50%;
      margin: 0;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      height: 30px;
      border-radius: 15px;
      padding: 7px 35px 8px 15px;
    }
    .searchform #searchsubmit {
      vertical-align: top;
      position: absolute;
      right: 0;
      bottom: 0;

    I haven't seen any changes yet, but, yesterday I did change some of the themes colors and it took a while for the changes to become visible. So ill update you in a little bit. Thanks again guys.

  5. fairmediacouncil
    Member
    Posted 6 months ago #

    With the code I listetd above look at my site now test.fairmediacouncil.org Im not 100% where to find the search bar to the left (the one id like to delete in the css) and the one i want to keep is floating right but has the magnifying glass image halfway down the page, I assume, because I made it too small?

  6. DMBarber
    Member
    Posted 6 months ago #

    Check your plugin that you use for the search bars. You may also want to check you menus to make sure you did not manually add the search bar to your menu (just a thought).

    Your magnifying glass image is where it is because of the css you added. Remove the two styles you added to your stylesheet ( .searchform .field and .searchform #searchsubmit ) to fix it. Change your other style to:

    .searchform {
    width: 200px; /* Sets your form to a specific width */
    float: right;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    }

    adjust the width your form/field with the width: element and the space around your form (the amount of navigation bar that is seen) by adjusting the margin elements.

  7. fairmediacouncil
    Member
    Posted 6 months ago #

    Thank you again. After inspecting the element on the live page I noticed the unwanted search bar was a part of a list with the nav menu items but when I went through my menus nothing appeared there in terms of a search bar. The other search bar , the one i want, fell under <div class="navbar_inner"> Any other ideas?

  8. DMBarber
    Member
    Posted 6 months ago #

    Which plugin are you using to add your search form?

  9. fairmediacouncil
    Member
    Posted 6 months ago #

  10. DMBarber
    Member
    Posted 6 months ago #

    So, I installed the plugin on my practice site. It is rather frustrating that there is no control resources associated with it...

    Anyway, I do not know how you get the 'second' search form added to your navbar (this is the one on the right hand side, where you want it). Remove it. Yes, please do. Do not worry, here is the fix. Remove the css you added to style your searchform and replace it with this:

    #topnav li:last-child {
    float: right;
    margin-right: 25px;
    }

    This will put your search form on the right hand side. The margin-right: 25px will add a 'space' between the form and side of the navbar. Feel free to adjust the number to suit your taste. That should do it.

  11. parcodeisuoni
    Member
    Posted 6 months ago #

    Hi,
    the plugin you linked above simply adds a search form to any registered navigation menu in your theme. It adds it wrapped into a <li> tag at the end of menu items.

    The theme you're using, Duena, also adds a search form in the header, so you have the two, and to have only one you need to deactivate that plugin or remove the search form from the header.

    If you already made a child theme, which would be the best way to do, you could simply deactivate the plugin, create a copy of header.php to your child theme directory, and move the search form where you need.

    Then, as @DMBarber suggested, it's just some css to style it the way you want.
    I tested with these changes

    /* Search */
    .searchform {
      float: right;
      padding-right: 50px;
    }
    .searchform .field {
      width: 100%;
      margin: 0;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      height: 35px;
      border-radius: 20px;
      padding: 7px 30px 8px 15px;
    }
    .searchform #searchsubmit {
      vertical-align: top;
      position: relative;
      left: 86%;
      bottom: 33px;
      background: url(images/top-search-submit.png) no-repeat 0 -1px;
      border: none;
      width: 35px;
      height: 30px;
      box-shadow: none;
      overflow: hidden;
      text-indent: -100px;
      font: 0/0 a;
      color: transparent;
      -webkit-transition: all 200ms linear;
      -moz-transition: all 200ms linear;
      -o-transition: all 200ms linear;
      transition: all 200ms linear;
    }

    and seems what you were...searching!!

    hope it helps

  12. Gemfruit
    Member
    Posted 6 months ago #

    I added this to my functions.php to put it to the right of my menu items.

    //Adds the search box to the menu navigation list.
    	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 .= '<li class="searchboxright">' . $searchform . '</li>';
    
    		return $items;
    	}

    I believe you won't even need your plugin, and that should work on its own. Let me know!

    Example on my site - http://www.gemfruit.com

  13. fairmediacouncil
    Member
    Posted 6 months ago #

    Awesome. I now only have one and on the right. Thanks everyone!
    My last question about this is in the commotion of editing the search form css and related navbar css so much my nav bar is too thick (as in a little too tall, http://test.fairmediacouncil.org/) Is there a quick fix for that?

  14. Gemfruit
    Member
    Posted 6 months ago #

    The height is being set to 110px in what appears to be one of the following in style.css.

    site-navigation
    main-nav

    I can't pinpoint it exactly, but if you do a search for 110 within style.css, you should find something pertaining to the height of your navigation.

    You'll want to change that 110 to whatever you need.

  15. DMBarber
    Member
    Posted 6 months ago #

    Your form selector has a bottom margin of 20px. Add

    margin-bottom: 0;

    to your .searchform selector in your css and it will reduce the height of your navbar. Like so:

    /* Search */
    .searchform {
      float: right;
      padding-right: 50px;
      margin-bottom: 0;
    }
  16. fairmediacouncil
    Member
    Posted 6 months ago #

    .main-nav .navbar_inner {
      background: #262626;
      height: 80px;
    was what I did to fix it. Thanks for your help!

Reply

You must log in to post.

About this Topic