26

I am having some troubles with the mobile menu landscape, - I am unable to scroll. To clearify I ment by scrolling so I see the whole menu. When scrolling now, it stopps after a certain amount of px (the height of the header). Please minimize the window so it looks like mobile landscape if you want to take a look by yourself.

enter image description here As the image shows, you are not able to see the the whole menu.

The problem is the following:

header {
        position: fixed;
}

It needs to be fixed, but I must be able to scroll. Any suggestions?

I have tried to remove some part of the code to make it easier to understand.

HTML

<header class="nav-down">
    <nav class="navbar navbar navbar-fixed-top site-navigation" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Aarseth-Navbar">
                <section class="si-icons si-icons-default">
                    <span class="si-icon si-icon-hamburger-cross" data-icon-name="hamburgerCross"></span>
                </section>
            </button>
            <div id="navbar-brand-cont">
                <a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>">
                    <img src="<?php bloginfo('stylesheet_directory'); ?>/img/logo.jpg">
                </a>
            </div>
        </div>
        <div class="collapse navbar-collapse" id="Aarseth-Navbar">
            <ul class="nav navbar-nav">
                <?php wp_nav_menu( array( 'menu' => 'Hovedmeny', 'menu_class' => 'nav-menu' )); ?>
            </ul>
        </div>
    </nav>
</header>

CSS

header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
}

.nav-up {
    top: -120px;
}

.navbar-fixed-top { 
    position: absolute;
}

.nav-menu { 
    margin-top: 90px;
    padding-bottom: 25px;
}


@media screen and (max-width: 767px) {
    header {
        height: 100px;  
    }

    .site-navigation ul {
        display: block; 
    }
    #Aarseth-Navbar ul li {
        clear: both;
        margin-left: 0;
        float: none;
        display:block;
        margin-top: 15px;
        padding-bottom: 15px;
    }

    .navbar-collapse {
        height: auto;
        max-height:none;
        margin-top: 20px;
        padding-left: 0;
        padding-right: 0;
    }

    #Aarseth-Navbar {
        overflow: hidden;
    }

    .navbar-nav {
        width: 100%;    
    }

    .menu-hovedmeny-container {
        padding-top: 0px;   
    }

    .nav-menu {
        padding-left: 0px;  
        padding-bottom: 0px;
    }

    .site-navigation ul {
        width: 100%;    
    }

    .menu-hovedmeny-container {
        padding-right: 0px; 
    }

    .navbar-brand {
        padding-bottom: 0px;    
    }
    .sub-menu {
        display: block; 
        width: 100%;
        position: relative;
    }

    .navbar-collapse {
        max-height: none!important;
    }
}

If you want to take a look: http://goo.gl/GZaM5K

Note: I am working on fixing the menu icon right now, so if you don't see it, press at the right corner where it's naturally that the hamburger/menu icon is. The href works, its just the svg that I am having some troubles with.

Please ask if something is unclear.

7
  • What do you mean you can't scroll? I just took a look and resized the browser and was able to scroll Apr 20, 2015 at 16:11
  • Sorry for being unclear. To clearify I ment by scrolling so I see the whole menu. When scrolling now, it stopps after a certain amount of px (the height of the header). Please minimize the window so it looks like mobile landscape.
    – Olen
    Apr 20, 2015 at 16:14
  • Please try explain your situation further - can't scroll the nav on mobile? Also, here is a fiddle I made creating a cool hamburger *menu github.com/camdevcam/responsive_fiddle if helps Apr 20, 2015 at 16:15
  • OK I see, let me relook Apr 20, 2015 at 16:17
  • Thank you. I will upload a image now.
    – Olen
    Apr 20, 2015 at 16:19

2 Answers 2

65

If you want your mobile, drop-down nav to be scrollable you have to define a height with the wrapper div that you coded to encase the mobile nav. You should define a height, and you should set overflow-y to scroll and might as well add touch scroll.

#MobileMenuDivWrapper { 
  height: 200px;
  max-height: 200px;
  width: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling:touch; // mobile safari
}
3
  • Thank you. Yes, that works. But not quite what I was looking for, but I will try to include some additional CSS to make it look better. Will comment in a second after I have testet it.
    – Olen
    Apr 20, 2015 at 16:35
  • 3
    I believe it works. I also removed the scroll-bar at the right in the window, so it looked better. However, I am wondering if there is a trick to get the right amount of height? I believe it should change acordring to the screen height. I was trying to make it 100vh, but it didn't work. Any ideas? JS or something?
    – Olen
    Apr 20, 2015 at 16:45
  • Open a separate question! Apr 20, 2015 at 18:40
8

The issue for me was the height units (from this forum).

I had to change the height in the menu div from height: 100% to height: 100vh

1
  • 1
    Fixed my problem! Thanks.
    – Tiago
    Jul 17, 2020 at 16:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.