Mobile layout: Navigation on top or at the bottom?

[dave-ha]

On a mobile layout, the navigation menu appears on some sites on top and on others at the bottom of the main content. What does the location depend on?

 

[Egor Chernodarov]

Dave, maybe it's because at mobile version the "content" area is always upper than sidebars?

 

[dave-ha]

Hi Egor,

Thanks for your answer.

Assuming there is a standard layout with a header, a sidebar on the left, a content area on the right and a footer:

<div id="layout-header"></div>
<div id="layout-content" class="">
    <div id="columns">
        <div id="column1" class="container column1 column column-left border-none"></div>
        <div id="content" class="container content border-none"></div>
    </div>
</div>
<div id="layout-footer"></div>

Column1 contains the navigation. On a newly created site (WPB 11.5.12) with this layout the navigation appears at the bottom. Correct?

On the other hand, on an older site (WPB 11.0.10) with this code...:

<div id="layout">
    <div id="header" class="header border-none"></div>
    <div id="columns">
        <div id="column2" class="column2 column column-left border-none"></div>
        <div id="content" class="content border-none"></div>
    </div>
</div>
<div id="footer-wrapper"></div>

Column2 contains the navigation. On the mobile version the navigation appears on top.

I am confused and would like to understand the logic. A customer asked me because her navigation went from top to bottom after a WPB upgrade and I try to fix it. I hope you can bring in some light. Thank you.

 

[Egor Chernodarov]

Dave, as I remember, "content" area at mobile version is always at top only starting from WPB 11.5. It was made to simplify access to main page content, because sidebars do not contains usually any significant content. I think it's a reason why your navigation menu went to bottom after upgrade.

But WPB 11.0 has showed columns in their order as in html.

 

[dave-ha]

Thank you, Egor.

Yes, the navigation menu on top makes sense on mobile screens. Well done!

Could you help me with these two questions?

1) How can it be changed for sites that were created prior to WPB 11.5? I tried with the custom CSS code .mobile-view #column1 { float: left !important; } but it didn't work.

2) Why on a fresh WPB 11.5.12 site the navigation menu appears at the bottom on mobile screens and how can it be changed? Please check out the test site with the thumbnail issue I PM'd you recently.

 

[Egor Chernodarov]

Such mobile optimization are not customizable from WPB at all. You can change behavior only with your custom scripts/css. For example you can try script like this:

<script>
(function($) {
	$(function() {
		if (getView() == 'mobile') {
			setTimeout(function () {
				var $content = $('#content');
				$content.appendTo($content.parent());
			}, 100 );
		}
	});
})(siteBuilderJs);
</script>

But I'm not think that it's a good solution. All mobile optimization should make your site more mobile-friendly. If this not true, then we should discuss this to understand what wrong and change this in the next versions (or make it customizable).

 

[dave-ha]

Hello Egor,

I am sorry to keep you busy with this but probably there was a misunderstanding.

The problem is that the navigation menu on the mobile view changed from top to bottom with the WPB upgrade. The menu should be brought back to the top in order to make such a site mobile friendly again. Do you agree and how can we achive it?

I would also like to understand why at a freshly created site with WPB 11.5.12 the navigation menu appears at the bottom on the mobile view and not (mobile friendly) on top, see my previous post for an example. Could you have a look at it?

Thank you very much in advance and I appreciate your patience.

 

[Egor Chernodarov]

Looks like you're right, it's some misunderstanding.

I'll try to explain mobile optimizations in more details:
1. Starting from WPB 11.5.0 "content" area goes to the top of the pages.
2. So, in WPB 11.5 sidebars are always lower than "content" area with all their modules (including navigation menu).
3. Both WPB 11.0 and 11.5 does not change position of modules in their areas.
4. Starting from WPB 11.5.9 (I can be wrong with number of update) navigation menu is additionally collapsed to "menu" button (as at many other mobile-friendly sites).


As I understood you want to see the "menu" button at top of your mobile pages. It's correct?

Please tell me if you have questions. I'll glad to help you

 

[dave-ha]

Now I understand: With the latest mobile view versions, navigation menus are supposed to appear after the content.

Yes, that's correct: My customer prefers the menu to appear on top and he has fair arguments. That lead me to the idea to put another navigation module into the header, hiding it by CSS on the desktop view and hiding the initial navigation menu (sidebar) on the mobile view. Well then, the menu appears on top of the content and another customer is happy again.

Thanks for your help, Egor, and have a good weekend.

 

[AbnerH]

With the latest mobile view versions, navigation menus are supposed to appear after the content.

It could be the thing for the new and updated mobile view versions but if you've responsive website design, menu appears the same way as it was on the main website whether on top or on the bottom of the main content.

 

[NikhilP]

IT depends on individual websites to decide the placement of the navigator based on the website content. so depending whether the website is text rich or image rich or many other factors the developers would consider placing the navigator bar on top

http://nikhil.pevekar.wordpress.com

 

[David23]

Hello,

Was a solution to this ever found. I have quite a few clients who have their navigation menu in the left sidebar. But this means the collapsed menu button is under the content which is not what they or I want. Is there any way we can change the order so that the sidebar can be above content as at the moment the collapsed menu is at the bottom of the page which most users would not think to look at.

Thanks in advance for your help.

David