Question 184235 in Html Question posted in
Some basic documentation can be found here.

Html – Fixed menu cut off when smaller than window

I’ve been looking for a solution to a problem for a long time: I have a menu that scrolls, so it’s fixed in position. but when the window is smaller than the menu, part of it is cut off. What options do I have?
The menu opens when clicking on a hamburger.

    <div id="container-menu">
        <div id="menuinhalt">
            <div id="menu"><jdoc:include type="modules" name="menu" /></div>
            <div id="gesucht-aufklappen">Häufig gesucht</div>
            <div id="gesucht"><jdoc:include type="modules" name="gesucht" style="html5" /></div>
        </div>
        <div id="about">
            <div id="menu-about"><jdoc:include type="modules" name="menu-about" /></div>
            <div id="submenu-about"><jdoc:include type="modules" name="submenu-about" /></div>
            <div id="socialmedia"><jdoc:include type="modules" name="socialmedia" /></div>
        </div>
    </div>


#container-menu { display: none; background: #00436e; position: fixed; z-index: 999; left: 0px; right: 0px; }

i tried overflow scroll, however that doesn’t work and wouldn’t find that a great solution as i then have two scrollbars.

Tags:

2

Answers


  1. 0

    Maybe try using percentage width:

    #container-menu { 
  display: none;
  background: #00436e; 
  position: fixed; 
  z-index: 999; 
  left: 0px; 
  right: 0px; 
  width: 100%;
}
#menuinhalt {
  width: 100%;
}
.menu-item {
  width: 70%;
}

    Now add class "menu-item" to every menu item in the menu.

    <div class="menu-item" ... > ... </div>
    Login or Signup to reply.
  2. 0

    Try using:

    #container-menu {
  max-width: 100%; // or 100vh for full screen viewport
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search