Jeffg23:
Did you ever figure this out? I agree that the small down arrows are a poor design. Also, I think the "Menu" button should actually say "Menu". I get 10-20 users a day on the site that are hitting the Search magnifier icon, or the login icon because they can't find anything that says MENU. Then they leave because they are frustrated. I changed the color of the menu button to red, and it actually helped a little, but I am still getting a lot of confused customers. According to my Piwik stats over 60% of all my visitors are using smart phones.
I figured out how to convert the small screen gray Menu button with 3 bars into a red menu button with the word "Menu".
- In the /css directory, file: stylesheet.css, change line 296 to:
.collapse-button {position: absolute;right: 8px;top: 50%;width: 55px;background: #ff0001;box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.075);padding: 1px 1px;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);cursor: pointer;font-size: 14px;text-align: center;transform: translate(0, -50%);-o-transform: translate(0, -50%);-ms-transform: translate(0, -50%);-moz-transform: translate(0, -50%);-webkit-transform: translate(0, -50%);box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box}
Note: in the above line, I changed width from 40px to 50px, background to #ff001 (red), and padding: 7px 10px to padding: 1px 1px
- In the /jscript directory, file: jquery.slimmenu.min.js:
find: <span class="Icon-bar"></span><span class="Icon-bar"></span>
Change to: <span>Menu</span>
or if you want it all upper case: <span>MENU</span>
if you want to see the Red Menu Button, goto prowalksales.c0m
Only problem left is the logo graphic. Its 290x103. when I scale down to iPhone size, the Menu Button sits over the logo button. Anybody know if I can make a smaller logo that will only load when the smartphone size screen is displayed.
On