Topbar and Burger Menu sticky on mobil

Hi,

Please try the below CSS

/* Sticky header on mobile */
@media only screen and (max-width: 767px) {
  .responsive #top #main {
  	/* Margin top value should be equal to header height*/
    margin-top: 180px;
  }
  .responsive #top #wrap_all #header {
    position: fixed;
  }
}

You can also use a fullwidth submenu element and use the stick to top option in the element.

If you still have an issue provide a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help :)

Best regards,
Vinay

Hi,

Sorry, I thought it was the logo area you were referring to but it appears you are using a slider to design the site header.
It works nicely as it is right now. To make it sticky will be tricky because a fixed position element will let other elements around it take its place unless it is in a separate container it is not possible to perfectly align a fixed element in a relationship with its neighbour. (This will block the image below so you may have to manually add a white space element manually for each page).

Add the below CSS to Enfold > General Styling > Quick CSS

@media only screen and (max-width: 767px) {

.av-logo-container {
	position: fixed;
	top:0!important;
	background: #f66f00;
	right:0;
	left:0;
	z-index:999999!important;
}

.avia-fullwidth-slider.avia-builder-el-0 {
    border-top: none;
    position: fixed;
    top: 50px;
    z-index: 99;
}

}

If you don’t like the result please try adding the banner as a header background image from enfold options
Enfold > General Styling > Logo area > Background Image

Then Select a suitable header layout from
Enfold > Header > Header Layout > Menu and Logo Position

Set a custom height for the header from
Enfold > Header > Header Layout > Header Size

Best regards,
Vinay

• This reply was modified 6 years, 8 months ago by Vinay.