Mobile dropdown not visible with sticky menu!

[Mark Roberts]

Hi,

I have been using the agama pro theme on several sites.
But I can’t get the dropdown list to be visible on the mobile sticky menu.

You have given sample css code in the past for the problem.
This solves the menu being visible (fixed) in mobile when scrolling down the page, but when you are half way down the page and wan’t to open the menu dropdown, it isn’t visible.
Normally it should show the open dropdown list as with the desktop version.

I can see that it works on your Theme Vision site on mobile.
If I scroll down your site on mobile and open the hamburger menu, it becomes visible,
but in the agama Pro theme this doesn’t happen.

Should the menu not be above the page content on a different layer that is always visible, incl. the menu dropdown!

Please can you help solve the problem.

[Zex]

Hello, Mark!

Insert the following codes into Customizing->General->Additional CSS:

@media (max-width:992px) {
.sticky-header.sticky-header-shrink {
 position: fixed!important;	
  height:80px!important;
}   
  
nav.mobile-menu {
 position: fixed!important;
 width: 100%;
 top: 80px!important;
 height: 220px!important;
 overflow: auto!important;
 z-index:9999;
}
}

Regards

[Mark Roberts]

Thanks Zex.

This helps!
Do you also know a way to stop the mobile logo from shrinking when scrolling.

Kind regards,
Mark

[Zex]

Hello, Mark!

Try to turn off the header shrinking from the Customizing->Header->General menu.https://prnt.sc/roaseh
and set the same Logo size for Logo-max-height and Logo Shrinked max-height.
https://prnt.sc/roar4g

Please let me know If the above steps don’t help you.

Regards

[Zex]

Hello, Mark!

Try to turn off the header shrinking from the Customizing->Header->General menu.https://prnt.sc/roaseh
and set the same Logo size for Logo-max-height and Logo Shrinked max-height.
https://prnt.sc/roar4g

Please let me know If the above steps don’t help you.

Regards

[Mark Roberts]

Hi Zex,

I tried this already, but it only works for desktop.
The mobile logo under “Customising->Header->Logo” does not have the tools to set max and shrinked height, only max height.
As soon as you see the mobile version, the mobile logo always shrinks to a fixed small size when scrolling, It doesn’t matter what size the original mobile logo is.
If I set the mobile logo max height to the height of the shrinked mobile logo, it is way too small.

Kind regards,
Mark

[tomwalter]

The CSS above seems to have some mistake. I get two errors when adding it.
There seems to be a { missing at the beginning of line 2 – or?

[Mark Roberts]

Hi Tom,

Here below is the CSS I am using (contains a contains one more rbrace { )

@media screen and (max-width: 994px) {
div.sticky-header.sticky-header-shrink {
 position: fixed !important;

}
nav.mobile-menu {
 position: fixed!important;
 width: 100%;
 top: 80px!important;
 height: 220px!important;
 overflow: auto!important;
 z-index:9999;
}
}

[tomwalter]

Great – thanks. That’s how I did it also (without the div in line 2). Just good to let other users know when we find some errors like that in the code posted here.
I just installed the theme a few days ago and still setting up my page. But thankful for this forum here!

[Zex]

I’m glad to see that the problem is solved now.

Thanks @Mark for the help.

I missed one bracket in the Above code (It fixed now)

Regards

• This reply was modified 3 years, 2 months ago by Zex.

[Mark Roberts]

Hi Tom and Zex,

No problem, glad I could help.

I still haven’t found how to stop the mobile logo from shrinking when scrolling.
The problem is, that the mobile menu doesn’t join-up with the sticky-header when scrolling.
Because the sticker header shrinks it leaves a gap between the sticker header and mobile menu dropdown.
– I can stop the sticky-header from shrinking, but not the mobile-logo.
– I can also move the mobile-menu position up, but it overlaps the mobile-logo when not shrinked.

Stopping the mobile logo shrinking on mobile and tablet would solve the problem instantly.

Regards,
Mark

[Zex]

Hi @Mark!

We are preparing an update to resolve this issue, but until this happens you can insert the following custom CSS code to fix it:

.sticky-header-shrink #agama-logo .logo-mobile {
    max-height: 84px;
}

Regards

[Mark Roberts]

Thanks Zex,

That did the trick 🙂
Also used it for the Tablet logo and works perfectly.

Thanks again and kind regards,
Mark

[Author]

Posts