Update: this is now live
We're working on some changes to the html structure and css for the header and navigation in Ning 3.0 networks. This work will improve the experience for mobile users and will be released next week. We're letting you know about it today so that if you are using css to customize these areas, you can make sure your customizations won't be lost or break when the changes are released. If you haven't customized the css for your network's header or navigation, then you don't need to do anything.
If you're using a logo on your network, we're going to start outputting it as an image with the <img> tag. Currently logos are output as backgrounds inside a <div>; that makes them difficult to scale well. This change shouldn't impact anyone.
When the network is viewed in smaller devices, we'll be shrinking the size of the header. Currently the header height remains the same for all devices, but in small devices like a phone, this takes up a lot of vertical space. We'll shrink the logo or text appropriately, and position the condensed menu button on the right or underneath. We're also fixing a bug where the logo can sit overtop of the menu button on phones, meaning it can't be clicked. If you've positioned your logo on the right in the design studio, we'll automatically position it in the center for tablets and phones.
We're also updating the way the menu works. Currently you get a list of site pages and any secondary items show up on mouseover; this means they're invisible for mobile users unless they happen to click on them, and the positioning doesn't work well. Instead the menu will be wider, and on small devices it will be the width of the device. Menu items that have secondary items will have an icon at the right to let visitors know, and click on that will expand the secondary items downward. Here's a screenshot of what it looks like right now:
and here's how it will look after the release:
We're adjusting the display of subnavigation items on pages. Currently these are just listed out. With the release, if there's more than one item, we'll show these as a dropdown menu.
If you've customized your header or menu css, here's what you need to know:
* navigation links are now display: block so that they are easier to tap on mobile devices.
* if you've applied spacing or a background color with .navbar > ul > li in custom css, you'll need to change it to .navbar > ul > li a
* <div class="navbar"></div> is now <nav class="navbar"></nav> so selectors that use div.navbar will no longer work and should be changed to nav.navbar or just .navbar
* the menu button (shown in smaller viewports) <div class="occasional-button"></div> is now inside <nav class="navbar"></nav>. .occasional-button no longer uses position: absolute
* <ul class="subnav"></ul> now has an added .linkbar class: <ul class="subnav linkbar"></ul>. That means if you're using .linkbar to to style the Main Navigation, the styles will affect the subnav as well.
* <ul class="subnav linkbar"></ul> sits inside a new <nav class="subnavBar"></nav>