Right align search form in header.php

  • Resolved spotter698

    (@spotter698)


    8 years, 6 months ago

    Hi Kharis,

    I would like to right align the search form in the header of my website (www.dr-holly.com.au). I found an article of yours which showed me how to display the search form (copied in quotes below), however, I really need some help to get it aligned to the right hand side of the header.

    I have added an image with a phone number to the left OK within the header.php, however, I cannot get the search feature to go to the right-hand side of the header. I would like to keep the Logo and menu in the middle of the page, and would like to display the Phone No. image (left) and Search Form (right) on the same level as the logo.

    Thanks in advance for your expertise.

    Website is

    “You can add <?php get_search_form(); ?> into the child theme’s template file. If you want to show it in the header, you should copy the header.php file from parent theme folder, then paste it into child theme’s.”

    Regards,
    Steve

Viewing 5 replies - 1 through 5 (of 5 total)

  • Dear Steve,

    Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css? 

    .header-wrap > .container{
  position: relative;
}

.search-form{
  max-width: 315px;
  position: absolute;
  top: 0;
  right: 0;
}

    You would do adjustment to position the search form in the mobile screen.

    Regards,
    Kharis

    Thread Starter spotter698

    (@spotter698)

    Thanks Kharis, your help is really appreciated.

    Can you have another look at the website now (www.dr-holly.com.au), and see your modification results. I have two questions :-

    1. Can I align the Logo into the centre of the header, as it’s displaying slightly to the right?; and

    2. Can the search Button (Green) be in-line with the search box?

    If so, can you advise how to do this please.

    Thanks,
    Steve

    Dear Steve,

    Try to apply the following CSS code: 

    .header-wrap .col-md-4 a:nth-of-type(2){
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

.search-form > label{
  margin-right: -4px;
}

    Regards,
    Kharis

    Thread Starter spotter698

    (@spotter698)

    You are a genius. Thanks Kharis.

    No problem.

    Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

    Regards,
    Kharis

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Right align search form in header.php’ is closed to new replies.