You want your site's menu to be on the same line as your search bar? You want your site's menu to be on the same horizontal line as your search bar? In this article, we will go through how this can be achieved.



Before we start


Let's first look at what we have and what we want.


Here's how the header looks now:



Here's how it should look by the end of this article:



Solution


All that is required to get the desired look is to simply add some CSS into the custom CSS section in your ShortPoint Theme Builder. If you don't know how to locate the ShortPoint Theme Builder, please use this article to see how.



Step 1


Copy the CSS code snippet below:


html:not(.shortpoint-mobile-menu-active) {
  div#titleAreaRow {
    display: flex!important;
    align-items: center;
    align-content: center;
    justify-content: space-between;
  }

  div#titleAreaRow * {
    margin-top: 0px!important;
    margin-bottom: 0px!important;
  }
}



Step 2


Paste the code you just copied in the custom CSS section in ShortPoint Theme Builder.




Step 3


Afterwards click publish and your site's menu and search bar should well aligned and visible to all your site's users.


Note: If your site's menu and search bar aren't well aligned yet, please follow the remaining steps:


  • Go to the Header section in ShortPoint Theme Builder, and click Paddings & margins:





  • Edit the top, bottom, left and right paddings until it is just right for you. For example, I have these top, left and right paddings for the screenshot that follows:

Remember, do this only if the menu and search bar aren't already well aligned.





Finally, do not forget to Publish your changes, so it is persistent and visible to your site's users:





You can let us know if this article helped you by giving it a thumbs up. Thank you.


Related articles: