Avada › Forums › Community Forum › Sticky Header Height
Tagged: header, sticky header, height, sticky
-
AuthorPosts
-
Hey Ho lovely community,
I have a rather trivial question. Is there any way to adjust the height of the sticky header via Custom CSS for the Avada theme?
Many thanks in advance 🙂
Chris
Changes the height to 80px:
.fusion-header {
height:80px;
}Did not worked in 5.7.2 Avada Child Theme. Caching issue of child theme CSS. Workaround was to explicitly load child theme style.css to browser then it was acknowledged.
This does not appear to be a valid solution to me
The sticky header inherits the main menu height which looks odd. Is there a hidden option to control the sticky header height or does it need to use css, in which case what is the CSS for 5.7.2?
Mashasa- did you reset the fusion cache in the theme settings? Also if you code in the customizer you can see all changes live and it makes writing CSS a lot easier.
Rubincain- Trhere isn’t but seems like it’s something a lot of people would want. It would also be nice to have an option on mobile sticky to only bring the menu sandwich down instead of the whole logo. Click submit an idea on the right side an I will too!
You will need to use CSS to adjust the padding to center, is that the issue you are running into?
The sticky header ends up looking like this if you have a 160px ish square logo as the standard header logo
@freshinktechcoop – This was hosting-side cache issue in the end. But to go that far, you might want to disable Fusion Options caching first. Since your hosting might not provide caching out of the box, as SiteGround did in my case. And with theme caching on, that’ll be the same bump.
@rubincain – I have this sorted with:
.fusion-header { top:16px; height:92px; } .fusion-header-sticky-height { height:92px; }
in child theme style.css and switched off caching everywhere (beforee production, turn it on on prod site)
-
AuthorPosts
- You must be logged in to reply to this topic.