-
AuthorPosts
-
February 19, 2014 at 7:38 am #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?
February 19, 2014 at 10:10 am #226067Hi 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.
Cheers!
PeterMarch 28, 2014 at 11:31 am #244291Hi,
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.March 28, 2014 at 5:30 pm #244486March 29, 2014 at 5:02 pm #244778This reply has been marked as private.March 30, 2014 at 12:13 pm #245070Hey!
I can’t access your website (maintenance mode).
Best regards,
PeterMarch 31, 2014 at 11:54 am #245376Oh, sorry! I will disable the maintenance mode now!
April 1, 2014 at 9:40 am #245888Have you seen my webside?
April 1, 2014 at 12:28 pm #245946Hey!
Please go to Enfold theme options > Header > Header Behavior and check “Sticky Header”
Regards,
YigitApril 1, 2014 at 4:20 pm #246116Hi, I tried it, but I can’t see the title and the subtitle is cuted.
April 1, 2014 at 4:28 pm #246123Hi!
Please activate “Shrinking Header” as well in the Header options and add following code to Quick CSS as well
strong.logo { width: 103px; }
Cheers!
YigitApril 1, 2014 at 11:09 pm #246294Hi,
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, sunshinehApril 2, 2014 at 9:51 am #246438Hey!
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,
Ismael -
AuthorPosts
- The topic ‘disappear title’ is closed to new replies.