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

Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #30498
    Hashimakhtarhashimakhtar
    Participant

    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
    Hashimakhtarhashimakhtar
    Participant

    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
    VeenaVeena
    Moderator

    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
    Hashimakhtarhashimakhtar
    Participant

    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
    VeenaVeena
    Moderator

    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
    Hashimakhtarhashimakhtar
    Participant

    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
    VeenaVeena
    Moderator

    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.