Menu styling issues after update

I just updated Airi and found the menu is no longer styled properly. I’d done a bunch of custom css - via a child theme - to get it to work as I wanted, and now the container must have different settings. Thought I’d reach out in case it would be faster than wrestling with it again.

The menu was spaced to be all in one line, inline with the logo, until the tablet breakpoint. Now it stacks itself and has extra flex padding / different max width, it seems.

The hover fly-in is also misaligned, but that might be a separate issue.

The tablet setting also stacks the site branding now, when it didn’t before.

Also the shop styling of the header varies now from the other pages.

Here’s the site: https://jennakamp.com/

Hi,

I am sorry for the trouble. I am happy to help with it.

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 769px) {
      .main-navigation {
        max-width: 100%;
      }
    }

Seems likely you’ve applied some additional CSS code to the shop specific pages. Is that correct?

Regards,
Kharis
aThemes Support

Thank you Kharis. That didn’t work, but it gave me ideas of what to look for. Took a while, but it’s fixed now. In case it helps someone else, I did this:

main css:

     .site-branding {
    		-webkit-box-flex: 0;
    		-ms-flex: 0 0 25%;
    		flex: 0 0 25%;
    		max-width: 25%;
    }
    .main-navigation {
    		-webkit-box-flex: 0;
    		-ms-flex: 0 0 100%;
    		flex: 0 0 100%;
    		max-width: 100%;
    }
    .menuStyle2 .site-header .col-md-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    **for the "mobile" menu:**
    @media (max-width: 1199px) {
    .site-branding {
    		-webkit-box-flex: 0;
    		-ms-flex: 0 0 75%;
    		flex: 0 0 75%;
    		max-width: 75%;
    }
    .main-navigation {
    		-webkit-box-flex: 0;
    		-ms-flex: 0 0 100%;
    		flex: 0 0 100%;
    		max-width: 100%;
    }
    .menuStyle2 .site-header .col-md-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    }
1 Like