Fixing the header so it does not change height

[hashimakhtar]

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:

You must be logged in to access attached files.

[hashimakhtar]

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.

[Veena]

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;
}

[hashimakhtar]

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:

You must be logged in to access attached files.

[Veena]

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;
}

[hashimakhtar]

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.

[Veena]

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;
}}

[Author]

Posts