Hide Menu in Header - Support | Kriesi.at

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
July 30, 2024 at 4:14 pm #1463344

ballindigital
Participant

Hi,

How can I hide the menu in the header completely? I don’t have anything in my menu but when I scroll down the menu background appears even though there is no menu..

View post on imgur.com

Also – how do I make the mobile version have a transparent background just like the desktop? I don’t want the burger menu to be shown either.

View post on imgur.com

Thanks!

Harvinder

July 31, 2024 at 6:40 am #1463395
Ismael
Moderator
Hey ballindigital,

Thank you for the inquiry.

We added the following css code in the Enfold > General Styling > Quick CSS field to keep the header transparent on scroll.
```
.av_minimal_header .header_bg {
    opacity: 0;
}
```
Best regards,
Ismael
July 31, 2024 at 10:35 am #1463419

ballindigital
Participant

Hi,

I’ve decided to uncheck the sticky header option and feel that that works better.

How do I make the mobile version have a transparent background just like the desktop? I don’t want the burger menu to be shown either.

View post on imgur.com

August 1, 2024 at 5:09 am #1463478
Ismael
Moderator
Hi,

Thank you for the update.

Please include this css code to make the header transparent on mobile view and remove the burger menu.
```
@media only screen and (max-width: 768px) {

  /* Add your Mobile Styles here */
  .responsive #top #wrap_all #header {
    position: fixed;
    background: transparent;
  }

  .responsive #top .av-burger-menu-main {
    display: none !important;
  }
}
```
Best regards,
Ismael
August 1, 2024 at 10:48 am #1463512

ballindigital
Participant

Thanks.. We’re almost there – I wanted it to behave exactly like the desktop version in that it doesn’t appear as you scroll down?

August 1, 2024 at 12:32 pm #1463521

ballindigital
Participant

I would also like to know how to hide the menu on the mobile version please..

August 2, 2024 at 5:48 am #1463575

Ismael
Moderator

Hi,

I wanted it to behave exactly like the desktop version in that it doesn’t appear as you scroll down?

Unfortunately, this is not possible without significant modification to the theme. The previous css code should hide the mobile menu.

Best regards,
Ismael

August 2, 2024 at 10:57 am #1463616

ballindigital
Participant

Which one?

August 2, 2024 at 11:19 am #1463619

ballindigital
Participant

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

/* Add your Mobile Styles here */
.responsive #top #wrap_all #header {
position: fixed;
background: transparent;
}

.responsive #top .av-burger-menu-main {
display: none !important;
}
}

That doesn’t hide the menu in mobile view. Could you just help me to hide it?

August 4, 2024 at 5:04 pm #1463770
Mike
Moderator
Hi,
When I check your homepage there is no content, so I checked the page linked below, and I see for mobile the header shows and when I scroll the header scrolls away.
As I read your posts above I believe that you want a transparent mobile header and hide the burger menu.
For this, please add this css to your Quick CSS field:
```
@media only screen and (max-width: 767px) { 
  .responsive #top #main {margin-top: -80px!important;}
  #top #wrap_all .av_header_transparency {background-color: transparent!important;}
  div#header_main > .container {display: block !important;}
  #avia-menu-0 { display: none;}
  }
```
After you apply the CSS please clear your browser cache and reload the page to check.

Best regards,
Mike
August 5, 2024 at 11:37 am #1463822

ballindigital
Participant

Thank you – this is great.

Would it be possible to centre the menu in mobile view like this too?

August 6, 2024 at 12:09 am #1463886
Mike
Moderator
Hi,
Try adding this css to your Quick CSS field:
```
@media only screen and (max-width: 767px) {
.responsive #top .logo.avia-standard-logo {
	display: flex;
  justify-content: center;
  width: 100%;
}
}
```
Best regards,
Mike
Author

Posts

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.