Why does my logo not fit properly when using the Glacier Bay Theme?

Glacier Bay is one of the newest out of the box themes available to iMIS, and while it looks great, you may find you need to do a bit of work on the theme to get it to work with your logo.

screenshot-01.png

As you can see, even at only 150px wide, this portrait-oriented logo is displaying poorly. If possible, it’s best to use a square or landscape version of your logo with Glacier Bay.

The recommended size as found in the documentation is 120px x 46px, but you may find this is too small for your logo to render properly.

screenshot-02.png

But we can see at a larger size, the logo is outside the white menu bar again.

screenshot-03.png

In this case, you will need to edit the theme to accommodate your logo's ideal size. To begin, take a local copy of the Glacier Bay theme by following the instructions here:
Enterprise:
https://help.imis.com/iMIS20Cloud/Features/RiSE/Theme_Builder/Creating_custom_themes.htm

Professional:
https://help.imis.com/100_200/Features/RiSE/Theme_Builder/Creating_custom_themes.htm

In your CSS file, search for .header-top-container #masterLogoArea
Using CTRL + F will help you find this easily.

screenshot-04.PNG

Edit the number assigned to the top property to move the logo up, making it fit in the bar again. In this example, we change the number to 50.25px to make the logo fit.

You can also adjust the left property to move the logo left and right. Our logo is 225px x 100px.

screenshot-05.png

Glacier Bay has another quirk. On internal pages (everything except the homepage) the white menu bar is made quite a bit smaller. Even with the previous changes applied, you can still have issues as below.

screenshot-06.png

The best thing to do here, where we need the logo to stay the same size, is to change the code so the bar remains tall enough to fit the logo on every page.

In your CSS file, search for body:not(.Wrapper-HomePage) .header-bottom-container

screenshot-07.PNG

Change the min-height to 105px instead of 45px. This is what it is set to on the homepage, and will make the menu consistent across the website.

You will also need to search for body:not(.Wrapper-HomePage) .header-top-container #masterLogoArea (directly beneath where you made the last edit)

screenshot-08.PNG

Here you can see it is overriding your change to the top property previously. Change the number here to be the same as what you set on the homepage.

Lastly, we need to re-align the actual menu. Search for body:not(.Wrapper-HomePage) .primary-navigation-area (directly beneath where you made the last edit)

screenshot-09.PNG

Here, set the margin-top to 26.25px

Save your CSS file, and upload the theme back into iMIS. Now, the logo should fit nicely!

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk