How can we help you today?

[Classic Experience Only] How to Align Your Site's Menu and Search Bar Vertically

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

  • 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:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 11 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more