On Apple, Logo appears correct then jumps to sticky logo size

Hi - not on my iPad, but on an Apple laptop or desktop computer, www.bluegrassgrass.com, the logo at top appears perfect for a split moment and then resizes to the sticky logo size. This does NOT happen on android mobile device, PC desktop using multiple browsers, or on iPad mini.

How can I make this automatic resize stop from happening? Thank you!


Attached are screen shots of the Logo Options page.


Custom CSS looks like this:


#Top_bar #logo, .header-fixed #Top_bar #logo, .header-plain #Top_bar #logo, .header-transparent #Top_bar #logo {

 height: 190px;

}

.background-white {

   background-color:#FFFFFF;

}

#Subheader .title {

 font-weight: 400;

}

#Subheader .title {

 font-weight: 400;

}

h1, .text-logo #logo {

 font-weight: 400;

}

.extras {

   display:none;

}

#Top_bar .menu > li > a, #Top_bar #menu ul li.submenu .menu-toggle {

 color: #000000;

}

.experience {

 z-index: 7;

 background-color: rgb(17, 17, 17);

 font-family: "Roboto";

 height: auto;

 width: auto;

 color: rgb(255, 255, 255);

 text-decoration: none;

 white-space: nowrap;

 min-height: 0px;

 min-width: 0px;

 max-height: none;

 max-width: none;

 text-align: left;

 line-height: 23px;

 letter-spacing: 1.9418px;

 font-weight: 700;

 font-size: 12px;

 padding: 5px 15px;

 border-bottom-left-radius: 15px;

 border-top-right-radius: 15px;

 border-top-left-radius: 15px;

 transform-origin: 50% 50% 0px;

 opacity: 1;

 transform: translate(0px);

 visibility: visible;

}

#Subheader {

 padding: 20px 0;

   padding-top: 20px;

   padding-right: 0px;

   padding-bottom: 20px;

   padding-left: 0px;

    background-color: #ececec;

}

#Subheader .title {

 font-size: 40px;

 line-height: 45px;

 color: #000 !important;

}

#Footer {

 background-color: #bcbcbc;

}

 @media only screen and (min-width: 768px)

      {#Top_bar.is-sticky #logo img.logo-sticky {

 max-height: 55px;

         }}

Comments

Sign In or Register to comment.