Dawn Theme: On mobile, login feature disappears on

[aurumlux]

I used this code but if you go on mobile and scroll slightly, it doesnt look right as shown in images below. I used this code in my theme liquid file. I just want the menu to be in a fixed position and not be able to see the homepage behind it.

{% if template.name == "index"%}
{% style %}
@media screen and (max-width: 768px){
div#menu-drawer {
    height: 85vh;
}
}
{% endstyle %}
{% endif %}

You can see below  

preview link:https://bglzkzgnixdsw9zq-89242534237.shopifypreview.com

[PaulNewton]

Just try making it full height: height: 100vh;

vh is kinda like percentage but basically uses the viewport dimensions.

You may need to apply position fixed, or overflow none etc to remove scrolling.

Depends on the rest of the code or customizations in play.

If you need this developed then contact me for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

[aurumlux]

didnt work unfortunately

[aurumlux]

think its something to do with the height of my announcment bar but then if i change the pixels for that, the background for the announcement bar disappears

[PaulNewton]

Probably need to apply it to the container or section wrapper if the theme was designed to let the drawer have a background window.

[aurumlux]

Tried all sorts mate, just gonna leave it unless someone gives me a solution

[PaulNewton]

If transparency is removed from the .header-wrapper it looks fine on emulated mobile, chrome desktop.

[aurumlux]

hmm yh im thinking the transparency code is the issue, i used this code here for it

{% if template == 'index' %}
 
<style>
.shopify-section-group-header-group.announcement-bar-section{
height: 38px;
}
.header-wrapper{
position: absolute;
width: 100%;
background: transparent;
}
.header-wrapper .header{
margin-top: 10px;
}
</style>
 
{% endif %}    

[aurumlux]

what I think i might do is keep it transparent on desktop but remove it for mobile viewers

[PaulNewton]

also validate the themes html and css.

There some weird thing with the window at the bottom happening on some of the emulated iphones and if it's fixed then regular responsive gets weird. And then also the drawers open/close icon has a pseudo element that seems involved but it shouldn't be.