Vamtam Auto-Repair Theme Sticky Header In Mobile Problem
Auto Repair theme is one of the most popular theme from VamTam themes. It does offer sticky header for desktop but it is not offered for mobile.
Majority of web developers and business owners wish to keep the sticky header in mobile, but it is a problem. This option is turned off by the theme developers for mobile devices.
It is turned off because the animation is not well supported by the majority of the mobile devices (as per VamTam Theme’s Forum).
But nowadays, we know mobiles support all types of animations and execute JS without any special efforts. There was no proper solution available for this problem over the internet. We have spent plenty of time in looking for a solution and found one.
Enable sticky header on mobile for Auto Repair VamTam Theme:-
You will see plenty of classes used in your theme’s header but choosing the right one is important.
Below in this post, we have used the exact classes and code that you need to update to enable sticky header in mobile.
- Class “.fixed-header-box” is used by the theme for your mobile header. Make sure to check it once with “Inspect Element” in your browser.
- If it’s the same class, then write the following CSS, if it’s different then write the name of your class replacing “.fixed-header-box”.
NOTE:- Here we are using “!important; ” to override the default properties of the class.
.fixed-header-box{ position:fixed !important; }
After adding above CSS, check header on your phone you may have visibility issue with hamburger menu getting hidden or going behind the website elements.
To resolve this issue,
There is a simple solution available by using the following CSS updates :-
- VamTam AutoRepair theme uses the following CSS code to control the visibility of the mobile menu “#mp-pusher nav#mp-menu a#mp-menu-trigger“.
- Override the CSS property, visibility: visible !important; as below. By default, it is “inherit” which causes problem with the sticky header.
#mp-pusher nav#mp-menu a#mp-menu-trigger{ top: 25px !important; visibility: visible !important; }
NOTE:- Margin top could be different for your website. It should be updated as per your website header.
BINGO! Your header should be sticky now.
Found this post helpful, please like and share. If you have any questions, we’ll be happy to solve it.
One Response
oh..thanks a lot…your code solved my problem on that I was stuck on for last 3 days.