Tagged: , , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 7, 2015 at 12:32 am #531687
    November 9, 2015 at 4:46 am #532307
    Ismael

    Hi bogosavljev!

    Thank you for using Enfold.

    The logo markup is quite different from the default markup. Did you modify the logo? How?

    Regards,
    Ismael

    November 9, 2015 at 12:52 pm #532521
    bogosavljev

    Hello Ismael,

    you can see working animated logo here (shrinking): http://dev.bogosavljev.com/ but there I’m running Enfold 3.2.3 version

    I have customize logo markup with CSS:

    /******* Animated LOGO ********/

*, *:after, *:before {
    box-sizing: border-box;
}

.logo a {
    font-family: 'Francois One', sans-serif;
    display: block;
    position: relative;
    text-transform: uppercase;
    width: 565px;
}

.logo a:before, .logo a:after {
    background: none repeat scroll 0 0 #fff;
    content: "";
    height: 1px;
    left: 0;
    opacity: 0.2;
    position: absolute;
    top: 0;
    transition: opacity 0.3s ease 0s, height 0.3s ease 0s;
    width: 100%;
}

.logo a span:first-child {
    display: block;
    font-weight: 400;
    z-index: 2;
}

.logo a span.front:last-child {
    opacity: 0;
    margin-top:-44px;
    padding: 8px 0 0;
    display: block;   
}

.logo a:before {
    background: none repeat scroll 0 0 transparent;
    color: #71CCE2;
    content: "ogosavljev";
    display: inline-block;
    font-size: 3.9rem;
    height: 23px;
    opacity: 0;
    top: -11px;
    transform: translateY(-20px);
    vertical-align: top;
    left: 170px;
}

.logo a span.front:after {
    background: none repeat scroll 0 0 transparent;
    content: "front-end designer & developer";
    font-size: 1.4em;
    font-family: 'Arbutus Slab', serif;
    font-weight: 400;
    transform: translate(71%,0px);
    transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
    z-index: 1;
    text-shadow: none;
    text-transform: none;
    text-decoration: none;
    color: #6FCCE1;
    display: inline-block; 
}

.logo a:hover::before,
.logo a:hover::after,
.logo a:focus::before,
.logo a:focus::after {
    opacity: 1;
    -webkit-transform: translate(0px);
    -moz-transform: translate(0px);
    transform: translate(0px);
}

.logo a:hover span:last-child,
.logo a:focus span:last-child {
    opacity: 1;
    -webkit-transform: translateY(-42%);
    -moz-transform: translateY(-42%);
    transform: translateY(-42%);
}

.logo a span, .logo a:before {
    transition: all 0.2s ease 0s;
}

.logo a:hover:before, .logo a:focus:before {
    opacity: 1;
    transform: translateY(42%,0px);
    transition-delay: 0s;
}

/**************************************************************************************/

    And for shrinking logo to desire dimension I have change avia.js around line 1568 and 1580

    if(st < el_height/4) // was 2
                {
                    newH = el_height - st;
                    header.removeClass('header-scrolled');
                }
                else
                {
                    newH = el_height/1.35; // was 2
                    header.addClass('header-scrolled');
                }
    November 10, 2015 at 3:52 am #533008
    Ismael

    Hey!

    Thank you for the info. The logo markup in your installation looks like this:

    <div id="logo" class="logo">
        <a href="/">
        <span><img src="http://bogosavljev.com/wp-content/themes/quince-child/images/letter_B_blue_hover_me.svg"></span>
        <span class="front"></span>
        </a>
    </div>

    .. while the default markup should be like this:

    <strong class="logo bg-logo">
     <a href="/">
         <img height="100" width="300" src="http://localhost/kriesi/enfold/wp-content/themes/enfold/images/layout/logo.png" alt="Enfold" title="Enfold">     
     </a>
</strong>

    I’m not sure how you end up with that but try to use the .header-scrolled .logo img selector to resize the logo on scroll. Example:

    .header-scrolled .logo img {
height: 80px;
/* more style here */
}

    You might also need to apply this in your logo’s hover state modification.

    Cheers!
    Ismael

    November 12, 2015 at 5:05 pm #534901
    bogosavljev

    How then is working here: http://dev.bogosavljev.com/ ?

    it’s same markup used for the logo…

    Thanks,
    Djuka

    November 16, 2015 at 6:17 pm #536754
    Andy

    Hi!

    please remove any custom css, to check which code is causing this problem.

    Regards,
    Andy

    November 16, 2015 at 6:34 pm #536777
    bogosavljev

    What you mean by that? To remove everything from Quick CSS?

    You can do it, I have backup.

    November 18, 2015 at 5:38 am #537804
    Ismael

    Hi!

    Aside from the css modifications, did you modify the avia.js file? Did you do all that modifications or someone from the team helped you with it? The max-height property is not being applied. Please add this in the Quick CSS field:

    .header-scrolled .logo img {
    max-height: 80px;
    height: 80px;
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.