Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 9, 2014 at 3:28 pm #333271
    erussell

    I’m creating an infinite scroll site so it’s important the navigation always be present. The shrinking menu works great on desktop and even mobile, but since I need a larger logo on the homepage the header takes up a lot of room on a tablet (since it does not shrink). I’m wondering if there is a way I can define how much the logo shrinks or if there is a way I can get it to shrink on a tablet?

    I tried what was recommended here: https://kriesi.at/support/topic/enfold-demo-not-shrinking-menu-on-tablets/ but it did not seem to work.

    Any help would be greatly appreciated….thanks guys!

    October 10, 2014 at 12:46 am #333532
    Yigit

    Hi erussell!

    Can you post the link to your website please?

    Cheers!
    Yigit

    October 10, 2014 at 1:35 am #333564
    erussell

    sure…it’s currently being staged here: http://www.laurenkruseproducer.com

    October 11, 2014 at 7:17 am #334162
    Ismael

    Hey!

    Try this on Quick CSS or custom.css to increase the size of the shrink header:

    .header-scrolled .container, .header-scrolled .main_menu ul:first-child > li a, .header-scrolled .logo, .header-scrolled .logo a, .header-scrolled .logo a img {
height: 90px !important;
line-height: 90px !important;
max-height: 90px !important;
}

    If possible, please reduce the size of the black logo.

    Best regards,
    Ismael

    October 11, 2014 at 4:01 pm #334327
    erussell

    Hi Ishmal,

    Thanks for your help on this…

    So this did reduce the size of the shrinking header on tablets, but it looks like it also reduced it on both desktop and mobile too. I’m assuming there is only so much I can do here…it just seemed like the non-shrinking header on the tablet affected me the most since the header took up so much of the real estate.

    Maybe to give you a better example of what I’d really love to be able to do is here:

    Homepage BEFORE scrolling: http://www.ericrussellphotography.com/images/navigation-example-homepage.jpg
    (much larger centered logo with a simple line divider in between the logo and navigation)

    And the shrinking header AFTER scrolling: http://www.ericrussellphotography.com/images/navigation-example-shrinked-header.jpg
    (much smaller logo and the same underline as the rollover underline of the transparency header now as a marker).

    Again, I know some of this may not be possible, but if there was any chance that any of it is, let me know….THANKS!

    October 13, 2014 at 10:30 am #334766
    Ismael

    Hi!

    I didn’t add a css media query. If you only want this to work for tablets, please use this:

    @media only screen and (min-width: 768px) and (max-width: 989px) {
.header-scrolled .container, .header-scrolled .main_menu ul:first-child > li a, .header-scrolled .logo, .header-scrolled .logo a, .header-scrolled .logo a img {
height: 90px !important;
line-height: 90px !important;
max-height: 90px !important;
}
}

    Best regards,
    Ismael

    October 15, 2014 at 5:19 pm #336259
    erussell

    Hi Ishmael.

    Perhaps I’m missing something, but this does not seem to change anything on any of the platforms. Just in case I have not been clear, I just need the header to shrink down substantially on the tablet since the non-shrinking header eats into my content so much. Also, I’m not sure if you saw my earlier posts with the screen shots of what I’d love to do with the header. Could you let me know if any of that is possible?

    Thanks for the great support!

    October 15, 2014 at 7:09 pm #336320
    Yigit

    Hi!

    Please add following code to Quick CSS 

    @media only screen and (max-width: 768px) {
#top #wrap_all .av_header_transparency { background-color: transparent; }
div#main { margin-top: -80px!important; }}

    Regards,
    Yigit

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