I get the behavior I desire when I select "toggle" for the menu display on mobile devices. It shows the multi-tier menu in exactly the way I would like. However, there are two issues that I don't know how to deal with:

1. The annotation I used for the box is "{zen-bars}{/zen-bars} Menu". The bars and the text show up in the lower right corner of the box in an exceedingly small font. How do I change the size/color/position of the annotation?

2. The box with the toggle menu displays in the very upper right corner of the page. How do I put it in a different position on the webpage?

Hello,

I can't see your "hamburger" mobile menu now (top right corner). There's a select menu instead...

Cheers
Joshua

I'm testing it on only on one page: www.west-fly-fishing.com/index.php/legacy/montana-river-levels

The rest of the site uses a select menu at the moment

Never mind (for now, anyway). I think I figured it out.

Hi,

The "menu" annotation should be dark? If you want to change it to white, try to add the following custom css code:

#logowrap h4 {
color: #fff;
}

Cheers
Joshua

That worked well! I'm almost there . . .

Two (should be) easy questions:
1. How to change menu icon size (make bigger)?
2. How to change menu icon alignment (move to left side)?

Thanks,
Scott

Hi,

Try the following custom css code:
Cheers
Piotr

I made the CSS changes. So now my additional custom CSS looks like:

.offcanvas-trigger a.btn {
float: left;
font-size: 18px;
}

.offcanvas-trigger .fa-bars {
font-size: 20px;
}

#logowrap h4 {
color: #ffffff;
}

However, I'm not seeing the changes on the site. I set the off-canvas container text style color to ffffff (or any other color), and that has an effect. Also, I expanded the off canvas container to full width, which moves the menu button to the middle, and that's acceptable. But---no change in size, which at this point is my only major issue.

Screen shot below.

I am totally confused. Changes to custom.css are ignored. I have a fair amount of custom css, and it all works fine like it always did. But new changes have no effect. I edit the custom.css, upload it to templates/buildr/css--and it's like I didn't do anything.

?????

For the logowrap colour - you can use the style > colours for that row

See if the */ on line 35 is causing problems for you

Cheers
Paul

You've also got some invalid font selections by the look of it in the template settings

Cheers
Paul

1. Which settings were invalid?

2. I have been setting the "menu" icon colors via the template rather than css. That works well.

3. Apparently an "end comment" tag was inadvertently erased in my custom css. I removed the offending line, but I'm still not getting custom css to behave properly. Very perplexing.

4. All I want to do is make the "menu" icon and text bigger. What is the proper css to do that? Or is there a way to do it through the template manager?

Hi,

I can't see mentioned css code in your custom.css file. If you want to make menu icon and text bigger, please add the following code at the end of your custom.css:
Cheers

Hi error isn't showing now in regard to fonts

From memory, it looked like non-google fonts being loaded as a google font

With the colour of text, each row has the option in the settings of adding text colour

Cheers
Paul

I resolved my custom.css issues, added the suggested code, flushed the browser history . . . . and it all works beautifully!

Thanks for the help and the patience! No more issues and I'm happy as a clam at high tide.

Nice one