Theme Update Logo Resizing

Shapely
1

A little late to the game, but we just implemented Shapley 1.2 on our staging website: http://k67.9fc.myftpupload.com

In comparison to our live production website on Shapely 1.1.7, the only major change we noticed was the behavior of the logo in the header menu. Live site: https://ecosystemsentinels.org

We tried re-coding the size for the logo in the custom CSS, but the flexing on the menu has also changed from the old version. Our website is fully responsive and adapts to any changing widths, so having the header appear as it currently does on the live site after the theme update is vital. Here are the traits we want to maintain from the old version:
-Logo stays constant in size no matter how the browser is resized or how menu items flex
-When expanding the menu to two lines, the logo remains on the top line at its normal size and the menu items consolidate on the second
-On mobile and tablet-sized devices where the mobile-style menu is shown, the logo does not expand to fill the extra space of the missing menu items

We’ve tried a few of the recommended fixes here from the theme update https://colorlibsupport.com/t/logo-size-widens-distorts-in-mobile-site/ but couldn’t find many topics geared toward logo changes on here. We had some old code in the ‘logo’ class but the new ‘custom-logo logo’ class has proven harder for us to control.

TL;DR- We are looking for the best way to make the menu here look like the menu here after the theme update.

2

Hi there

Hope you are having a good day and thank you for your question :slight_smile:

Let’s start with logo - no need css for logo, just use proper image width which is 320px, (There is no reason of using but image for logo when you resizing it)
button - use this code:


/*Fix button*/
.nav-bar a:not( .custom-logo-link ) {
    display: inline;
}

to fix header padding use this code:


/*Fix header pading*/
.main-navigation {
padding: 0px 0;
}

this codes should be added in appearance > customize > additional css
you will have exact same header after this changes :slight_smile:
let me know results

Thanks!
Colorlib Support Team

3

Thanks for the help! I implemented the changes recommended, but a few elements of the menu still appear to be different between the two sites.

-When the menu goes to two lines, on the pre-update version the entire menu slipped to the second line and the logo stayed on the first line. Now, the elements of the menu that don’t fit go to the second line and the logo centers itself with the entire header rather than staying on the top line
-The dropdown menus display oddly, especially when hovered over. On both normal and hover, the line spacing has changed and gotten closer together. On the sub-menus (see “UW student science videos” when hovering over Our Work > Videos on the test site’s header menu). Additionally, with the hover, the highlight effect only covers the text and not the full line now, whereas we’d love for it to span the entire length of the hovered-over line of the menu as on the old version.

Thanks again for the support, the menu is the only leftover bug for us in pushing the theme update live :slight_smile:

4

Howdy

Ok, now, please add this css as well:

.module-group {
display: inline-table;
}
.main-navigation .menu > li > ul li a {
display: block;
}

let me know results :slight_smile:

5

That worked great–the theme update is live on our production site now.

Thanks for all your help!

6

You are welcome

Nice, to hear your problem is fixed:) Now I will now close the topic and mark it as resolved.
Feel free to contact us again Thanks!