SOLVED Add text to responsive menu toggle?
-
-
- Glen
- Hero Rocketeer
- Posts: 286
- Thanks: 3
- RocketTheme Rocks!
-
Is it possible to add some text to the little button (gf-menu-toggle) that's used to toggle navigation when in responsive mode? E.g. I wan to add 'MENU' alongside the 3 lines.
I'm on Joomla 2.5.8, GF 4.1.4 & default Gantry template 4.1.4 - Last Edit: 11 years 11 months ago by Glen.
-
-
-
- cdavis411
- Preeminent Rocketeer
- Posts: 17787
- Thanks: 882
-
add this at the bottom of your template.css file:since you are using Gantry 4 (or later) you can add it to the bottom of your rt_TEMPLATENAME-custom.css file.
gf-menu-toggle:after {content:'Menu';float: left;font-size: 0.5
-
-
-
- Glen
- Hero Rocketeer
- Posts: 286
- Thanks: 3
- RocketTheme Rocks!
-
Hi CDavis,
Thank you for your reply however the button is the same as before.
I'm using Gantry 4.1.4 so the template doesn't have the rt_ prefix, not that it matters though.
Any ideas why this code didn't do the trick?
-
-
-
- Rob Cuijvers
- Rocketeer
- Posts: 74
- Thanks: 0
-
Hi
Thanks for the help. I've got a related question, is it possible to switch the standard menu-toggle with the 3 icon bars for a selfmade logo or button? If so, how to implement it?
Thanks already for the help.
Kind regards.
-
-
-
- cdavis411
- Preeminent Rocketeer
- Posts: 17787
- Thanks: 882
-
something like this would work
body .gf-menu-toggle .icon-bar {display: none;}
body .gf-menu-toggle, body .gf-menu-toggle.active {background: url(PathToYourImage) 50% 50% no-repeat;padding: 22px;box-shadow: none;filter: none;border-width: 0;}
body .gf-menu-toggle.active {opacity: 0.5}
-
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 15
- Another Old Hack!
-
One of my standard CSS snippets is to put 'Menu' text instead of the three horizontal lines. I prefer this as it requires no download of an image which reduces page loads on mobile devices.
Here is the code
/* style for mobile menu background color and position */
.gf-menu-toggle {
margin-top: 100px;
background-color: #947156;
background-image: linear-gradient(to bottom, #947156, #D5A37C) !important;
}
/* style for mobile menu background color and position on hover */
.gf-menu-toggle:hover {
background-color: #BA8D45;
background-image: linear-gradient(to bottom, #D5A37C, #C0926F) !important;
}
/* hide default horizontal bars on mobile menu */
.gf-menu-toggle .icon-bar {
visibility: hidden;
background-color: #eeeeee !important;
}
/*Add Menu text to responsive menu toggle button. */
.gf-menu-toggle:after {content:'Menu';float: left;font-size: 0.5;color:#ffffff;}
.gf-menu-toggle:after { margin-top: -15px;}
About the only thing I change is the background colors and the margins depending on where I want the menu to display vertically. It works great!
Luke -
The following users have thanked you: Derek Rayburn
- Just another old hacker!
-
Time to create page: 0.056 seconds