[SOLVED] Menu not showing up on mobile
 

Hi so I work on a site for a not for profit group, and i have minimal experience with html and php. Im basically just using plugins and setting options, not really adept with the code yet. I've noticed that on the mobile version of the site only the homepage is displaying, and the menu only has home and blog available. If you load the site in a regular pc browser window everything displays fine. Is there something im missing? In the theme options i see nothing along the lines of responsive settings, or anything like that. If anyone could help me get the full site to appear on mobile that would be much appreciated.

Thanks so much,
-Andrew

i got it to work!

in the css i commented out this block of code

/* @media only screen and (max-width: 767px) {
Hide default menu
ul#menu1,
a.rsslink,
img.avatar,
.post-categories i {
display: none;
} */

Hi, Drew:

When the browser shrinks to a smaller size (like in a cell phone), the regular menu is supposed to be hidden (which is purpose of the CSS code you commented out), and in its place should be a menu in the form of a drop-down list; are you saying that the drop-down list wasn't showing up?

Hi, and thanks for your response. Yeah there was no drop down menu displaying. That would be fantastic though- how would I enable that?

this is the code as it is

/***************************************
Menu 1 on mobile devices
**************************************/

.menu1-mobile {
display: none;
font-size: 20px;
padding: 10px;
margin: 20px auto 30px auto;
width: 90%;
}


@media only screen and (max-width: 959px) {
.hentry .post-thumb img {
opacity: 1 !important;
z-index: 1000;
}
}

@media only screen and (max-width: 767px) {
/* Hide default menu */
ul#menu1,
a.rsslink,
img.avatar,
.post-categories i {
display: none;
}

/*could it be this?*/
.menu1-mobile {
display: block;
}

.commentlist li > div {
margin-left: 0 !important;
}
.post-footer a {
padding: 7px 15px;
}
a.post-readmore {
background: #f7f7f7;
border: solid 1px #eee;
color: #0090d3;
}
.hentry div.thumb-shadow {
background-image: none !important;
padding-bottom: 0;
margin-left: 0;
}
div.post-thumb {
border: none;
padding: 0 !important;
background: none;
}
.hentry .post-thumb span {
display: none;
}

body {
font-size: 15px;
}
.widget .searchform .field {
max-width: 100% !important;
padding: 10px;
}
#content {
padding: 0 20px 20px 20px;
}
}

Yes, that's the right selector, .menu1-mobile is the drop down list that should be displayed when your screen gets narrower (under 767px wide). Can you provide a link to your site?

Did you change any of he virtual code?
What is the URL?

I haven't been in charge of the site for very long, it's possible someone before me changed the virtual code, though I don't think that's the case. The site is www.licypaa.org

Could it be the css grid? Right now it's set to 960px margin 0. Maybe it's not shrinking down lower than 760px

export your settings and attach them to a reply

here's the text document of the settings

Attachment 2409

Youe export works fine for me using FireFox's web developer tools / responsive design view. As the screen gets smaller, the menu becomes a tab.

Try shutting off ALL plugins to see if one is causing a conflict

It works now! It was one of the plugins for sure. Thank you so much!