Fixing the header so it does not change height

Support Forums for LiveMesh Themes & Plugins Forums Fusion Theme Support Fixing the header so it does not change height

This topic is: not resolved

Tagged: 

This topic contains 6 replies, has 2 voices, and was last updated by Veena Veena 1 year, 5 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #30498
    Hashimakhtar
    hashimakhtar
    Participant
    Post count: 24

    Hi

    Looking to change the header so it can be fixed on web and mobile. Please advise how. Currently when i scroll down the header changes the height.

    Im looking to add a full size button to download app in menu and have the header fixed how is this possible?

    http://www.operty.com

    Attachments:
    #30508
    Hashimakhtar
    hashimakhtar
    Participant
    Post count: 24

    Update

    Just to give some clarification when we scroll to the top the header increases in height and we would like this to be fixed at a pixel height of 64 and fix the buttons so they dont move either when scrolling up and down the page and always remain visible and fixed.

    like https://allo.google.com/

    Thankyou for your support.

    #30526
    Veena
    Veena
    Moderator
    Post count: 8167

    Pls have the below custom CSS in themeoptions – custom CSS tab-

    #header.sticky #sidebar-header .button, #header.sticky #site-logo {
        top: 30px;
    }
    #header.sticky .wrap {
        min-height: 100px;
    }
    
    #30543
    Hashimakhtar
    hashimakhtar
    Participant
    Post count: 24

    The behavior when at top of the page the bar expands. When scrolling down the behavior is better. See both images. They both need to be fixed.

    Attachments:
    #30556
    Veena
    Veena
    Moderator
    Post count: 8167

    Have you tried the custom CSS mentioned in this post –
    https://support.livemeshthemes.com/forums/topic/fixing-the-header-so-it-does-not-change-height/#post-30526

    #header.sticky #sidebar-header .button, #header.sticky #site-logo {
        top: 30px;
    }
    #header.sticky .wrap {
        min-height: 100px;
    }
    
    #30582
    Hashimakhtar
    hashimakhtar
    Participant
    Post count: 24

    Your solution only works at 100px. Yes i have tried this and need the header to be fixed at 64px and mobile at 54px for smaller screens.

    #30587
    Veena
    Veena
    Moderator
    Post count: 8167

    Pls try the below custom CSS –

    #header.sticky .wrap {
        min-height: 64px;
    }
    #header > .inner > .wrap {
        position: relative;
        min-height: 64px;
    }
    #header.sticky #sidebar-header .button, #header.sticky #site-logo {
        top: 0;
    }
    #site-logo {
        top: 0;
    }
    #sidebar-header .button {
        top: 0;
    }
    @media only screen and (max-width: 1024px){
    #site-logo {
         float: left;
    }
    #site-logo a img {
        max-width: 80%;
    }
    #header.sticky .wrap {
        min-height: 54px;
    }
    #header > .inner > .wrap {
        position: relative;
        min-height: 54px;
    }}
    
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.