Problem with replacing a menu in templates

timstohr
OFFLINE
Posts: 1091
Thanks: 56
Karma: 9

6 years 3 weeks ago #308346 by timstohr

Replied by timstohr on topic Problem with replacing a menu in templates

Sure, not a problem.
If you use the vertical scrolling menu on mobile, you can immediatly see all the relevant tabs and the user does not have to find the additional menues hidden under the ellyptical or burger symbol (from my test with about 50 people, actually ony 1 person was able to find the different tabs on mobile within 10 seconds.

If you try it out for yourself, you are able to scroll the menu item in the google website (on mobile) vertically.

Attachments:

Please Log in or Create an account to join the conversation.

krileon
OFFLINE
Posts: 48541
Thanks: 8290
Karma: 1445

6 years 3 weeks ago #308349 by krileon

Replied by krileon on topic Problem with replacing a menu in templates

I believe the below CSS should give you something like what you're wanting.

Code:

@media (max-width: 575.98px) {
	.cb_template .cbMenuNavBar .cbMenuNavBarToggle,
	.cb_template .cbTabsMenu .cbTabsMenuNavBarToggle  {
		display: none;
	}

	.cb_template .cbMenuNavBar .collapse,
	.cb_template .cbTabsMenu .collapse {
		display: block;
	}

	.cb_template .cbMenuNavBar .cbMenuNav,
	.cb_template .cbTabsMenu .cbTabsNav {
		overflow: auto;
		-ms-flex-direction: row;
			flex-direction: row;
		-ms-flex-wrap: nowrap !important;
			flex-wrap: nowrap !important;
	}

	.cb_template .cbMenuNavBar .cbMenu,
	.cb_template .cbTabsMenu .cbTabNav {
		white-space: nowrap;
	}

	.cb_template .cbMenuNavBar .nav-link,
	.cb_template .cbTabsMenu .cbTabNavLink {
		padding-right: 0.5rem;
		padding-left: 0.5rem;
	}
}

That should work for both the menu bar above the canvas and the tabs below it. I'm not completely sold on the user friendliness of it though as depending on how menu items or tabs line up it may not indicate well if there's anything to scroll.

Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Please Log in or Create an account to join the conversation.

timstohr
OFFLINE
Posts: 1091
Thanks: 56
Karma: 9

6 years 2 weeks ago #308462 by timstohr

Replied by timstohr on topic Problem with replacing a menu in templates

Loving the usability of it. Much much better than before. We are updating the code a bit to still have everything that is under the Nested Menu Main Middle (underneath burger menu on desktop) to be hidden under a tab which says "MORE" (like EDIT above the user canvas) but otherwise usability has greatly improved (people now see that they can actually click on different things there).

We will share our updated code here with you so that other users can use it if they want.

The following user(s) said Thank You: nant, krileon

Please Log in or Create an account to join the conversation.

timstohr
OFFLINE
Posts: 1091
Thanks: 56
Karma: 9

5 years 11 months ago #308950 by timstohr

Replied by timstohr on topic Problem with replacing a menu in templates

Hi everyone,
Sorry for the long time but it was not easy to make those changes. So... we used the CSS code that Kyle posted. The problem was that it destroyed everything we had under the burger menu as well (Positioin: Nested Tab Menu). We then proceeded to write an overwrite module that changed the burger menu to have the name "Push notifications" and make it into a drop down menu just like you have it as EDIT.

That brought us a very user-friendly and mobile adapted UX. It has improved the way the users use the profile page (as most of our users are using mobile).
@Kyle: would be great to implement the option to have the burger menu show up as MORE with it being a drop down just like EDIT.

Please Log in or Create an account to join the conversation.

krileon
OFFLINE
Posts: 48541
Thanks: 8290
Karma: 1445

5 years 11 months ago #308954 by krileon

Replied by krileon on topic Problem with replacing a menu in templates

The problem was that it destroyed everything we had under the burger menu as well (Positioin: Nested Tab Menu)

The CSS I provided is not designed to be used with the nested tab menu. That wasn't a requirement in your original post. The below CSS will display the dropdown menu as it does on desktop view.

Code:

@media (max-width: 575.98px) {
	.cb_template .cbMenuNavBar .cbMenuNavBarToggle,
	.cb_template .cbTabsMenu .cbTabsMenuNavBarToggle  {
		display: none;
	}

	.cb_template .cbMenuNavBar .collapse {
		display: block;
	}

	.cb_template .cbTabsMenu .collapse {
		display: flex;
	}

	.cb_template .cbMenuNavBar .cbMenuNav,
	.cb_template .cbTabsMenu .cbTabsNav {
		overflow: auto;
		-ms-flex-direction: row;
			flex-direction: row;
		-ms-flex-wrap: nowrap !important;
			flex-wrap: nowrap !important;
	}

	.cb_template .cbMenuNavBar .cbMenu,
	.cb_template .cbTabsMenu .cbTabNav {
		white-space: nowrap;
	}

	.cb_template .cbMenuNavBar .nav-link,
	.cb_template .cbTabsMenu .cbTabNavLink {
		padding-right: 0.5rem;
		padding-left: 0.5rem;
	}
	
	.cb_template .cbTabsMenu .cbTabNavMore .cbTabNavMenuMoreBtn {
		display: block !important;
	}
}

The following user(s) said Thank You: nant

Please Log in or Create an account to join the conversation.

timstohr
OFFLINE
Posts: 1091
Thanks: 56
Karma: 9

3 years 3 months ago #326080 by timstohr

Replied by timstohr on topic Problem with replacing a menu in templates

Hi Kyle, the above does not seem to work anymore. All my beautiful sliding menu seems to not slide anymore...

Please Log in or Create an account to join the conversation.

Moderators: beat, nant, krileon