Workaround: Center Website Logo

Link: https://support.brilliantdirectories.com/support/solutions/articles/12000093278

Overview

On all Brilliant Directories websites, the Logo is placed to the left within the header:

This leaves room for the Logo and the Header Search and links without crowding all of the elements. There aren't any setting to change the placement of the logo but it can be centered using custom CSS.

This workaround is really only recommended for websites using uploaded images as their logo. Since this does shrink the space on the header-right elements... so it would behave differently on every site that has the right elements.

This works best on sites that are not displaying a header menu.

Centering the Logo

Use the CSS code below:

#website_logo {
  margin-left:41.66666667%;
  width:16.66666667%;
  margin-top: 15px;
}

.header-right-container {
  width:41.66666667%
}

@media only screen and (max-width: 991px) {
  .header-right-container {
    width:100%
  }
  #website_logo {
    margin: 0 auto;
    width: auto;
  }
}

Copy the code and paste it inside the DESIGN SETTINGS > CUSTOM CSS / HEAD > Additional CSS:

Once the code is saved, it centers the Logo:

We recommend hiding the header menu and search module when using this code:

When using the header menu and search module, notice that the "Search" button has been moved, depending on how many items and the size, the Header Menu may not display as expected.

For any design adjustments more than this, we suggest reaching out to a web designer:

https://marketplace.brilliantdirectories.com/