Menu too long for page

Hi Richard,
I’ve accessed your page and it seems to me the submenu items look quite close together. Have you managed to resolve your issue?

Cheers!
– Maria Antonietta

Hi Maria

Yes, I was about post to to say I’d solved that one. Sometimes, just writing a post suggests things to try, but they do not enter the conscious mind until a second after one presses the POST button.

For anyone else who stumbles across this, it was in the style.css at line 3539:
(style.css is in the wp-content/theme folder)

.primary-navigation ul ul a {
padding: 4px 12px;
white-space: normal;
width: 176px;

I changed it from 12px to 4px

I don’t now why it didn’t work before but it worked this time.

But it is a clumsy workaround as I feel I should not have to play with font size and padding to get everything on a menu. I have about 30 items to go on that sub-menu and would like it to scroll. S that will be another post (unless you can help now?)

Cheers, RPJ

Hi RPJ,

If you don’t apply your workaround above and scroll the page to view all menu items, does that look too awful?

If you’d like the sub-menu container to scroll (or so I understand), you’ll need to give it a set height and then set the overflow property to ‘auto’. In your child theme or custom CSS editor, add the following:

@media screen and (min-width: 783px) {
  .sub-menu {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

This code is applied only on bigger screens. On a mobile device view it will be without scrolling.

I’m not sure this would be an acceptable solution to you, let me know.

I hope this helps ??

Thanks Maria

I’ll give it a try and let you know…

Hi Maria

Finally found some time to try this fix. But decided to change the layout so don’t need it – yet!

I am using twentyfourteen and have not used a child theme theme as is as I do not expect the theme to change. But I have kept a record of the few changes I have made just in case…

I have Custom CSS Manager installed but have not sure how it works. I think I just insert pieces of code (such as you gave me) in the window and click Save which adds the code to style.css. Is this right?

If it doesn’t have the desired effect, how can I remove it or change it back to the previous setting?

Thanks, RPJ

Hi RPJ,

If you’re using a custom CSS plugin and your changes are only CSS-related, i.e., they don’t involve touching the template files, you don’t need a child theme.

You use the Custom CSS Manager in the way you suggested: just add pieces of CSS rules, save and you’re done.

To go back to previous changes, delete your custom CSS rules and save your changes. If you don’t remember exactly which changes you’ve made, try commenting out CSS rules and check the results. CSS comments look like this:

/* Whatever goes in between the slashes is
not applied on your website */

I hope this helps ??