Hi,

I'm trying to change the layout of my webpage with media queries in the css inserts section. I'm having some luck, but have had no end of problems with the %pages menu. I think I have it styled correctly, but the whole menu doesn't show, just the top of the first button.

You have to look at it on a smart phone to see the actual display, the web simulators don't seem to work.

The url is http://badgerkc.meganstestsite.com

@media only screen and (min-device-width : 320px) and (max-device-width : 500px) {
html{background:url(none); background-color:#7b0100;}

body{}
div#slider div#rev-slider-widget-3{display:none; }

table#layout tr#bodyrow td#middle{background-color:#FFFFFe;}

div#widget_sp_image-4{display:none;}

tr td#header{background:url(none); background-color:#501249;}

table#layout tr td#header div#slider {
background-position:center top;
height:150px;
width:100%;
background-image: url(http://badgerkc.meganstestsite.com/wp-content/uploads/2014/04/WebBannerSmall3.png);
background-repeat:no-repeat;
}

div#slider div#text-59{color:#000000;}
div#text-59{margin-top:165px; clear:both;}


div#text-59 div.textwidget div {font-size: 2em; font-weight:normal; width:100%;}
div#text-59 div.textwidget div p{padding:20px 10px 10px 10px; width:800px;}

div#menu1{
margin-bottom:30px;
height:1000px;
overflow:visible;
}
div#menu1 ul#rmenu2{
    width: 100%;
    margin:0;padding:0; /* CSS Reset */
    max-width: 1000px; /* restrict the width */
    margin: auto; 
    margin-bottom:30px;
}

div#menu1 ul#rmenu2 li{
    width: 100%;
    list-style-type: none; /* remove the dots */
    display:inline-block; /* IMPORTANT */
}
div#menu1 ul#rmenu2 li a{
color:#FFFFFe; 
display:block; 
margin:15px; 
padding:12px; 
border:1px solid #FFFFFe;
-moz-border-radius:12px;
-web-border-radius:12px;
border-radius:12px;
height:1000px;
background-color:#0D0428;
width:100%;
}

} 

/* end media queries */

did you really want the height of menu1 to be 1000px? (youhave that in two places

BTY Atahualpa was not designed as a responsive theme…maybe someday

There are also some responsive menu plugins. One I have used is UberMenu at CodeCanyon. You could also do a search for "responsive menu" at wordpress.org and test out some of those.

I have used for the UberMenu at CodeCanyon. I have also tried for WP Responsive Slider With Lightbox and worked really well.

Website builder or Wordpress

Originally Posted by juggledad

did you really want the height of menu1 to be 1000px? (youhave that in two places

BTY Atahualpa was not designed as a responsive theme…maybe someday

When I first found the Atahualpa theme it was one of the few at that time that said it was responsive. Every site I've built with this theme shows up as a mini version in smartphone and on tablets. The menu is not resized completely, but will show up as 2 rows instead of a single row. Is this not responsive? I'm very confused now!

In all the time I've used it and been moderating the forum, I've seen lots of requests asking if it would become responsive, but never that is was responsive

Not sure if this helps, but I use WP Touch plugin and I like it. You can add what pages you want, you can do custom icons or add icons from a number of different collections. You can select colours.

Depending on what you want to do, youll find a lot of info here about ways to make Atahualpa very useful on mobile. Ive been running my site for 5 years now and for a time I had WP-Touch active; however I switched it off and began to adapt things manually a year ago. For example, you can adjust text sizes and action elements and so on. This is not only a technical matter, it is also a matter of taste and what you think works for you...