BuddyDev

Search

[Resolved] How to limit the size of the Search Field box in Header?

Tagged: , , , ,

  • Participant
    Level: Enlightened
    Posts: 25
    Alexis Bugnolo on March 25, 2021 at 8:00 am #37211

    I am using the lastest version of Community Builder Pro Theme, for BuddyPress, and have encountered this styling issue.

    On a pc, the search field fills 100& of the space between the logo and the Notifications icon. I would like it to fill only 90% of that space. So where in the theme child or parent would I change it?

  • Keymaster
    (BuddyDev Team)
    Posts: 24583
    Brajesh Singh on March 25, 2021 at 4:04 pm #37223

    Hi Alexis,
    You may use the following css to control it.

    

.site-header-row  .search-form {

  max-width: 90%;
}

    Regards
    Brajesh

  • Participant
    Level: Enlightened
    Posts: 25
    Alexis Bugnolo on March 26, 2021 at 12:00 am #37256

    OK, that reduces the search field size, but only insofar as it regards the right margin space. It still impacts the site logo on the left side.

  • Keymaster
    (BuddyDev Team)
    Posts: 24583
    Brajesh Singh on March 26, 2021 at 12:02 am #37258

    Hi Alexis,
    Please link me to a screenshot showing how you want it to work. It should be a simple css change.

    Regards
    Brajesh

  • Participant
    Level: Enlightened
    Posts: 25
    Alexis Bugnolo on March 26, 2021 at 12:05 am #37260

    https://ibb.co/pzCM7J1

  • Keymaster
    (BuddyDev Team)
    Posts: 24583
    Brajesh Singh on March 26, 2021 at 12:06 am #37261

    I am interested in knowing(if you can mark on the image) on how do you want it to look like?

    Thank you
    Brajesh

  • Participant
    Level: Enlightened
    Posts: 25
    Alexis Bugnolo on March 26, 2021 at 12:07 am #37263

    I would like the search field to be equally spaced on left and right, from the logo on the left, to the notifications icon on the right.

  • Participant
    Level: Enlightened
    Posts: 25
    Alexis Bugnolo on March 26, 2021 at 12:10 am #37265

    For exzmple, just as in the theme of buddydev, where the menu idem Blog is just as far from your BuddyDev logo, as your menu item Pricing is from the UserName Icon.

  • Keymaster
    (BuddyDev Team)
    Posts: 24583
    Brajesh Singh on March 26, 2021 at 1:11 am #37268

    Hi Alexis,
    Thank you.

    Please add the below code too(please make sure to keep the one I shared earlier).

    
.site-header-row .site-header-block-middle{

   justify-content: center;
}

    That will do it.

    Regards
    Brajesh

    • This reply was modified 3 years, 7 months ago by Brajesh Singh. Reason: Updated code
  • Participant
    Level: Enlightened
    Posts: 25
    Alexis Bugnolo on March 26, 2021 at 3:23 pm #37281

    That does the trick. Thanks Brajesh!

The topic ‘ [Resolved] How to limit the size of the Search Field box in Header?’ is closed to new replies.

This topic is: resolved