Decrease the Width/Margin for the search bar

  • Resolved tejasrinivasvk

    (@tejasrinivasvk)


    1 year, 3 months ago

    The fibo search bar is sticky on all my pages. SInce its always visible its takes up a lot of valuable real estate on the screen. I wish to decrease its Margin to Zero/ Decrease its width. Kindly help me with a CSS Code i can use to achieve this.

    Thank you.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

  • Hi @tejasrinivasvk

    Do you want to decrease margins here (screenshot)? Reducing this margin may not help, because the logo is still higher than FiboSearch. You can reduce FiboSearch height by using this CSS:

    html .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
	padding: 6px 24px 6px 48px;
}

#mysticky-nav .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
  top: 3px !important;
  right: 12px !important;
}

    Paste it into Appearance -> Customize -> Additional CSS. If you aren’t familiar with custom CSS, take a look at this video.

    However, you will still need to reduce the height of the logo to make the header smaller.

    Also, the FiboSearch bar width can be changed in WP Admin -> WooCommerce -> FiboSearch -> Search bar (tab) -> Max form width (screenshot).

    Regards,
    Kris

Viewing 1 replies (of 1 total)
  • The topic ‘Decrease the Width/Margin for the search bar’ is closed to new replies.