Jump to content
Sign in to follow this  

Simple Nav - display: inline-block fixes for different browsers? Items spill over 2 lines

Recommended Posts


Hi folks

So, I'm by no means an expert but I know enough to know that getting your site looking good over multiple browsers and screen sizes can be a massive pain. I'm using Pagelines Platform 5 but with DMS2, partly for legacy reasons.

On this page http://caterfly.co.uk/what I'm using a secondary Simple Nav menu in the left sidebar. I've spent far too long trying to to stop the lines of the menu items spilling over onto the next line, or combining two list items on one line [results vary across screen size / browsers]. I couldn't get consistent results in which the menu simply displays each item vertically.

I've tried various hacks, playing with font size, margins & padding, and column width etc and examining the CSS using developer tools in my browser to try to identify what's happening.

I now know far too much about browser rendering engines! It seems the CSS > display: inline-block  renders inconsistently across browsers - a known issue. I added an extra line in the custom LESS/CSS:

#simple_navu95p6wo ul.inline-list > li {
  display: -moz-inline-box;

- which is Firefox specific hack. Browsers for which this is irrelevant ignore this line, and continue to display: inline-block;

I've seen that's its use is discouraged and it is tagged for making obsolete, but the discussed replacements don't work for me in Firefox. Other suggested hacks don't seem to help. Site currently looks ok to me in Chrome / Chromium / Firefox but not Opera, which is a pain. Safari isn't great but that might be due to the smaller screen size I was viewing on.

I would love to get it displaying correctly in Opera > as a simple vertical menu, displaying each item on its own line. The Opera hacks I've seen don't work for me, nor do any of the CSS options available for that line (using Opera developer tools).

Any suggestions for fixes? Or am I missing something, is it something else?


Share this post

Link to post
Share on other sites

Ok guys, no worries. Found another fix. Added a 'Widgetizer' into the column, created a new Custom Sidebar in Wordpress, which contains only a menu. This forces the menu to behave differently, as it's in a sidebar, not being used as a horizontal menu. It forces the menu to display vertically, with one item per line.

A bit of adding custom CSS to make it look and behave a bit nicer, and it's working well enough.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this