Home Forums ePix Support Floating Header issue

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

    Kim Paffen
    Participant

    Hi,

    I have a problem with ‘floating header‘, option ‘normal’. For example: http://www.kimpaffen.com/galleries
    1. If I choose ‘normal’ on the mobile version I first have a blank page and I need to scroll down to see the gallery.
    2. On the desktop version some white space disappears and the text is right under the menu without a little space between the menu and the text. Also the Logo is aligned left.
    3. by choosing ‘normal’ the header still floats

    When I change ‘floating header’ from ‘normal’ into ‘float’:
    1. the white page on the mobile version disappears (this is a good thing but it should also disappear in the ‘normal’ option)
    2. On the desktop version some white space appears between the menu and the text. This looks better than the ‘normal’ option, but the logo is suddenly aligned center in stead of left.

    This wasn’t before. Some things changed when I switched from Left menu to a top menu.

    #102364
    Edcel
    Edcel
    Moderator

    Hi @kimpaffen

    Just add a top padding to the content container so it has a space/separation from the header.

    .main-wrap.skinset-main.nv-skin.clearfix {
        padding-top: 45px;
    }

    For the logo and menu aligning center when the page’s floating header is set to float, use this CSS to fix that:

    #primary-wrapper.header_float.horizontal-layout .sticky-wrapper #header {
        max-width: none;
    }

    For the issue you mentioned about a blank page on mobile, I tested this from my end and I am not seeing the issue.

    Regards,

    #102368

    Kim Paffen
    Participant

    Hi!

    Thank you for the CSS.

    There are still 2 issues:

    1. When I set the header to float, it does float on the desktop and laptop but it does not float on my mobile >> the icon version of the menu does not float over the page as I scroll down.
    It only floats on my mobile when I set the header to ‘normal’, but I don’t want that. I want the menu to be floating on desktop and mobile.

    2. About that ‘blank space’ on my mobile version. It appears when I set the header to ‘normal’. You will first see some blank space and I have to scroll down on my mobile to see my text or images. If I set the header back to ‘float’ that blank space is gone and I don’t have to scroll to see my text/images.

    I can send you screenshots of my mobile.

    #102394
    Edcel
    Edcel
    Moderator

    Hi @kimpaffen

    The floating header/sticky menu is automatically disabled on mobile because there is just not enough space for the content as it will be overlayed by the header.

    If you want to override this, copy this CSS into ‘Mobile CSS’

    #primary-wrapper .site-inwrap.header_float .sticky-wrapper{
    position: fixed;
    z-index: 99999;
    }

    Regards,

    #102395

    Kim Paffen
    Participant

    It’s not a bout the whole header including the logo just the ‘menu-icon’ on the right side. It’s there – on the mobile version – when I set the header to ‘normal’ but when I change it to ‘float’ the floating menu icon disappears on the mobile version. So I still got those 2 issues.

    #102421
    Edcel
    Edcel
    Moderator

    Hi @kimpaffen

    When set to ‘Normal’, that is not the menu-icon that appears, but the menu trigger. These are the difference of both Header options.

    If you want to use the look of ‘Normal’ on mobile, but keep the floating menu on desktop, it is best to set the header to ‘Normal’, then apply CSS for a floating header on desktop.

    Regards,

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

© 2018 Acoda