Open Canvas Panel Menu

Hi John,

The off-canvas menu on your site is pretty bare, but it can be improved w/ CSS.

Can you explain a bit more on how you want things to look like? Perhaps, link us to a reference site you wish to replicate.

That was fast, Elvin. Thank you !

Yes, my off-canvas menu is rather bare. I'm not familiar with CSS, so am not in a position to give it a better look. Let me, please, get back to you with ideas of how I would like the menu to look.

John

No problem. Let us know what you find. :D

Hello Elvin,

First off, thanks for your very rapid response time and for your very helpful support.

I have more clarity re: my off-canvas menu. The site - http://www.understand-culture.com - is content-heavy. If the business model works I will have revenues to finance creating new content: more countries, more topics.

And because we have designed the site primarily for smartphones the navigation has to be very tight: simple, clear, intuitive. I think the best form is that of a table of contents in a book: chapter, subchapter, subsubchapter. In elementary school we learned this taxonomy: I. ... A. ... 1. ... a.) ... i.

In a website menu the only way, or perhaps the best way, to distinguish is via: capital and non-capital letters ... indentation ... font type ... colors.

Please see what the menu currently look like here: https://understand-culture.com. Please choose "Germany:USA". Is the following possible?

Indent a subtopic, i.e. Communication.
Indent a subsubtopic, i.e. Directness.
Change the font and/or color of topic, subtopic, subtopic.

In other words, how can I give the off-canvas menu the look of a book table of contents?

Thanks, Elvin.

John

Hi there,

you can use some CSS like so:

/* Style off canvas navigation items ALL */
.slideout-navigation.main-navigation .inside-navigation .main-nav ul li a {
    text-transform: uppercase;
}
/* Style off canvas navigation items Submenu */
.slideout-navigation.main-navigation .inside-navigation .main-nav ul ul li a {
    text-transform: lowercase;
    font-size: 20px;
    text-indent: 1em;
    color: #ff0;
}

/* Style off canvas navigation items Sub-Submenu */
.slideout-navigation.main-navigation .inside-navigation .main-nav ul ul ul li a {
    text-transform: lowercase;
    font-size: 18px;
    text-indent: 0.5em;
    color: #00f;
}

I added some styles to demonstrate - that you can change to meet your needs.

Holy Moses, David !

Where do I insert that?

You can add it to the Customizer > Additional CSS.

If theres a specific style you want to change then let us know.

It works !

... but only in Overlay mode, not in Slide-mode. Is that a limitation or simply the choice you made in order to illustrate to me how CSS can customize the off-canvas menu?

John

That CSS should work in either overlay or slideout. The HTML and CSS classes are identical.
Change it back to slideout and clear any plugin or browser caches to make sure you're seeing the latest code.

Thanks, David !

John

You're welcome

Hi David,

Re: Off-Canvas Menu ...

I changed the color of submenus to white. Could you please make all terms normal caps, i.e. Patterns ... Germany ... United States ... Communication ... Agreements ... etc.?

Or even better please show me how to make those changes. I tend to want to play around with different versions before making a choice.

Thank you.

John

Simply remove the text-transform: uppercase; AND text-transform: lowercase; properties from the CSS i provided.
Or change them to alternative styles if you wish:

https://www.w3schools.com/cssref/pr_text_text-transform.asp

Perfect, David. Thank you.

How can I reduce the font size of the main tabs: Pattern, Germany, etc.?

John