If you want to have your site's menu perfectly aligned with the search bar, this article is for you.

Before:

After:

It is possible to achieve this result with some custom CSS code. Please follow the steps below.

TABLE OF CONTENTS

• This article is for you if
• Solution
  • Step 1. Prepare the custom CSS code
  • Step 2. Apply the custom CSS code in Theme Builder
• Troubleshooting: Site's menu and search bar are not well aligned yet
  • Adjust the Paddings & Margins

This article is for you if

• You use SharePoint classic experience.
• You have ShortPoint installed on your SharePoint site(s).
• You are a ShortPoint user with an active license.

Solution

Step 1. Prepare the custom CSS code

Here is the custom CSS code snippet that you will need to use. Please copy it:

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. Apply the custom CSS code in Theme Builder

Open the ShortPoint Theme Builder and click Customize my site:

Navigate to the Utilities > Custom CSS:

Paste the code you copied in the Step1 to the Custom CSS text area:

Click Apply (1) and then Publish (2) to save the customizations:

Troubleshooting: Site's menu and search bar are not well aligned yet

There might be that the site's menu and the search bar are still not aligned well. If this is the case please follow the steps below.

Adjust the Paddings & Margins

From the Theme Builder menu, navigate to Header > Paddings & Margins:

Edit the top, bottom, left and right paddings until it is just right for you. For example, we have changed the padding values:

• Header padding top: 29px;
• Header padding bottom: 0px;
• Header padding left: 23px;
• Header padding right: 13px.

Note: In case of modifying the padding and margin values, please do not forget to Publish your changes.

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

That's it. Your result should look similar to this:

Happy aligning!

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)