[Resolved] Open Canvas Panel Menu

[John]

Hello GP-Support !

Ok, I’m a week into using GP and continue to be very, very happy with it. Thank you.

Please see http://www.understand-culture.com. See the menu in the top right corner. I created via Open Canvas Panel. Functionally it is fine. Visually it is not terribly elegant looking. I assume that there are plugins which offer different looks. I want to begin searching for the right one.

What do I need to keep in mind during my search? I want to make sure that I have 100% compatibility with GP. Thank you !

John Magee

[Elvin]

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.

[John]

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

[Elvin]

No problem. Let us know what you find. 😀

[John]

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

[David]

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.

[John]

Holy Moses, David !

Where do I insert that?

[David]

You can add it to the Customizer > Additional CSS.

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

[John]

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

[David]

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.

[John]

Thanks, David !

John

[David]

You’re welcome

[John]

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

[David]

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

[John]

Perfect, David. Thank you.

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

John

[Author]

Posts