- This topic has 6 replies, 2 voices, and was last updated 5 years, 10 months ago by
.
-
Posts
-
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?
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.
Thankyou for your support.
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; }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.
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; }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.
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; }}
- The forum ‘Fusion Theme Support’ is closed to new topics and replies.