侧面导航栏未显示在手机中？

Question

So I'm still new to the whole css and div thing, pardon my bad coding. :/ Anyways, I have finished a site but oddly the side navbar does not appear on mobile browsers such as Chrome and the default android one. Any ideas as to why? All help is appreciated.

http://escobarboxing.com/

Also, I've tested it on my Desktop via Chrome, FF, and Opera and it appears to be working fine but another user using Chrome said he did not see it?

Answer 1

Yep, that's because of this: #menu{position: absolute;}

Because the position is absolute, and the main content is centered, when you get to a small screen size, the menu goes behind the content. You can experiment with this just by resizing your screen really narrow.

For a quick fix, remove the position: absolute, which will fix your problem, but here's what I recommend:

Remove position absolute and relative from #menu and #container. Remove Margin right and left: auto from #container, then float #container left (float:left;). Finally, apply the auto left and right margins to #site (you'll need to specify a width first, looks like 920px should work). The #menu will stay next to the #container, and both will be centered with regards to the page.

For good measure, I'd add a 100% height and width div (#wrapper) above site.

Also, side note, if you put "position: absolute;" on anything, it's removed from the 'flow' of elements, so margins won't affect it. Here's a great article that helped me figure out position: http://www.barelyfitz.com/screencast/html-training/css/positioning/

Welcome to CSS! It's fun, and sometimes aggravating. I hope you enjoy.

Answer 2

Try using %'s instead of fixed widths. What's happening is on smaller screens the menu is covered by your content block because the block is to big for the screen. To see what I mean open the site with your smartphone then adjust the size of your container down. You will see your menu appear when you refresh. I have firefox on this laptop and the menu doesn't show for me either.

Answer 3

You should try adding the menu div to container and remove position absolute.I see too many divs so try using less divs. why do you need that cssmenu div?

    <div id="container">
    <div id="menu">
    <div id="cssmenu">
    </div>
    </div>
    <div class="insta">
    </div>
      rest of content
    </div> end container

                .insta {
                color: #333333;
                width: 100%;
                margin-left: auto;
                margin-right: auto;
                -webkit-border-radius: 7px;
                -moz-border-radius: 7px;
                border-radius: 7px;
                -moz-box-shadow: 0 0 10px 0 #000;
                -webkit-box-shadow: 0 0 10px 0 #000;
                box-shadow: 0 0 10px 0 #000;
                background: #EDEDED;
                float:right;
                width:770px;
                }
                #container {
                overflow: auto;
                height: auto;
                width:920px;
                                    margin:0 auto;
                }
            #menu {
            float: left;
            margin-top: 25px;
            }

Hope this answer helps.