Viewing 8 posts - 31 through 38 (of 38 total)
1 2
  • Author
    Posts
  • July 28, 2014 at 1:32 pm #296734
    Morticka

    WOW, the logo looks so crisp and beautiful on my Android smartphone right now!!!!! :D :D :D :D

    You are amazing Yigit, thank you so much!!

    It looks perfect on my desktop, no scaling necessary, but in shrink view the logo is a little bit to big. Can I change that with code too? (I tried messing with the padding, but then I got a really tiny logo :D)

    Sincerely,
    Morticka

    July 28, 2014 at 1:36 pm #296735
    Yigit

    Hi!

    You are welcome Morticka, glad it is looking fine now! :D
    I see that you have applied the code i posted in my previous post. You can remove it and use following one instead

    .header-scrolled .logo img {
padding: 8px 0;
}

    Logo will not be resized on initial load and will be decreased a bit more when you scroll down :)

    Best regards,
    Yigit

    July 28, 2014 at 2:14 pm #296759
    Morticka
    This reply has been marked as private.
    July 28, 2014 at 9:03 pm #296985
    Yigit

    Hi!

    Please change

    .logo img {
padding: 20px 0;
}

    to

    .logo img {
max-width: 60%; 
}

    and that should do it :)

    Regards,
    Yigit

    July 29, 2014 at 12:46 am #297085
    Morticka

    Hey!

    YES!! Animation problem solved!! :D

    I’m almost afraid to say it…but ehm… logo in shrink mode is really tiny. Even with a value of 0 in stead of 4. See for yourself. I tried changing the value to a 100% max width, but then I get that weird elastic band effect again.

    How do I keep the animation but make the shrink logo bigger? Any ideas?

    Sincerely,
    Morticka

    July 29, 2014 at 12:53 am #297086
    Josue

    Hey!

    Open js/avia.js and look for this part:

    Try changing “2” for “1.5”.

    Regards,
    Josue

    July 29, 2014 at 9:46 am #297203
    Morticka

    Hi Josue :),

    Edited the file, shrunken header and logo is larger now, but I’m still getting that weird elastic band effect, where the logo “jumps” to the smaller size. It even stutters a bit now.

    <EDIT> I created the js folder in my child theme and put the edited avia.js file there, but that did’nt do anything. Only the edited avia.js file in the Enfold parent theme responded to the edit.

    Could it have anything to do with the existing CSS code?

    /*Logo Styling PC keeps logo in the middle of the header*/

    .logo img { margin-top: -10px; }
    .logo a img {
    vertical-align: middle;
    display: inline-block;
    }

    /*Logo Styling Responsive*/

    @media only screen and (max-width: 480px) {
    .responsive .logo a{
    height: 100px !important;
    }
    .responsive .logo img{
    height: 50px !important;
    }
    }

    @media only screen and (min-width: 767px) {
    .noDesktop{ display: none !important; }
    }
    @media only screen and (max-width: 767px) {
    div#header_meta {
    display: none;
    }
    .logo img {
    top: -5px;
    }
    }

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

    /*Breedte van de website in responsive view*/

    @media only screen and (max-width: 767px) {
    .responsive .container {
    width: 90%;
    }}

    Sincerely,
    Morticka

    • This reply was modified 10 years, 3 months ago by Morticka. Reason: After editting the avia.js file in the parent theme, I put it back as it was and put the edited avia.js file in my child theme, but that did not do anything
    July 29, 2014 at 1:24 pm #297275
    Morticka

    Guys, I’m going for the weird elastic band solution with the stutter. With the 60% the logo looks HUGE on mobile, while with the previous code Yigit gave, the logo looks the right size and crisp on mobile.

    Josue: Ik put avia.js back in its original state in the Enfold parent theme.

    So this is the final code:

    .logo img {
    padding: 20px 0;
    }
    .header-scrolled .logo img {
    padding: 4px 0;
    }

    I’m giving up. Thanks for all your help and patience guys :D Everything else I asked of you on this forum still works like a charm and you are the best support team EVER!!

    On to the next code request ;)

    Sincerely,
    Morticka

  • Author
    Posts
Viewing 8 posts - 31 through 38 (of 38 total)
1 2
  • The topic ‘Logo in mobile (responsive) view stretched and menu on top of it’ is closed to new replies.