Search Bar in index.php

  • Resolved bebibu

    (@bebibu)


    8 years, 7 months ago

    Dear All,

    I try to add search form in index.php, after the Blog Subheading place, with this code and its work.

    <?php
    if ( hu_is_checked('blog-heading-enabled') && is_home() ) {
      get_template_part('parts/page-title');
    }
  ?>

<div class="page-title pad group">
<div class="entry themeform">
<div class="notebox">
<?php get_search_form(); ?>
</div>
</div>
</div>
	<div class="pad group">

    The question…

    1. There is different width betwen area before and after search form (area number 11 and area number 2) Please see this screenshoot https://postimg.org/image/tsl9nlxql/

    How to fix it?

    2. When i try to check in mobile device, the search form not responsive. Search form not centered. Please see the screenshoot https://postimg.org/image/mliff7ygx/

    How to make the search form responsive and centered?

    Thanks for the answer…

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter bebibu

    (@bebibu)

    typo: i mean (area number 1 and area number 2)

    Hi bebibu.

    1. Try removing the outer div so you have this instead:

    <div class="entry themeform">
<div class="notebox">
<?php get_search_form(); ?>
</div>
</div>

    2. Try adding this CSS:

    .search-expand-inner {
  padding-right: 0;
}
    Thread Starter bebibu

    (@bebibu)

    Thanks for the answer, bdbrown..

    For problem number 2 i try add that code and i think its work.

    But for problem number 1, i think its not. i want to remove width under search bar but without remove line under search bar.

    screenshhot: https://postimg.org/image/i1wwr8cul/

    Try adding a new class to the top div:

    <div class="mysearchbar page-title pad group">
  <div class="entry themeform">
    <div class="notebox">
      <?php get_search_form(); ?>
    </div>
  </div>
</div>

    Then add this CSS:

    /* remove padding around searchbar *?
.mysearchbar {
    padding-top: 1px;
    padding-bottom: 0;
}

.mysearchbar .notebox {
    margin-bottom: 1px !important;
}
    Thread Starter bebibu

    (@bebibu)

    this is the result >>> https://postimg.org/image/ltpe3s3jj/

    look great in mobile device but not so good in pc. so i try to change padding top and margin bottom to…

    .mysearchbar {
	padding-top: 9px;
	padding-bottom: 0;
}

.mysearchbar .notebox {
	margin-bottom: 9px !important;
}

    the result is >>> https://postimg.org/image/57k87zdmj/

    look great in pc but not in mobile device.

    i know this is not a big problem but i am curious about this ?? can i send you a private message so i can send my blog link?

    thank you

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Search Bar in index.php’ is closed to new replies.