You want your site's menu to be on the same line as your Searchbar? You want your site's menu to be on the same horizontal line as your Searchbar? 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 searchbar should well aligned and visible to all your site's users.



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


  • Go to the 'Header' section in Shortpoint's 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 searchbar 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:
How to make your site's Sub Menu wider

How to Create Header Sub-Menus with Drop-Down Lists

How to Design a Beautiful Header (Inspired by ShortPoint Demos Website)