Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 27, 2015 at 6:21 pm #419525
    markvanhaze

    Is there a way to use a large header size for desktop viewing and switch to using a small header size when the same site is viewed on a mobile?

    I am referring to the header size setting in Enfold Seetings – Header Layout – Header Size.

    March 28, 2015 at 6:13 am #419756
    Rikard

    Hey markvanhaze!

    I’m not entirely sure I understand what you mean, could you please provide us with a link to the site in question and screenshots highlighting what you are trying to achieve?

    Cheers!
    Rikard

    March 28, 2015 at 9:48 am #419813
    markvanhaze

    Header Size

    This is the view on a mobile with a low res screen when I use a large header setting. This leaves very little space for the actual page content below.

    If I reduce the header setting to small, then on non mobile screens, our logo is proportionally too small.

    I can try to work around this by integrating the logo into the sliders below but I rather have a different solution.

    March 30, 2015 at 6:13 am #420203
    Ismael

    Hi!

    You can add something like this in the Quick CSS field to decrease the header height on smaller screens:

    @media only screen and (max-width: 989px) {
.html_header_top.html_header_sticky.html_large #header_main .container, .html_header_top.html_header_sticky.html_large.html_main_nav_header .main_menu ul:first-child > li a, logo a, .logo a img {
  height: 50px !important;
  line-height: 50px !important;
}}

    Adjust the height and line-height if necessary.

    Regards,
    Ismael

    March 30, 2015 at 12:31 pm #420365
    markvanhaze

    Perfect, worked nicely.

    March 31, 2015 at 5:37 am #420955
    Rikard

    Hey!

    Great, glad we could help :)

    Best regards,
    Rikard

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