Update: this is now live
Hi All,
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.
What's Changing?
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:
Main Navigation
* 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
Sub Navigation
* <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>
Replies
Hello Phil,
I am hoping you can help me. I am still waiting to have a 2.0 platform given to me as I have paid $300 for a useless 3.0 platform. I am still waiting for this to be resolved. I had a thread last week but it was shut down with the promise that Ning were going to fix the problem. I have not had that resolution yet. I am so dissapointed with the lack of care taken. I know that Ning has offered 2.0 to others. I want one too.
Can you please help get my situation resolved as it is about a month now and that is too long for this lack of care to go on. yOu are giving 3.0 to others and I had to pay and it is soooo not worth it.
I would like a 2.0 please until you guys get the 3.0 ready to actually be worth the money I have paid.
Thanks
Lotus
Lotus, it's not much, but I posted a few contact names for Ning and Glam here. Maybe you can cut to the chase and directly communicate with one of the people in power at Ning or Glam, as opposed to riding the merry-go-round here. I'd think it's worth a try. I for one would be interested in hearing of any results you might get. Frankly, I think you (and other new Ning customers) have every right in the world as consumers to expect a complete and functional platform if you are paying full premium price for a product that is currently being promoted and sold as an advanced and powerful social network platform, when in fact it is half finished and lacks essential networking features.
Phil is Head of Product Management, Lotus. You would have to contact Ning and speak with someone who can help you, if it's possible at all.
The only way you can have a 2.0 community, as you know, is buying it or getting it from someone who already has one of these.
That's why I had a header made for mine, and then used the background image option to upload it. Problem solved.
Oh man! You're right! The header doesn't show on my Android! Urrgghhh!!!
Odd.
Well, I just noticed I'm having some other issues with my site on mobile. First off, the pages are sliding, and the videos in my social channel page won't display properly, much less play.
I think I need to make a "running list" like Jen has.
I suspect a lot of folks are just plain 'running', without the 'list' part...
(sorry Patrick, just couldn't resist!)
...ducking and 'running' for cover now.... lol
appreciate the update any about times for the groups?
Last word I saw from Ning was August.