Changing width of menu buttons

Community Forums Forums Design Tips and Tricks Changing width of menu buttons

This topic is: resolved

This topic contains 1 reply, has 2 voices, and was last updated by  Hard Boiled Greg 2 years, 9 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #18184


    I’m using the Education theme on and am about done with the design but have hit a massive hurdle.

    When viewed on a tablet (Nexus7, Ipad etc) in the landscape view, the menu is just too long and so moves onto 2 lines, obsuring half the banner.  My thought was the simplest fix would be to shorten each menu button a little so they all fit in one line, even on the smaller screen.  (I’ve used the Genesis Responsive Header to fix things for smaller devices but I don’t think this has an option for these tablet sizes).

    I really need help because I’ve now got my client (conference organising – not web design – just got dragged into this part!) looking at this on a tablet as we’re trying to finish this whilst he’s away traveling.  Any advice gratefully received as the client won’t sign off on the site without it looking right on his device and I can’t do my real job until he’s signed off!




    Hard Boiled Greg


    Are you asking how to reduce the width of the menu buttons? You could do this by reducing the padding of the:

    #header . menu a {

    rule in your style sheet.

    But if it was me, I’d move the menu from the header to primary-navigation bar, so it isn’t trying to occupy the same space as your full width header.

    Hard Boiled Greg

    Website: Hard Boiled Greg Twitter: @hbgreg

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.