Graphene Mobile Menu Structure and Search Bar
Hello from a happy Graphene Theme user!
I’ve purchased Graphene Mobile a long time ago but it wasn’t looking nice when I first tried it, and disabled it. As the world is becoming more and more mobile I thought to give it a 2nd try, and I spent some time today studying the menu appearance in Graphene Mobile, where it went wrong the first time I tried it.
I’m getting a bit further now, as I learned from the Forum to create a custom menu for the Graphene Mobile theme, which I did, and so far, it looks quite allright, as long as the user is on my home page.
From the home page, navigation is looking very nice now that I have created a custom menu with less items than on the desktop version of the site. However, one thing I really dislike, is that after selecting one of the pages other than the home page, the new paga is displayed with the menu still expanded, rendering very ugly. I would like the menu to look the same like it is on the home page, where the submenu’s only open up when the user selects them.
Have a look at my website to see what I mean. (From a phone/ipod to see the mobile version!). Observe that the menu looks nice when you first land on my site. Try “Contact” and then “Email Versturen” which brings you to the page to send an email to me. Observe that the menu stays expanded causing to occupy a lot of space on the page, and it just looks ugly.
When the user has selected a sub-page, how can I make the menu appear the same way as on my home page, so that menu’s only are opened when the user touches one of the main choices?
A second question: How to get rid of the search bar on Graphene Mobile? It takes space away from the page and it distracts the user.
In Graphene Desktop the search bar can be disabled, but not in Graphene Mobile?
Many thanks for any hints to make this look better!
Ok I seem to be getting close, but not exactly where I want to be.
I looked also at the graphene mobile demo page and it learned me to make short menu items, and to make sure they fit on one line, which it now does. I still have color issues left for which I can’t find the solution:
1: When you select a page from a sub menu, and that page appears, the selected item in the main menu bar comes up with a text color sort of very light blueish that I can’t seem to change. Whatever color settings I tune, it doesn’t change. This does NOT happen on the Graphene Demo page. I have no clue what setting causes this in my page.
2: The selected sub menu appears with the background color of the selected item background color of the main menu. Only by choosing bright white (#FFF) this looks reasonble, as the sub menu always appears in bright white, and can’t be changed?
I’m a bit puzzled. I can’t get it to look like it looks in the Graphene Demo…
Any help appreciated!
Here I am again. I think I found a bug.
I went back putting all colors in the header and navigation section to default. Then step by step I went modifying it to my needs.
I found out that once you have put a custom value for “Current Menu Item Background”, this causes the layout to mess up.
Once you have touched this value and made it anything else than #155687, the theme gets ugly. Once you then have selected a page from a menu with sub-menus, that pages is shown with the not-selected-sub-menu-items colored in that custom color, which really looks ugly.
I tested it by changing the color to #155686 and then it already messes up. Changing back to #155687 makes it look nice again.
Hopefully this can be fixed somehow?
You must be logged in to reply to this topic.