Hi there!
I have applied a widget to a header based on this and am wanting to use a different header as this doesn’t work very well at all for mobile devices.
https://kriesi.at/support/topic/buttons-in-header-above-menu/
Is that possible?
Or will I need to change all of the CSS to only apply to desktop – https://kriesi.at/documentation/enfold/add-button-elements-to-your-header/#toggle-id-2
Many thanks!!
Hey Suze,
Thank you for the inquiry.
You cannot assign a different header on mobile view but you can use this css code to hide the header widgets and adjust the position of the logo and the mobile menu.
@media only screen and (max-width: 767px) {
/* Add your Mobile Styles here */
.responsive #top #header #header_main .inner-container .widget {
display: none;
}
.header_color .av-hamburger-inner, .header_color .av-hamburger-inner::before, .header_color .av-hamburger-inner::after {
background-color: #85a8b4;
}
.responsive #top #wrap_all .main_menu {
top: 38px;
height: 80px;
left: auto;
right: 0;
display: block;
position: absolute;
}
.responsive #top #header #header_main .inner-container .logo {
display: block;
}
}
Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.
This a screenshot of the header after adding the above css.
// https://1drv.ms/u/s!AjjTfXSRbKTvwG-grht5ZEfviqtJ?e=BGO0fq
Best regards,
Ismael
Thank you Ismael. The buttons have gone but it looks like the widget area is still visible and the logo has not resized as shown in your screenshot.
I added this code to the stylesheet style.css – is that correct?
https://prnt.sc/ulMqSZL0Arps
You must be logged in to reply to this topic.