Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

Toggle Menu Behavior

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

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?


Image-1.jpg
  • Scott Richmond's Avatar
  • Scott Richmond
  • 12 Month basic
  • 50 posts
  • Karma: 0
Last Edit: 3 years 4 months ago by Scott Richmond.
The administrator has disabled public write access.
Hello,

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

Cheers
Joshua
  • Piotr Kunicki's Avatar
  • Piotr Kunicki
  • Moderator
  • 45 posts
  • 4 Thanks
  • Karma: 2
The administrator has disabled public write access.
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
  • Scott Richmond's Avatar
  • Scott Richmond
  • 12 Month basic
  • 50 posts
  • Karma: 0
The administrator has disabled public write access.
Never mind (for now, anyway). I think I figured it out.
  • Scott Richmond's Avatar
  • Scott Richmond
  • 12 Month basic
  • 50 posts
  • Karma: 0
The administrator has disabled public write access.
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
  • Piotr Kunicki's Avatar
  • Piotr Kunicki
  • Moderator
  • 45 posts
  • 4 Thanks
  • Karma: 2
The administrator has disabled public write access.
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
  • Scott Richmond's Avatar
  • Scott Richmond
  • 12 Month basic
  • 50 posts
  • Karma: 0
The administrator has disabled public write access.
Hi,

Try the following custom css code:
.offcanvas-trigger a.btn {
	float: left;
	font-size: 18px;
}

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

Cheers
Piotr
  • Piotr Kunicki's Avatar
  • Piotr Kunicki
  • Moderator
  • 45 posts
  • 4 Thanks
  • Karma: 2
The administrator has disabled public write access.
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.
Attachments:
  • Scott Richmond's Avatar
  • Scott Richmond
  • 12 Month basic
  • 50 posts
  • Karma: 0
Last Edit: 3 years 4 months ago by Scott Richmond. Reason: clarity
The administrator has disabled public write access.
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.

?????
  • Scott Richmond's Avatar
  • Scott Richmond
  • 12 Month basic
  • 50 posts
  • Karma: 0
The administrator has disabled public write access.
For the logowrap colour - you can use the style > colours for that row
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
2018-03-04_00h09_33.png
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
See if the */ on line 35 is causing problems for you

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
You've also got some invalid font selections by the look of it in the template settings

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
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?
  • Scott Richmond's Avatar
  • Scott Richmond
  • 12 Month basic
  • 50 posts
  • Karma: 0
The administrator has disabled public write access.
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:
.offcanvas-trigger a.btn {
font-size: 18px;
}

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

Cheers
Attachments:
  • Piotr Kunicki's Avatar
  • Piotr Kunicki
  • Moderator
  • 45 posts
  • 4 Thanks
  • Karma: 2
The administrator has disabled public write access.
The following user(s) said Thank You: Scott Richmond
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
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
The following user(s) said Thank You: Scott Richmond
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.
  • Scott Richmond's Avatar
  • Scott Richmond
  • 12 Month basic
  • 50 posts
  • Karma: 0
The administrator has disabled public write access.
Nice one :)
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers