Center the navigation items

HuMarts · 2014-01-26 03:09:25

Why is it not possible to center the navigation items in the navigation container, once you've chosen for "Muliti-level menu's?"
Is it
- "still not possible, yet to come in the (nearby?) future?"
or
- or simply not possible, for reasons far beyond my understanding?

Last edited by HuMarts (2014-01-26 03:09:59)

rod barbee · 2014-01-26 04:25:26

not possible as is. See this:
http://community.theturninggate.net/post/10035/#p10035

and this thread:
http://community.theturninggate.net/post/15977/#p15977

Matthew · 2014-01-26 14:12:36

HuMarts wrote:

- or simply not possible, for reasons far beyond my understanding?

This one. Definitely not coming in the future.

HuMarts · 2014-01-26 16:42:00

OK, that's a clear answer!
Did I understand correctly, reading the threads, that you do not advise to use "none" along with "left-margin" and "padding?"

Last edited by HuMarts (2014-01-26 16:43:10)

Matthew · 2014-01-26 18:55:48

Sorry. I don't understand the question.

HuMarts · 2014-01-26 19:17:20

I mean in formatting the navigation container / items.

HuMarts · 2014-01-26 20:07:45

Well, anyway, now I've been trying to put things back like it was, no result. In a browser on a computer it looks nice, I like the adding of the linear gradient in some parts of the screen. But, alas, on iPhone and iPad it looks like shit (excusez le mot) and I cannot get it back right.
So there's one of my experiences in doing this kind of things: you solve one problem, you encounter one or more others. Very time-consuming, that's a fact.

rod barbee · 2014-01-27 00:36:48

If you use padding to center the menu, it's likely going to mess up the mobile experience. See those threads above for more.

Did you save your previous work as a template in the Template Browser? If so, just click on that and you'll be back to where you started.

HuMarts · 2014-01-27 03:01:20

Yes, I always save my templates, but I have forgotten to check the looks on iPad and Iphone.
So, you already know what has happened: I saved a template with some mistakes in it.
Now it is quite a problem to find out how to restore it.
Strangely enough I had succeeded in creating something good, especially on iPad, even with the us of 'padding!'
It's hard to tell quickly where the wrong parts reside.

rod barbee · 2014-01-27 04:07:20

post a link.

HuMarts · 2014-01-27 04:38:24

Like this: http://www.humarts.nl/galleries.php ?

rod barbee · 2014-01-27 04:59:13

I think the reason that the iPad navigation looks so strange is that there are no background colors applied to the collapsible menu.
Look at Navigation Items: Collapsed Menu Item Background-color

The best way to preview what it will look like is to set up your workspace in LR the the width of the iPad
http://ce3wiki.theturninggate.net/doku. … _workspace

HuMarts · 2014-01-27 17:37:34

First: I have NO collapsable menu's in my galleries installed! The reason: it shows a square of about 4 horizontal lines on the displays of both the iPad and the iPhone, thus reducing the space for other elements.
Strangely enough, it has worked for a while without collapsible menu's. On iPad it looked pretty good, with nice rounded buttons in (one!) line, on iPhone the same buttons, but in two lines. As I expect to reduce the menu-items in the future, things could only be better shown.
But..., like I said, for some reason the design is destroyed.

After your reply I have been experimenting with the Viewport-Sizer, reading as much documentation as I can. Following the instructions, the smallest size I am to achieve is 898 pixels, on my 1920 pixel-wide screen on iMac. Maybe I'm doing something incorrectly, so I will give it a few more efforts.

rod barbee · 2014-01-27 22:39:00

First: I have NO collapsable menu's in my galleries installed!

No, you're not using the "collapsible" feature, but what you're seeing is the mobile menu taking over. All CE3 plug-ins have this built-in for mobile navigation. You can resize your browser and watch it happen. If using multi-level navigation, like you are, you'll see the mobile menu activate when you hit 1024 px. If you add a background color to the Nav items (Collapsed Menu Item Background-color), the arrangement will make a lot more sense and will look better.
It looks to me that you're using the "Natural" style of Mobile navigation. The "Naturally Collapsible" option will gives you that three horizontal bar icon in place of the menu when you hit the mobile break point. Clicking on this will reveal the mobile menu. You can replace that bar if you wish. On my site, I've replaced it with the word "Menu" so that visitors know what it is.

The control for this is in Site Info > Navigation Container > Display Navigation: Mobile Navigation Type. There are three choices. Resize your Lightroom working area and you'll see the preview. You can then change the type of menu, add background colors etc. and preview the results.

Following the instructions, the smallest size I am to achieve is 898 pixels, on my 1920 pixel-wide screen on iMac.

You can open Lightroom's side panels only so far, after that, resize the entire Lightroom window. You can get it to any size you need.

HuMarts · 2014-01-28 00:55:45

Well, Rod, as you can see on www.humarts.nl I've given up the struggle. This may seem ungrateful to you and Matthew, but, being sick at home, suffering from a severe sinusitis, I simply am too tired of searching and trying. I've decided to stop with the multi-level dropdown-galleries-menu, because the real shit hit the fan when I tried to implement that, totally destroying the looks on both iPad and iPhone. I do not know if there's a way of getting multi-level galleries using a grid, but for now it has been enough. What happen was, that I have been focusing on looks, while the goal is being busy with content: photo's or photo-shows! I know that creating a nicely looking set of webpages takes quite some time and energy, but for now I quit.
Once again, thank you (and Matthew) very, very much for your ongoing efforts to get me further on the road. It is obvious that I have learned a lot, "trailing-and-erroring" and not in the least because of the excellent support from the TTG-guys.
And ..., don't worry: I'll be back!!

Last edited by HuMarts (2014-01-28 00:57:35)

rod barbee · 2014-01-28 01:15:11

You're probably right in just sticking with the basics for now. It's easy enough to implement drop-downs whenever you get to the point where they'll add significant functionality. If you only have a few galleries, it's probably pointless to use drop downs.

(if you're interested in seeing what the mobile nav can look like when there are a lot of drop-down, take a look at my site. Just resize your browser until the mobile nav kicks in)

So try to have some fun with it. I like what you did with the navigation links

HuMarts · 2014-01-28 01:53:28

Thanks for the compliments, Rod, I appreciate it.
Looking at your website there was this spontaneous reaction on my side: "This exactly how I want my pages to behave!"

So for the (near) future there's some work left:
- improving the resizing of my pages; I tried resizing my website in the browser on my iMac and to my surprise things changed, almost the way they do at your webpages, only not quite that perfect. A funny thing happens (though not on the way to the Colosseum): when looked at on iPhone the menu is left-margined, both in portrait and in landscape view. On iPad however, there's portrait-view holding the device portrait-wise (logical), with left-margined menu, but landscape-view when I turn the iPad a quarter of a circle, thus getting a nicely centered menu!!?? This gives me the feeling that I have been "almost there!" What do you think?

- another weird thing happens, also on desktops, when you click on the photo-icon (= entering 'galleries') and after that click on a gallery (at the moment only one, as I'm still in trial). The photo-icon changes a bit, as do all the others. I really didn't see that one coming! I checked my pages- and my galleries-template in LR, but I'm still without a clue!

So, like I said a while ago: you solve one thing, two others appear! Best thing to do is keep on smiling, you're right about that.
That's what I intend to do!

Huub Martens

Last edited by HuMarts (2014-01-28 01:55:10)

rod barbee · 2014-01-28 03:01:44

the reason you see what you see when the iPad is horizontal is that you're using single level navigation. With single level navigation, the mobile menu doesn't kick in at 1024px (the width of the iPad). But with the iPad held vertical, the browser is narrow enough to trigger the mobile menu.

- another weird thing happens, also on desktops, when you click on the photo-icon (= entering 'galleries') and after that click on a gallery (at the moment only one, as I'm still in trial). The photo-icon changes a bit, as do all the others.

the reason the camera icon is changing is that it's a different icon! You're using icon-camera for your gallery and icon-camera-retro for Pages.

I don't really see the others changing except in a very slight position shift. This looks to be because of the difference between the two camera icons. icon-camera-retro is 16x17 px and icon camera is 17x17 px.

HuMarts · 2014-01-28 16:36:17

OK, another issue solved! I wouldn't have noticed it in years, unless some other icon would have appeared. Thanks again!
More and more I'm beginning to understand what is going on and what is meant by "mobile menu kicking in."
Let's move on: to Infinity and Beyond!

Last edited by HuMarts (2014-01-28 16:37:03)

HuMarts · 2014-01-28 18:01:39

How do I close this topic and start a new one?

Matthew · 2014-01-28 19:10:17

I'll close it. Start a new topic from the main forum listing.

Community @ The Turning Gate

#1 2014-01-26 03:09:25

Center the navigation items

#2 2014-01-26 04:25:26

Re: Center the navigation items

#3 2014-01-26 14:12:36

Re: Center the navigation items

#4 2014-01-26 16:42:00

Re: Center the navigation items

#5 2014-01-26 18:55:48

Re: Center the navigation items

#6 2014-01-26 19:17:20

Re: Center the navigation items

#7 2014-01-26 20:07:45

Re: Center the navigation items

#8 2014-01-27 00:36:48

Re: Center the navigation items

#9 2014-01-27 03:01:20

Re: Center the navigation items

#10 2014-01-27 04:07:20

Re: Center the navigation items

#11 2014-01-27 04:38:24

Re: Center the navigation items

#12 2014-01-27 04:59:13

Re: Center the navigation items

#13 2014-01-27 17:37:34

Re: Center the navigation items

#14 2014-01-27 22:39:00

Re: Center the navigation items

#15 2014-01-28 00:55:45

Re: Center the navigation items

#16 2014-01-28 01:15:11

Re: Center the navigation items

#17 2014-01-28 01:53:28

Re: Center the navigation items

#18 2014-01-28 03:01:44

Re: Center the navigation items

#19 2014-01-28 16:36:17

Re: Center the navigation items

#20 2014-01-28 18:01:39

Re: Center the navigation items

#21 2014-01-28 19:10:17

Re: Center the navigation items

Board footer