Menu Truncated vertically Twentytwelve

What size is the ‘screen’? What Browser/version? Also, having such a long menu is never really a good idea….try breaking it up a bit…or use a smaller font/less padding/margin etc. in menu…

What do you mean by screen?

This happens in Chrome 25.0.1364.172, FF 19.0.2 and IE 8.0.6001 that I know of.

I just tried it in Firefox and IE8, and the complete menu is there. By leaving my cursor on the menu and using the down-arrow key on my keyboard, I was able to scroll down the entire menu with no problem. So if you do not want to break that menu into sub-menus, look for a way to have the entire page scroll when the cursor gets near the bottom of what is visible.

….and the last item was called “Zen Sarcasm”.

If you check on the page https://www.openvoices.ca/education/s2/ it will give a listing of the page that is the same sort that the menu is in.

I have tried it on two computers here and with the theme twentytwelve it does not show the entire list.

It would also be nice to have the screen scroll when you reach the bottom but that is a separate issue.

In your Child Theme style.css file, add;

.site {
 overflow: visible;
}

You may have some other elements slightly cut-off as a consequence, but you’ll just have to deal with that. CSS-specific support can be sought at CSS-specific forums https://csscreator.com/forum .

.site {
overflow: visible;
}

I placed this in style.css and it did not change how the menu was being truncated at the bottom of the page.

This is what’s showing up in your CSS:

.site {
    margin: 0 auto;
    max-width: 68.5714rem;
    overflow: hidden;
}

Are you sure you changed it and saved it?

Why have you so many styles in your Child Theme stylesheet, did you write them all or have you copied over every style from the original stylesheet?

I did save it to the style sheet after I tested it I deleted it. The styling that you have quoted is not coming from the style.css sheet. Where are you seeing it?

The style.css file that is being used for the child theme was copied from the parent theme and modified.

That’s not the best way to create a child theme – it creates duplicate code and is confusing and harder to manage. Are you using Firebug (or other similar tool) to work with the CSS? It shows you everything.

And as expressed by WPyogi, the overflow: visible style does not appear to be saving
https://www.openvoices.ca/wpr/wp-content/themes/twentytwelve_child/style.css?ver=3.5.1

.site {
margin: 0 auto;
max-width: 68.5714rem;
overflow: hidden;
}

Ok I have switched that hidden to visible. I flushed the cache and the menu is still cut off. Please note it is the bottom of the page that I am concerned about not the side. The last item should be “Zen Sarcasm”.

On the issue of Child Themes. I thought that a style sheet in the child theme would override the one in the core theme rather than both of them being referenced. Is that incorrect?

No all styles are read top down, so the child styles take precedence unless they are less specific or there is a problem. Are you using a browser tool?

You should remove everything except the changes you’ve made from the child theme file.

It looks like you are using HTML comments in your CSS file – which causes problems. CSS comment tags are not the same – they should be this:

/*   */

Validating is another excellent tool for debugging:

https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.openvoices.ca%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en