Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
  • #225976

    I would like to know how to get the disappearing effect that the Kriesi site has where the logo shrinks and the name disappears, leaving just the logo when you scroll down?


    Hi aquatucker!

    Insert this code into your functions.php file:

    add_filter('avf_logo_subtext', 'kriesi_logo_addition');
    function kriesi_logo_addition($sub)
    	$sub .= "<strong class='logo-title'>My Text</strong>";
    	$sub .= "<strong class='logo-title logo-subtitle'>Another custom text line</strong>";
    	return $sub;

    and replace the “My Text” text and “Another custom text line” with your custom text. Then insert this code:

    #top .logo-subtitle {
    color: #aaa;
    top: 7px;
    #top .logo-title {
    transition: opacity 0.4s ease-out;
    -moz-transition: opacity 0.4s ease-out;
    -webkit-transition: opacity 0.4s ease-out;
    -o-transition: opacity 0.4s ease-out;
    font-size: 12px;
    color: #000;
    position: absolute;
    left: 7px;
    top: -7px;
    opacity: 1;
    white-space: nowrap;
    #top .subtext {
    float: left;
    position: relative;
    #top .header-scrolled .logo-title {
    opacity: 0;
    filter: alpha(opacity=0);

    into the quick css field.



    I tried your code snippets, but it is not working at my side.
    The title isn’t here and the suptitle is in the side and not the header.



    @sunshineh Can we see your website?

    Best regards,

    This reply has been marked as private.


    I can’t access your website (maintenance mode).

    Best regards,


    Oh, sorry! I will disable the maintenance mode now!


    Have you seen my webside?



    Please go to Enfold theme options > Header > Header Behavior and check “Sticky Header”



    Hi, I tried it, but I can’t see the title and the subtitle is cuted.



    Please activate “Shrinking Header” as well in the Header options and add following code to Quick CSS as well

    strong.logo {
    width: 103px;



    it is working a little, but I want to change the following points:
    1.There shouldn’t be an underline on my logo text if I am going with my mouse over it
    2.The logo shouldn’t get bigger, if I push my browser together.
    3.It would be great if the colour and behavier of my logo text is the same as menu points.

    Lot’s of thanks!!!
    Buy, sunshineh



    1.) You can use this to remove the underline when hovered:

    strong.logo a {
    text-decoration: none;

    2.) Use this to prevent the logo from resizing:

    @media only screen and (max-width: 767px) {
    .responsive .logo a, .responsive .logo img {
    margin: 0 auto;
    max-width: 100%;
    height: 40px !important;
    max-height: 40px !important;

    Best regards,

Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘disappear title’ is closed to new replies.