Help creating full-screen mobile nav

Design help General
1

Has anyone successfully edited the ‘stock’ mobile nav to fill up the entire screen?

Ideally it would fill up the entire screen and the menu items are always in the center of the screen (vertically and horizontally). But I have yet to see if I can use a flexbox in the nav…

I’m first just trying to solve getting the fullscreen to work correctly. Looking at the links below, you can see that when the menu is open it’s covering up the close button.

Any help would be much appreciated! Thanks

Test Page: http://fullscreen-nav-test.webflow.io/

Read Only Link: https://preview.webflow.com/preview/fullscreen-nav-test?preview=c376070dd7c1769e3a9270c28e4d6849

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi @R0ss,

Thanks for the post, I would probably recommend to check the styling of the mobile menu when it is in the open state. Giving the mobile menu button some z-index should help.

Here is a video that may help:

https://cl.ly/2n3A0V433g03/Screen%20Recording%202018-01-04%20at%2008.54%20PM.mov

Let me know if I can help in some other way

1 Like
3

Thanks a ton for the video! Should have thought about changing the Z-index of that. That solved it for me.

I was able to put the nav links inside a Flex Div as well so they are always centered in view. Updated in the read-only link if anyone’s curious.

4

Actually found one last issue (hopefully). When the mobile nav is open, it scrolls the whole page. I made the Nav Menu a max height of 100vh…which I did to try and fix that issue, but it didn’t work. Any ideas on that @cyberdave

5

Hi @R0ss, glad the video help. On the background scroll, it is not yet possible to disable that natively, but some custom code pasted in to the site can fix that, see this helpful post:

Let me know if any questions.

1 Like
6

Thanks @cyberdave - I followed those links and read through there, but couldn’t get any of the scripts to work. I also did more research and saw that a number of people suggested making the html,body to height:100% so I tried this code below; which also did not work. Any thoughts would be helpful!

<script>
  Webflow.push(function() {
    $('.menu-button').click(function(e) {
      e.preventDefault();
    $('html, body').css({
    	overflow: 'hidden',
    	height: '100%'
		});

    $('.nav-menu-mobile').click(function(e) {
      e.preventDefault();
    $('html, body').css({
    	overflow: 'auto',
    	height: 'auto'
		});
  });
</script>
7

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.