Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #419525

    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.

    #419756

    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

    #419813

    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.

    #420203

    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

    #420365

    Perfect, worked nicely.

    #420955

    Hey!

    Great, glad we could help :)

    Best regards,
    Rikard

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